list of available Chai-jQuery assertions (Test Automation)

Why This Matters

In the world of test automation, assertions are indispensable tools that help ensure our web applications function correctly under various conditions. They validate the expected results against actual results, making them crucial components in the test automation process. By using Chai-jQuery assertions, we can write tests that are easy to understand, maintain, and integrate with popular test automation frameworks like Selenium, Cypress, Playwright, and more.

Prerequisites

To follow this lesson, you should have a basic understanding of:

1. JavaScript - The programming language used for building web applications and writing test scripts.
2. jQuery - A popular JavaScript library that simplifies HTML document traversing, manipulation, and event handling.
3. Test automation frameworks such as Selenium, Cypress, Playwright, etc. - These tools help automate the testing process of web applications by simulating user interactions and verifying the application's behavior.
4. Familiarity with Chai assertion library (optional but recommended) - Although not strictly required for this lesson, having an understanding of the Chai assertion library will help you better grasp the concepts presented here.

Core Concept

Chai-jQuery is an extension of the popular Chai assertion library that provides a set of assertions specifically designed to work with jQuery objects. It allows us to write more concise and expressive tests, as it combines the power of Chai with the convenience of jQuery.

Here's a list of some commonly used Chai-jQuery assertions:

1. assert.equal(expected, actual) - Checks if two values are equal.
2. expect(actual).to.equal(expected) - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
3. assert.deepEqual(expected, actual) - Checks if two objects have the same structure and values.
4. expect(actual).to.deep.equal(expected) - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
5. assert.isOk(actual) - Checks if a value is truthy (not null, undefined, or false).
6. expect(actual).to.be.ok() - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
7. assert.isNull(actual) - Checks if a value is null.
8. expect(actual).to.be.null() - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
9. assert.isUndefined(actual) - Checks if a value is undefined.
10. expect(actual).to.be.undefined() - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
11. assert.isTrue(actual) - Checks if a value is true.
12. expect(actual).to.be.true() - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
13. assert.isFalse(actual) - Checks if a value is false.
14. expect(actual).to.be.false() - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
15. assert.isFunction(actual) - Checks if a value is a function.
16. expect(actual).to.be.a('function') - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
17. assert.isArray(actual) - Checks if a value is an array.
18. expect(actual).to.be.an('array') - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
19. assert.isObject(actual) - Checks if a value is an object.
20. expect(actual).to.be.an('object') - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
21. assert.lengthOf(collection, length) - Checks if the length of a collection matches the expected length.
22. expect(collection).to.have.length(expectedLength) - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
23. assert.include(actual, expected) - Checks if a value includes another value.
24. expect(actual).to.include(expected) - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
25. assert.doesNotInclude(actual, expected) - Checks if a value does not include another value.
26. expect(actual).to.not.include(expected) - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
27. assert.isAtLeast(actual, expected) - Checks if a value is greater than or equal to the expected value.
28. expect(actual).to.be.at.least(expected) - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).
29. assert.isAtMost(actual, expected) - Checks if a value is less than or equal to the expected value.
30. expect(actual).to.be.at.most(expected) - An alias for the above assertion that uses BDD syntax (Behaviour Driven Development).

Worked Example

Let's consider a simple example where we have a jQuery object containing some HTML elements, and we want to test if the text of one of those elements matches an expected value.

const chai = require('chai');
const expect = chai.expect;
const $ = require('jquery');

describe('Test example', function() {
beforeEach(function() {
const html = `
<div id="testElement">Hello, World!</div>
`;

$(html).appendTo($("body"));
});

it('Checks element text', function() {
const element = $('#testElement');

expect(element.text()).to.equal('Hello, World!');
});
});

In this example, we first import Chai and jQuery. We then create a test suite with one test case that checks if the text of an HTML element with id "testElement" is equal to 'Hello, World!'. The beforeEach function ensures that the HTML for the test element is appended to the body before each test case runs.

Common Mistakes

1. Forgetting to include jQuery: Make sure you have jQuery included in your project before using Chai-jQuery assertions. This can be done by adding a script tag or installing it as a package dependency.
2. Incorrect usage of $: Ensure that the $ variable refers to jQuery and not another global object like DOMParser. If you're using multiple libraries, make sure they don't conflict with each other by renaming one or both of them.
3. Misunderstanding BDD syntax: Remember that aliases such as expect(actual).to.equal(expected) are just shorter versions of their Chai counterparts (e.g., assert.equal(expected, actual)) and use the same assertion logic. Stick to one style throughout your tests for better readability.
4. Not wrapping jQuery functions in a callback: When using test automation frameworks like Jest or Mocha, make sure to wrap jQuery functions inside a callback function to ensure proper execution order. This is because these frameworks use asynchronous testing and require all functions to be wrapped in callbacks.

Practice Questions

1. Write a test case using Chai-jQuery that checks if the text of an HTML element with id "testElement" is equal to 'Test Element'.

const chai = require('chai');
const expect = chai.expect;
const $ = require('jquery');

describe('Test example', function() {
beforeEach(function() {
const html = `
<div id="testElement">Test Element</div>
`;

$(html).appendTo($("body"));
});

it('Checks element text', function() {
const element = $('#testElement');

expect(element.text()).to.equal('Test Element');
});
});

1. Write a test case using Chai-jQuery that verifies if the length of an array stored in a jQuery object is greater than 5.

const chai = require('chai');
const expect = chai.expect;
const $ = require('jquery');

describe('Test example', function() {
beforeEach(function() {
const html = `
<script>
var myArray = [1, 2, 3, 4, 5, 6];
$(document.createElement('div')).html(JSON.stringify(myArray)).appendTo($("body"));
</script>
`;

$(html).appendTo($("body"));
});

it('Checks array length', function() {
const element = $('div').first();
const actualArray = JSON.parse(element.text());

expect(actualArray).to.have.length.greaterThan(5);
});
});

1. Write a test case using Chai-jQuery that checks if a specific class exists on an HTML element with id "testElement".

const chai = require('chai');
const expect = chai.expect;
const $ = require('jquery');

describe('Test example', function() {
beforeEach(function() {
const html = `
<div id="testElement" class="example-class">Hello, World!</div>
`;

$(html).appendTo($("body"));
});

it('Checks element class', function() {
const element = $('#testElement');

expect(element).to.have.class('example-class');
});
});

FAQ

1. What is the difference between Chai and Chai-jQuery? - Chai is a general-purpose assertion library for JavaScript, while Chai-jQuery provides assertions specifically designed to work with jQuery objects. While Chai can be used independently, Chai-jQuery extends its functionality by providing assertions that are tailored to testing jQuery objects.
2. Can I use Chai-jQuery with test automation frameworks like Selenium or Cypress? - Yes, you can use Chai-jQuery with test automation frameworks like Selenium, Cypress, and Playwright. However, keep in mind that these frameworks often have their own assertion libraries as well. In such cases, you might want to use the provided assertions for specific functionality and use Chai-jQuery for jQuery-related tests.
3. Do I need to install both Chai and Chai-jQuery separately? - No, Chai-jQuery is typically included as a dependency when you install jQuery using a package manager like npm or yarn. You can also install it separately if needed. If you're using a test automation framework that includes Chai-jQuery as part of its setup, make sure to check the documentation for proper installation instructions.