Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Various Locators in Cypress
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.
358 Views
