Working with Multiple Elements in Cypress

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 t…


This content originally appeared on DEV Community and was authored by Automation Bro

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 a handy .each() function to iterate through Array-like structures. Let’s see how we can use it –

.each

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 item. We can then use the .text() command to access the text of the list items.

assert

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 –

? Subscribe to my mailing list to get access to more content like this

? Follow automationbro on Twitter for the latest updates

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

Buy me a coffee

You can also support me by liking and sharing this content.

Thanks for reading!


This content originally appeared on DEV Community and was authored by Automation Bro


Print Share Comment Cite Upload Translate Updates
APA

Automation Bro | Sciencx (2021-05-23T06:13:18+00:00) Working with Multiple Elements in Cypress. Retrieved from https://www.scien.cx/2021/05/23/working-with-multiple-elements-in-cypress/

MLA
" » Working with Multiple Elements in Cypress." Automation Bro | Sciencx - Sunday May 23, 2021, https://www.scien.cx/2021/05/23/working-with-multiple-elements-in-cypress/
HARVARD
Automation Bro | Sciencx Sunday May 23, 2021 » Working with Multiple Elements in Cypress., viewed ,<https://www.scien.cx/2021/05/23/working-with-multiple-elements-in-cypress/>
VANCOUVER
Automation Bro | Sciencx - » Working with Multiple Elements in Cypress. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/23/working-with-multiple-elements-in-cypress/
CHICAGO
" » Working with Multiple Elements in Cypress." Automation Bro | Sciencx - Accessed . https://www.scien.cx/2021/05/23/working-with-multiple-elements-in-cypress/
IEEE
" » Working with Multiple Elements in Cypress." Automation Bro | Sciencx [Online]. Available: https://www.scien.cx/2021/05/23/working-with-multiple-elements-in-cypress/. [Accessed: ]
rf:citation
» Working with Multiple Elements in Cypress | Automation Bro | Sciencx | https://www.scien.cx/2021/05/23/working-with-multiple-elements-in-cypress/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.