paint-brush
Selecting elements in Cypress tests: basic + advanced patterns (2 useful Cheatsheets)by@sanzhanov
1,077 reads
1,077 reads

Selecting elements in Cypress tests: basic + advanced patterns (2 useful Cheatsheets)

by Alex SanzhanovMarch 23rd, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Cypress has built-in commands like*contains() to select test elements. Skillfully combining element attributes, binding to pseudo-classes and the current state of elements, using a hierarchy and combinators, and so on can give you additional advantages and ensure reliability in choosing DOM elements.
featured image - Selecting elements in Cypress tests: basic + advanced patterns (2 useful Cheatsheets)
Alex Sanzhanov HackerNoon profile picture


Greetings to all Cypress enthusiasts!


In this very short note, I would like to share with you one very useful thing for selecting elements in Cypress tests. To be honest, I had plans for a long time to summarize the most common CSS and jQuery selector patterns, which in fact was the reason for creating this extensive table.


You can, of course, use the great Cypress built-in commands like contains(), find(), eq(), etc. to select test elements. However, skillfully combining element attributes, binding to pseudo-classes and the current state of elements, using a hierarchy and combinators, and so on can give you additional advantages and ensure reliability in choosing DOM elements.


Well, I present to you my cheatsheets with basic and advanced selector patterns and examples of their use with the Cypress cy.get() command:


Cheatsheet #1: Basic patterns


Cheatsheet #2: Advanced patterns


I really hope that this will be useful for you and help you improve your skills in testing. To continue your journey with me and get even more information about testing with the awesome Cypress tool, I invite you to subscribe to my blog “Testing with Cypress”.


Thank you for your attention! Happy testing!


Also published here