Cypress only supports the Cascading Style Sheets (CSS) selectors to identify the elements. However, it can also work with XPath, with the help of the ‘Cypress-Xpath’ plugin.
Let us consider an Html code snippet and understand some of the rules of CSS expression.
Rules of CSS expression
The rules of Cascading Style Sheets (CSS) expression are as follows −
- Syntax with attribute-id and tagname is tagname#id − Here, the css expression should be -input#gsc-i-id1.
- Syntax with attribute-class and tagname is tagname.class − Here, the css expression should be – input.gsc-input.
- Syntax with any attribute value and tagname is tagname[attribute=’value’ − Here,the css expression should be – input[title=’search’].
- Syntax with parent to child traversal is parent child − Here, the css expression should be -tr td.
Cypress gives the feature of Open Selector Playground from which we can locate and identify elements automatically. This feature resides inside the Test Runner window which is highlighted in the below image.
On clicking on the Open Selector Playground, an arrow gets visible. Click on it and move it to the element, which we have to identify. The CSS expression gets populated in the field cy.get available just to the right of the arrow.