Various Locators in Cypress

CypressTest AutomationSoftware Testing

Cypress has to identify elements on the page to perform actions on them. The unique identification of the elements is done in Cypress with the help of jQuery selectors which is basically derived from css selectors.

Other automation tools like Selenium supports locators like id, name, classname, link text, partial link text, xpath and css selector.

The rules for writing css selector are listed below −

  • With the help of class name attribute. The selection of elements based on the unique class name is done with the help of (.) symbol. The customized css expression should be (.classname).

Let us consider the below html code −

The customized css with the help of class name should be − .gsc-input

  • With the help of id attributes. The selection of elements based on the unique id is done with the help of (#) symbol. The customized css expression should be (#id).

Let us consider the below html code −

The customized css with the help of id should be − #gsc-i-id1

  • With the help of tagname along with id or class name attribute. The selection of elements based on the unique id is done with the help of (#) symbol. The customized css expression should be (tagname#id).

The selection of elements based on the unique class is done with the help of (.) symbol. The customized css expression should be (tagname.classname).

Let us consider the below html code −

The customized css with the help of tagname and id should be: input#gsc-iid1.

The customized css with the help of tagname and class name should be − input.gsc-input.

  • With the help of tagname along with any attributes. The selection of elements is based on any attributes having unique value. The customized css expression should be (tagname[attribute='value']).

Let us consider the below html code −

The customized css with the help of tagname, attribute and its value should be: img[title='Tutorialspoint']

  • With the help of traversing from parent to child tag name separated by space. The customized css expression should be (div input). Here div refers to the parent and input refers to the child tagname respectively.

Let us consider the below html code −

The customized css with the help of parent and child tagname separated by space should be − tr td.

raja
Published on 05-Aug-2020 15:13:56
Advertisements