Home » cypress-tutorial » How to Locate HTML Elements Using Cypress Locators

Newly Updated Posts

How to Locate HTML Elements Using Cypress Locators

Previous Topic , In this tutorial we are going to learn How to Locate HTML Elements Using Cypress Locators. Along with locating elements from Cypress Test Runner with sample example.

How to Locate HTML Elements Using Cypress Locators

Locators plays an important role in automation of web-based applications. The locators identify that the GUI application which is under test, what type of elements is that either its textbox, Button , checkbox etc. As we are working on Cypress it supports only CSS selector. Therefore we will be using CSS selector in all over Cypress automation coding part.

As CSS (Cascading Style Sheets) can be written in multiple ways. Using Id, Class using attribute name and value pair. Above all for more details we can expand the CSS selector in different ways to perform.

Let discuss in depth why and how to create locators taking the example of Facebook login window to make it more simple.

How to Locate HTML Elements Using Cypress Locators?

Different Locators with examples

1) CSS Selectors ID:

HTML Elements Using Cypress Locators - ID

In the above image , we have highlighted the Email address of Facebook login page and we see the HTML on the bottom highlighted in yellow. In CSS the Id attribute is denoted by prefix ‘#‘. The syntax is as below:

SyntaxDescription
TagName#ValueofIDAttribute TagName= HTML tag for which we are looking to create locator

#= Hash sign, its the prefix of class

ValueofIDAttibute= class value for element being accessed

Therefore the locator will be: input#email

2) CSS Selectors Class :

HTML Elements Using Cypress Locators -CSS Selector from Class

Taking other example for creating the locator for class attribute . In CSS the class attribute is denoted by prefix ‘.’ The syntax to locate HTML for class id is below:

Syntax Description
TagName.ValueofClassAttibuteTagName= HTML tag for which we are looking to create locator
.= Dot sign, its the prefix of class
ValueofClassAttibute= class value for element being accessed

Therefore the locator will be: input.inputtext

3) CSS Selectors Attribute:

HTML Elements Using Cypress Locators -CSS Selector from attribute value

Creating locator using attribute we have to take the combination tag along with attribute name along with it value. The syntax is as below:

Syntax Description
TagName[AttributeName=AttributeValue] TagName= HTML tag for which we are looking to create locator

AttributeName=Any attribute to be used.Its always preferred to use unique attribute like Id

AttributeValue= Value of the attribute selected

Therefore the locator will be: input[name=email]

How to use Sub-String and Inner text to find locators in Cypress?

4) CSS Selectors Sub-String:

HTML Elements Using Cypress Locators -CSS Selector from sub-string

However we have learned the locators like ID, class and attribute. Finding HTML element by Sub-string is also quite easy. The symbol ‘^’ represents starts-with in CSS locator or prefix. Suppose in a Web page we want to locate Email whose name attribute is not static, its dynamic, the start 3 text is always same but the next part is dynamic and changes every time the page gets refresh, so in this case with the help of static string we can locate the element in CSS locator using Sub-String .The Syntax is as below:

Syntax Description
TagName[AttributeName^=’AttributeValue’] TagName=HTML tag for which we are looking to create locator

AttributeName=Any attribute to be used. Its always preferred to use unique attribute like Id

^=Represents matching a string with words starts-with or prefix

AttributeValue=Value of the attribute selected

Therefore the locator will be: input[name^=em]

5) CSS Selectors Inner-Text:

HTML Elements Using Cypress Locators-CSS Selector from Inner Text

The symbol ($) represents ends-with or Suffix in css locator. Suppose in a Web page we want to locate email text box whose type attribute is not static, its dynamic, the last 3 text is always same but the first part is dynamic and changes every time the page gets refresh, so in this case with the help of static string we can locate the element in css locator using starts-with (). Syntax is tagName[attributeName$=’attributeValue’]

Syntax Description
TagName[TttributeName$=’AttributeValue’] TagName=HTML tag for which we are looking to create locator
AttributeName=Any attribute to be used. Its always preferred to use unique attribute like Id
$=Represents matching a string with words ends-with or suffix
AttributeValue=Value of the attribute selected

Therefore the locator will be: input[name$=ail]

Note: For easy in capturing the CSS and xpath. Chrome provides a plugin ChroPath. That make creating and getting the locator very easily. In further tutorials we will use this plugin.

How To find locators using Cypress Selector Playground?

Imagine , If any automation tool provides you the feature get and verify the locators with in the tools itself. Isn’t that cool? Cypress automation provides you the same feature to get and verify the locators like CSS to make ease in automation with a functionality known as Open Selector Playground.

Steps to get and validate CSS locators is below:

1) Open the Cypress Test Runner and Run any of your existing script.

Cypress Test Runner

2) Select the toggle button and enable ‘open Selector Playground’ highlighted on the top.

Cypress Selector Playground

3) Once the ‘open Selector Playground’ is enabled click to any of the element on the UI (ex: CATEGORIES). The CSS gets generated on the top.

Cypress Selector Playground - CSS locator

4) To validate the element click to arrow button as in screenshot, the element gets highlighted in UI.

Cypress Selector Playground Element highligted