Locators in Cypress

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!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024