Tutorial 5 – Locators in Cypress
What you will Learn :
Overview of HTML page
How to locate elements in a webpage using css selector
Use ‘class’ as an attribute to locate an element
Use ‘id’ as an attribute to locate an element
Use general attributes (other than class and id) to locate an element
Use class and attribute combination to locate an element
Overview of HTML page
Let us see an overview of html page, open chrome browser & launch the website http://demo.automationtesting.in/Register.html
Next, right click a text box
Click Inspect
So this is the html code written for this ‘First Name’ text box element.
As you can see, this element is represented by tagname <input
Also, different attributes are provided to this element: type, placeholder, class etc
Each attribute has a value.
Similarly, if you inspect the cricket checkbox, you will see its tagname, attributes (like: id, style etc) and values.
We can use these attributes to locate an element.
How to locate elements in a webpage using css selector
Two things are very important when you want to automate an application using an automation tool:
Locate an element
After locating element, perform certain actions on an element (click, type etc)
For example, I have an input box on a webpage http://demo.automationtesting.in/Register.html
Before entering any text inside the input box, you have to first locate the element/input box. Similarly, before clicking the radio button or a checkox, we have to first locate the elements. 
In selenium, we can locate an element using various types of locators, example: id, name, class, xpath, css selector etc.
However, in cypress, there is only one locator: css selector
We can use various combinations of id, class etc with css selector itself.
We will now see how to use css selector to locate an element on webpage.
In cypress, we can use get() method to find an element based on the css selector we pass as an input
We can write the selector in different ways:-
.value of class attribute
#value of id attribute
[attribute=value]
.value of class attribute[attribute=value]
Use ‘class’ as an attribute to locate an element
The syntax is .value of class attribute
Launch http://demo.nopcommerce.com/ in chrome browser
Inspect REGISTER link
You can see that this element has a class attribute having the value ‘ico-register’.
So the css selector for this element would be .ico-register
To double check this, just copy .ico-register
Do control-F on the html page, see below, you would get a search box
Past .ico-register and hit Enter. Notice that REGISTER link gets highlighted, you can also see a yellow highlight on the html page. Also we see 1 of 1 in the search field. This means that there is only 1 element on this webpage whose css selector is .ico-register
Use ‘id’ as an attribute to locate an element
The syntax is #value of id attribute
Launch http://demo.automationtesting.in/Register.html
Inspect ‘Languages’ text box
Notice that it has an ‘id’ attribute having the value ‘msdd’. Thus its css selector would be #msdd
To double check, you can search for #msdd, you would see only 1 element gets highlighted
Use general attributes (other than class and id) to locate an element
Syntax: inside the square brackets, we write attribute=value viz [attribute=value]
Instead of right clicking an element & clicking ‘Inspect’, you can also click 
to inspect an element
So let us click and inspect Hockey checkbox. There is a ‘value’ attribute having the value ‘Hockey’. So the css selector would be [value=Hockey]
Use class and attribute combination to locate an element
Launch http://books.toscrape.com/
Inspect ‘Add to basket’ button. You will see that the value of class attribute has 3 classes separated by 2 white spaces:
‘btn btn-primary btn-block’.
Now css selector does not accept white spaces. So, we can use either btn or btn-primary or btn-block as one of the class values.
Along with class, lets take value attribute to construct our css selector:
.btn[value=submit]
You will notice that there are 20 matches for this locator & the first one points to first ‘Add to basket’ button
So these are the 4 basic ways to locate an element using css selector.
You can refer the link https://www.w3schools.com/cssref/css_selectors.asp
and refer all the css selector syntaxes
Thank you for reading!