How can I compare Arrays in Cypress?
Last Updated :
24 Oct, 2024
In Cypress, you can compare arrays by extracting them and using JavaScript's array comparison methods. Cypress provides a variety of commands such as .then() or .should() to extract the arrays from the DOM or API responses and compare them. You can use built-in JavaScript methods like expect() from Chai (Cypress's assertion library) to check for equality, deep equality, or custom comparisons.
In this example, we will demonstrate how to compare arrays in Cypress using a few different scenarios.
Example
Scenario 1: Comparing Two Static Arrays
In this example, we'll compare two static arrays directly within the Cypress test.
JavaScript
describe('Compare two static arrays', () => {
it('should compare two arrays for equality', () => {
const array1 = [1, 2, 3, 4];
const array2 = [1, 2, 3, 4];
const array3 = [1, 2, 3, 5];
// Check if the arrays are deeply equal
expect(array1).to.deep.equal(array2); // This should pass
// Check if the arrays are not equal
expect(array1).to.not.deep.equal(array3); // This should pass
});
});
Explanation
- Declare static arrays: We define three arrays (array1, array2, and array3).
- Deep equality assertion: The expect(array1).to.deep.equal(array2) assertion compares both arrays for deep equality. In this case, it passes because the arrays have the same content.
- Non-equality assertion: expect(array1).to.not.deep.equal(array3) checks that the two arrays are not equal, which also passes because array3 has different content.
Output:
OutputScenario 2: Comparing Arrays Extracted from the DOM
In this scenario, we'll extract arrays from DOM elements, such as a list of items, and compare them with an expected array.
HTML Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Comparison Example</title>
</head>
<body>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>
Cypress Test Code
Here, we'll compare the text content of the <li> elements in the DOM with an expected array.
JavaScript
describe('Compare arrays from the DOM', () => {
it('should compare the list items with an expected array', () => {
// Visit the page containing the list
cy.visit('index.html');
// Expected array
const expectedArray = ['Apple', 'Banana', 'Cherry'];
// Get the list items, extract text, and compare it with the expected array
cy.get('ul li').then(($items) => {
const actualArray = [...$items].map((item) => item.innerText);
// Compare the actual array with the expected array
expect(actualArray).to.deep.equal(expectedArray);
});
});
});
Explanation
- Visit the page: cy.visit('index.html') loads the page containing the list items.
- Extract the list items: cy.get('ul li') selects all <li> elements from the DOM.
- Convert the elements to an array: Inside .then(($items) => { ... }), we convert the jQuery collection ($items) to a regular array and map over the elements to extract the text content using item.innerText.
- Compare arrays: We then compare the extracted actualArray with the expectedArray using expect().to.deep.equal().
Output:
OutputConclusion
Comparing arrays in Cypress can be done using the expect() assertion from Chai, which supports deep equality comparisons. You can compare static arrays, arrays extracted from the DOM, or arrays from API responses. Cypress's .then() and .invoke() allow you to manipulate arrays before performing assertions, making the array comparison process flexible and efficient.
Similar Reads
Basic Commands in Cypress Cypress being a modern, full-stack test runner, developers are able to create maintainable web application unit tests which turn out to be reliable and supportable. It gives a palette of commands for interacting with web elements that allows for various actions to happen, and it is a very useful too
7 min read
Java Arrays compare() Method with Examples The Arrays compare() method in Java is a part of the java.util package to compare arrays lexicographically (dictionary order). This method is useful for ordering arrays and different overloads for different types including boolean, byte, char, double, float, int, long, short, and Object arrays. Exam
3 min read
How to run Cypress Tests in Chrome and Edge? Cypress is a popular testing framework that provides end-to-end testing for various web applications. It can provide testing in various browsers like Chrome, Firefox, etc. In this article, we will learn how to run tests in Chrome and Edge.What is Cypress Framework?Cypress is an end-to-end testing fr
3 min read
How to Compare Jagged Arrays using Lodash ? Jagged arrays, or arrays of arrays, pose a unique challenge when it comes to comparison, especially when order doesn't matter. Below are the approaches to compare jagged arrays using Lodash: Table of Content Sorting and ComparingConverting to Sets and ComparingRun the below command to install Lodash
2 min read
Aliases in Cypress Cypress is a front-end testing tool. It allows us developers and QA Engineers who build web applications using the modern JavaScript framework to set up tests, write tests, run tests, and debug tests. It is popular as it lets us write faster, easier, and more reliable tests. Cypress can test anythin
4 min read
How to skip a test in Cypress conditionally ? In Cypress, there might be scenarios where you want to skip a test conditionally based on certain criteria, such as browser type, environment variables, or application state. Cypress provides several ways to conditionally skip tests, including using this.skip(), environment variables, or checking sp
3 min read