Cypress Locators

Cypress Locators

Welcome to the Cypress learning!!!

If you are reading this article, you should have gone through the Cypress Installation and basics of the Cypress framework. As you already know that Cypress is an emerging Automation Testing tool in industry. So, let’s get started

What are Cypress Locators:

Cypress locators are used to find WebElements in the HTML Document Object Model (DOM). A Selector or Locator is an object that finds and returns web page items/elements on a page based on the query. In Automation, to perform any operation on the web elements first you need to locate an element and perform an action on that element. Once you find multiple elements on webpage, relevant operations can be performed on these elements or assert their presence for validation.

???????????So, what are WebElements? Let’s go in detail

???????????So, all the web pages have webelements and let’s take the above image as example, there are elements such as search mail, Compose, Inbox, Sent, Drafts, more etc.

???????????The address used to find the web page elements are called as Locators. Locators are very important because, with the help of the locators Cypress uniquely identifies the web page elements. Locators are generally classified in the following categories, while they are being used to find multiple elements in Cypress:

??Ids – Locate web elements using ID

Eg: id="searchBtn", id="btnDelete"

??Class – Locate web elements using class value

Eg: class="left", class="box”

?

??Tags – Locate web elements using HTML tags

Eg: <button>, <input>, <form>, <a> etc

??Name – Locate web elements using name attribute

Eg: name="btnDelete", name="btnAdd", name="chkSelectRow[ ]"

??Attributes – Locate web elements using other attributes

Eg: value="Search", type="button", value="Add"

How to use the locators in Cypress:

???????????Cypress by default supports to use only CSS elements, so in case if you intend to use xpath, it requires additional plugin needs to be installed in Cypress. So, Let’s start with syntax to use the web page elements in Cypress,

Get HTML element by ID:

ID is an attribute of an HTML tag, which is used to find a HTML element. Using the Cypress command – cy.get(), you can directly pass the id with prefix # and get the element.

Consider the HTML code below,

<input id="username" class="password">

To get the element by ID,

cy.get(‘#username’)

Get HTML element by Class:

Class is also an attribute of an HTML element, that is used as a locator or selector. So, to get the Class element we use .(dot) as a prefix inside the cy.get().

<input id="email_login" class="email_password">

To get the element by Class,

cy.get(‘.email_password’)

Get HTML element by Tag Name:

???????????Using the Cypress command – cy.get(), you can directly get the element by passing the tag name. Let’s consider the below code,

<input type="button" class="" id="btnAdd" name="btnAdd" value="Add">

<a href="#" class="toggle tiptip">&gt;</a>

To get the element by tag name,

cy.get(‘input’)

cy.get(‘a’)

Get HTML element by Name & Attribute:

?????????Cypress provides a way to get the element by attribute name. Since it supports all the different types of CSS selectors, you can pass the CSS selectors inside the cy.get() command to get an element.

Let’s understand by using the below example,

<button id="submitbtn" type="submit" class="btn btn-primary" name="signup" value="sign_up"> Submit </button>

To get the element by using attribute,

cy.get(‘button[name=”signup”]’)

cy.get(‘button[value=”sign_up”]’)

So, now we will just go through all the locators by using below web page

The below image shows demonstration of web elements using different Cypress locators,

Other ways to get HTML element:

Now we will also see some other ways to get selector in DOM,

1)????Using tag name with ID

Way to write selector for above image is here,

cy.get(‘button.btn.google’)

We have used button tag and class attribute value, so here if we have space in the class attribute value we can use .(dot) to get the web element and in same way we use (#) to use the ID with tag name.

?2)????Using previous elements in DOM

For above image we can write selector as below,

cy.get(‘form > fieldset > p > input#searchBtn’)

?

3)????Writing text inside the selector - cy.contains(‘ ’)

We can write selectors like below,

cy.contains(‘Refresh’)

?

Finding HTML elements by using xpath:

?????????As already stated above Cypress supports only CSS selectors, now we will see how to use xpath by installing available plugin in Cypress.

Install with npm

npm install -D cypress-xpath

Include he below line of code in your support/index.js (or) support/e2e.js

require('cypress-xpath');

Once you install xpath plugin successfully, you can find xpath version in your package.json.

One thing is to note here is that if you don’t want to install plugin, you can write below line directly in spec file.

/// <reference types="cypress-xpath" />

Syntax of xpath:

cy.xpath(‘//tagname[@attribute=”value”]’)

Now we will see examples,

For above image, we write xpath selector as below

cy.xpath(‘//input[@class="ycptinput"]’)

?

Another example,

To find a selector for span,

cy.xpath(‘//form/div/div[1]/div[2]/div/span’)

So here, you should use index [ ] to find exact selector.