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

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