two helpful cheat sheets

Cypress. I had plans for a long time to summarize the most common CSS/jQuery selector patterns, which actually served as a prerequisite for creating two tables with basic And extended templates, as well as examples of their use.

As you know, selectors are essentially the basis for the code of autotests, the quality of the selector largely determines the understandability, stability and maintainability of the autotest. A “good” selector is half the battle in creating a reliable test. Fragile, change-resistant selectors obviously lead to undesirable test sensitivity to all sorts of changes to the user interface, such as the text content of the page under test, the CSS styles used, and so on.

It should be noted that documentation Cypress has some pretty good advice on using “stable” selectors, mostly based on selecting elements by unique type attributes. data-cy, data-test etc. Of course, Cypress allows you to use its wonderful built-in commands, such as find(), eq(), contains() etc. that can be used instead of some of the templates presented in the tables. At the same time, the skillful combination of element attributes, binding to pseudo-classes and the current state of elements, the use of a hierarchy and combinators, etc. help you avoid composing long chains of commands. Moreover, it seems to me that in some cases the ability to select the desired element in one step based on a short selector, without resorting to built-in commands or xpath, is an additional testament to your skill as an experienced tester.

In the table with basic templates collects the most common selector templates based on the use of basic element attributes, such as classes, identifiers, element types, as well as attribute values, their combination, hierarchy, etc. Extended templates provide for the selection of elements based on their position in the structure of the HTML markup, pseudo-classes, i.e. a certain state or property of an element, etc.

Cheat Sheet #1: Basic Selector Patterns