Cypress is a powerful end-to-end testing framework that allows developers to write robust and reliable tests for web applications. A common task in Cypress testing involves interacting with elements on a page and verifying their properties. One frequent scenario is needing to count a selection of items in Cypress and get the length of that selection. Whether you’re validating the number of displayed products, checking the options in a dropdown, or verifying the number of elements matching a specific criteria, knowing how to accurately count and get the length of selected items is essential for writing effective and meaningful tests. This article will delve into the various methods and best practices for achieving this, providing you with the knowledge and tools to confidently handle element counting in your Cypress tests.

Understanding Cypress Selectors and length Property

Before diving into counting elements, it’s crucial to understand how Cypress selectors work and how they relate to the length property. Cypress uses CSS selectors to identify elements on a webpage. These selectors can be simple, like selecting an element by its ID or class, or more complex, involving chained selectors and filtering. Once you’ve selected elements using Cypress commands like cy.get() or cy.find(), you can then access the length property of the resulting jQuery object to determine the number of elements that match your selector. This length property provides a straightforward way to count the selected elements.

The cy.get() command is the primary way to select elements in Cypress. It retrieves one or more DOM elements based on a CSS selector. It’s important to note that cy.get() and other Cypress commands return a Cypress chainable object, not a direct array or list of elements. Therefore, you need to use Cypress’s .then() command or .should() assertion to access the underlying jQuery object and its properties, including the length property. The use of .then() allows you to work with the value returned by the previous command in the chain. You can also use cy.wrap() to convert a plain JavaScript array or object into a Cypress chainable object.

For instance, if you have a list of items with the class “product-item,” you can use cy.get(’.product-item’) to select all elements with that class. To get the count of these elements, you would chain .then() to access the jQuery object and then access its length property. This approach ensures that Cypress waits for the elements to be present in the DOM before attempting to count them, preventing common timing issues that can occur in asynchronous JavaScript environments. According to Cypress’s documentation, using assertions like .should(‘have.length’, expectedLength) is the most reliable way to verify the number of elements, as it automatically retries until the assertion passes or a timeout occurs [1].

Methods to Count Selected Items in Cypress

Cypress provides several methods to count a selection of items in Cypress and get the length. These methods primarily revolve around using cy.get() to select elements and then accessing the length property of the resulting jQuery object. Here are the most common approaches:

• Using .then(): This is the most explicit way to access the length property. You chain .then() to the cy.get() command, which provides a callback function that receives the jQuery object. Inside this function, you can access the length property and perform assertions or other operations.
• Using .should(‘have.length’, expectedLength): This is the recommended approach for asserting the number of elements. Cypress automatically retries the assertion until it passes or times out, making it resilient to timing issues.

Let’s look at an example of using .then(): cy.get('.product-item').then(($elements) => { const itemCount = $elements.length; expect(itemCount).to.equal(10); }); In this example, we select all elements with the class “product-item,” access the jQuery object using .then(), get the length property, and then assert that the count is equal to 10. It’s important to use expect from Chai assertion library, which is built into Cypress.

Here’s an example of using .should(‘have.length’, expectedLength): cy.get('.product-item').should('have.length', 10); This is a more concise and recommended way to assert the number of elements. Cypress will automatically retry this assertion until it passes or a timeout occurs. This method is preferred because it handles potential timing issues more gracefully than the .then() approach. The ability to retry assertions is one of Cypress’s key strengths, ensuring that tests are reliable even when dealing with asynchronous operations and dynamic content updates.

Featured Snippet: To count selected items in Cypress, use cy.get(‘selector’).should(‘have.length’, expectedLength). This command selects elements matching the ‘selector’ and asserts that the number of selected elements equals ’expectedLength’. Cypress automatically retries this assertion until it passes or times out, ensuring accurate and reliable results even with dynamic content.

Advanced Techniques for Counting Elements

Beyond the basic methods, there are more advanced techniques for count a selection of items in Cypress and get the length of elements, particularly when dealing with dynamic content or complex selectors. These techniques involve using Cypress commands like .filter(), .find(), and custom commands to refine your element selection and counting process.

The .filter() command allows you to narrow down your element selection based on specific criteria. For example, you might want to count only the “product-item” elements that are currently in stock. You can use .filter() to select only those elements and then get the length property. Here’s an example: cy.get('.product-item').filter(':contains("In Stock")').should('have.length', 5); This code selects all “product-item” elements, filters them to include only those that contain the text “In Stock,” and then asserts that the count is equal to 5.

The .find() command is useful for selecting elements within a specific parent element. This can be helpful when you need to count elements within a particular section of the page. For instance, if you have multiple sections with product items, you can use .find() to select the product items within a specific section and then get their count. Example: cy.get('section1').find('.product-item').should('have.length', 3); This will only select the elements with class ‘product-item’ within the element that has ID ‘section1’.

Custom commands can be created to encapsulate reusable logic for counting elements. If you frequently need to count elements based on specific criteria, you can create a custom command that takes the selector and expected count as arguments and performs the assertion. This can make your tests more readable and maintainable. An example of a custom command might look like this: Cypress.Commands.add('countElements', (selector, expectedCount) => { cy.get(selector).should('have.length', expectedCount); }); You could then use this custom command in your tests like this: cy.countElements('.active-user', 15), which improves code reusability and readability [2].

Best Practices and Common Pitfalls

When working with Cypress to count a selection of items in Cypress and get the length, it’s crucial to follow best practices to ensure your tests are reliable and maintainable. Avoiding common pitfalls can save you time and prevent flaky tests.

One common pitfall is not waiting for elements to be present in the DOM before attempting to count them. Cypress commands are asynchronous, so it’s important to use assertions or cy.wait() to ensure that the elements are fully loaded before you try to count them. Using .should(‘have.length’, expectedLength) is the best way to accomplish this, as it automatically retries until the assertion passes or times out.

Another best practice is to use specific and reliable selectors. Avoid using overly generic selectors that might match more elements than intended. Using IDs, specific class names, or chained selectors can help you target the exact elements you want to count. Additionally, be mindful of dynamic content and ensure that your selectors are robust enough to handle changes in the page structure. For example, if the class names change frequently, consider using a more stable attribute like a data attribute. According to a Stack Overflow survey, using data attributes for testing is a common practice to avoid test breakage due to CSS changes [3].

Here are some key points to remember:

• Always use assertions to verify the count of elements.
• Use specific and reliable selectors.
• Be mindful of dynamic content and potential timing issues.

How do I count the number of elements with a specific class in Cypress?

Use `cy.get('.your-class').should('have.length', expectedCount)`, replacing '.your-class' with your class name and 'expectedCount' with the expected number of elements.

Can I use .then() to get the length of elements in Cypress?

Yes, you can use .then(($elements) => { const count = $elements.length; / Your code here / }), but using .should('have.length', expectedCount) is generally recommended for its retry mechanism.

How do I count elements that are visible on the page?

You can chain the .filter(':visible') command to your selector: `cy.get('.your-selector').filter(':visible').should('have.length', expectedCount)`.

What happens if the elements are not present when I try to count them?

If you use .should('have.length', expectedCount), Cypress will automatically retry the assertion until the elements appear or the timeout is reached. This prevents flaky tests.

1. Use cy.get() to select the element(s)
2. Chain .should(‘have.length’, expectedLength) to assert the number of elements.
3. Adjust the selector as needed to target the correct elements.
4. Consider using .filter() for more specific selections.

Ready to elevate your Cypress testing skills? Explore Cypress’s official documentation, experiment with different counting techniques, and consider sharing your own custom commands with the community. By continuously learning and refining your testing strategies, you can build high-quality web applications that deliver exceptional user experiences. Check out our other Cypress tutorials and take your testing to the next level!

Question & Answer :
I’m starting to learn Cypress. I have a 4 row table (with a class of datatable). I can verify the number of rows this way:

cy.get('.datatable').find('tr').each(function(row, i){ expect(i).to.be.lessThan(4) }) 

This is fine, but it seems awkward, since I just want to count the length and don’t really need to access the stuff in the rows, and I assume it’s faster to do one thing than do 4 things.

If I log the selection (not sure what else to call it):

cy.log(cy.get('.datatable').find('tr')) 

it comes out as [object Object] and I’m not quite sure how to deconstruct that, which suggests to me that I’m thinking about this all wrong.

If I try:

expect(cy.get('.datatable').find('tr')).to.have.lengthOf(4) 

I get AssertionError: expected { Object (chainerId, firstCall) } to have a property 'length'

If I try:

expect(Cypress.$('.datatable > tr')).to.have.lengthOf(4) 

I get AssertionError: expected { Object (length, prevObject, ...) } to have a length of 4 but got 0 so at least it has a length here?

If I log that method of selection I get Object{4}. I’m not sure where to go from here. It seems like this would be a very common thing to deal with.

Found a solution, This works to check a count of items:

cy.get('.datatable').find('tr').should('have.length', 4) 

This does not work with the Cypress.$() method of notation.

Reference: https://docs.cypress.io/guides/references/assertions.html#Length