SDET Unicorns

Working with Multiple Elements in Cypress

Multiple Elements

Table of Content

In this Cypress tutorial, we will cover how you can work with multiple elements. We will verify the length of the list as well as assert the text of all the list items.

Test Scenario

In this test scenario, we will try to get the length of the menu link items below as well as get the text of each of the list items.

menu-links

.each()

Since we will be working with the list items, we will need to iterate through the list. Cypress provides an handy .each() function to iterate through Array like structures. Let’s see how we can use it –

    cy.get("#primary-menu [id*=menu-item]").each((item, index, list) => {
      // assert the length of the list 
      expect(list).to.have.length(6);
    }); 

Asserting the list text

Once we are able to iterate through the list using the .each() command, we can get access to each individual list items. We can then use the .text() command to access the text of the list items.

    cy.get("#primary-menu [id*=menu-item]").each((item, index, list) => {
      // Assert the text using the .text() command
      expect(Cypress.$(item).text()).to.eq(menuLinkText[index]);

      // Assert the text using the .wrap() command
      cy.wrap(item).should("contain.text", menuLinkText[index])
    }); 

In the above code, we are asserting the text using 2 ways –

  • Via the .text() command – this way is useful if you would like to modify the text in some way before asserting it
  • Via the .wrap() and .should() command – this is the natural way to assert the text in Cypress

Depending on your own use case you can pick either way to assert the text.


Check out the video below to see learn how to work with multiple elements in Cypress –


I hope this post helped you out, let me know if you have any questions in the comments below!

Happy testing! 

My Resources

Thrive Suite: The all-in-one WordPress theme I used to create my blog.
Jasper AI: My favorite AI writing tool.
Surfer SEO:  A tool to help you rank your content on the first page of Google.

Write Content Faster

5/5

Write blog posts that rank for affiliate terms!

Join our mailing list

Unlock the Secrets to Becoming a SDET Pro in the Industry!

Stay ahead of the curve! Join our mailing list for exclusive insights, tips, and the latest industry updates delivered straight to your inbox

Table of Content

Related Post

7 Principles of Software Testing

7 Principles of Software Testing with Examples

Software testing plays a crucial role in the software development life cycle as it helps ensure the quality, reliability, and performance of the final product. Software testing is not just about finding defects; it also provides valuable insights into the overall quality of the software. By conducting effective software testing, it shows how well the application behaves in different scenarios and whether it meets user expectations.

Read More »
Differences Between CI/CD and DevOps

Key Differences Between CI/CD and DevOps

Software development is far from a simple journey that involves merely executing code and launching applications. It often presents challenges, as it’s rare to get everything right from the start. Each time you implement new or frequent code changes, you inadvertently introduce potential issues that can be time-consuming to resolve. This complexity necessitates a structured approach to ensure smooth production.

Read More »