How To Find HTML Elements Using Cypress Locators

How to use Locators in Cypress

Cypress supports only CSS selectors out of the box for locating elements in the DOM. So in case you intend to use other web locators like XPath, ID, etc., with Cypress, you need to add relevant external packages that support using those with Cypress locators.

Let’s deep dive into details of how to use and work with locators in Cypress. For this blog in the Cypress tutorial series, I will be using ecommerce practice site for showcasing the usage of the relevant web locators.

You can go through the following video to learn Cypress GET and FIND Command Hacks supported by the Cypress test automation framework. This will help you write your first cypress test and target HTML elements using the GET command. However, visit the TestMu AI YouTube channel for more Cypress videos, so there’s never a shortage of Cypress learning opportunities.

Identify HTML elements using ‘ID’ Cypress locator

IDs are the unique attributes given to the HTML elements that can be identified and updated with minimal effort. The ID attribute is unique across the DOM, due to which it is the fastest way for locating the required WebElement. It also helps in accelerating the interactions with the underlying elements in the DOM.

Here is a sample HTML page that showcases the syntax of ID in HTML:

<ul id="lists">
   <li id="first"> Option 1 </li>
   <li id="second"> Option 2 </li>
   <li id="third"> Option 3 </li>
</ul>

Here, <ul> tag can be identified uniquely with CSS selectors command using $(‘#lists’).

Demonstration: ID locator in Cypress

Let’s look at using an ID locator in Cypress using the example site that we showed earlier. Here, we locate the search bar on the site; the HTML representation of the search bar is below:

<input class=“search_query form-control ac_input” type=“text”
id=“search_query_top” name=“search_query” placeholder=“Search” value="" autocomplete=“off”>

Here is the implementation that demonstrates the use of the ID locator in Cypress:

describe('Cypress Locators in action', ()=>{
   beforeEach(()=>{
       cy.visit('http://automationpractice.com')
   })
   it('Interact with Elements using ID selector', ()=>{
       cy.get('#search_query_top') //ids are identified using # prefix
       .type('Dress')
       .type('{enter}')
       .get('#center_column')
       .should('be.visible')
   })
})

cy.get() is used in Cypress to find multiple elements in DOM. The method accepts a parameter in the form of an identifier. Here we pass the ID of the element with ‘#’ as a prefix. Since the call is chainable, we used type() to enter values and used should() to assert the visibility of the corresponding WebElement.

Shown below is the execution screenshot, which indicates that the test execution was successful:

Identify HTML elements using ‘NAME’ Cypress locator

The HTML name attribute is mostly used by <form>,<button>, <input> tags where it helps to identify field details when submitted to the server. You can refer to our detailed blog on NAME locator in Selenium to get insights on the said web locator.

Here is a sample HTML page that showcases the syntax of NAME in HTML:

Demonstration: NAME locator in Cypress

Shown below is the syntax of the NAME locator in Cypress:

cy.get(<tag>[name='value'])

where <tag> can be HTML tags like input, form, etc. <tag> is optional, when not specified, it will match name against all the tags (wherever match is found).

describe('Cypress Locators in action', ()=>{
   beforeEach(()=>{
       cy.visit('http://automationpractice.com')
   })
it('Interact with Elements using name attribute',()=>{
   cy.get('input[name="search_query"]') //observe how we use name attribute
   .type('Tshirt{enter}')
   .get('#center_column')
   .should('be.visible')
})
})

Code walkthrough

Once the site is opened after the beforeEach() execution, the test “Interact with Elements using name attribute” starts with identifying elements using the name attribute (‘search_query’) and then sends the search value to the text box using the type() method.

it('Interact with Elements using name attribute',()=>{
   cy.get('input[name="search_query"]') //observe how we use name attribute
   .type('Tshirt{enter}')

The Inspect tool in Google Chrome is used for locating the element using the CSS Selector. Here is how we use the browser console using $() as the CSS selector:

Once the search results are available, we can use the ID locator in Cypress to find multiple elements and assert using Cypress’s built-in assertion method should(‘be.visible’). An assert is raised if the search results are not displayed properly.

Execution

Shown below is the execution snapshot, which indicates the respective WebElement was located successfully using the NAME locator:

Identify HTML elements using ‘Attributes’ in Cypress

Attributes are ways to set a particular property of the HTML element. They also help define the behavior of the elements when a specific condition is set and triggered. Attributes are applied to almost all the HTML tags and work similarly to the NAME locator in Cypress. Thus, we can use the same syntax for locating elements using other attributes as well.

Shown below is the syntax to use attributes in Cypress:

cy.get(<tag>[attribute_name=attribute_value])

Additionally, consider a case where one would like to use Cypress to find multiple elements or all of them having attribute titles whose value contains ‘store’ (e.g., store-1, store-2, …). One of the brute force ways is to find each element one by one with the exact attribute value using the above syntax. However, this task is mundane and not beneficial when we need to find multiple elements in Cypress and add some common functional logic to them.

A better approach would be to use the regex-supported syntax in the CSS selector to get the list of items in one go.

Fortunately, Cypress provides an easier way to tackle this problem, where you can use patterns like starts-with and ends-with particular substring to match all the elements in the DOM.

Also Read: How To Get Attribute Value in Selenium WebDriver

Demonstration : Using Attributes in Cypress

describe('Cypress Locators in action', ()=>{
   beforeEach(()=>{
       cy.visit('http://automationpractice.com')
   })
  
   it('Finding elements using attribute values',()=>{
    cy.get('a[title*="store"]')
     .should('have.length.at.most',1)
  
    cy.get('a[title*="store" i]')  //case insensitive
     .should('have.length.gt',1)
       .each(i=> console.table([i.attr('href')]))
})
 
})

Code Walkthrough

Step1 

The cy.get() method is used in Cypress to find multiple elements based on attribute value using title*=store for locating Our Stores link from the footer as shown below:

Step 2

Once the intended WebElement is located, we validate that the page has at least one element that matches the required locator. Cypress built-in assertion method .should(‘have.length.at.most’,1) is used for checking length value where ‘have.length.at.most’ in Cypress evaluates the length of the located element.

Step 3

The cy.get(‘a[title*=”store” i]’)  method is used to find all the links on the page that contains the title “store”. In the screenshot shown below,  I have highlighted two elements on the page that matched the required locator:

• The first one is the logo with the title = “My Store”
• The second one is the footer with the title = “Our stores”

Step 4

The should() method is used for asserting if the length of the located WebElements is greater than 1. The length is checked using the have.length.gt method. 

.each() in Cypress is used to iterate on each of the located WebElements. Here I am printing the href value using the attr([key]) method that returns the attribute value for the key provided as the argument.

.should('have.length.gt',1)
    .each(i=> console.table([i.attr('href')]))       

As seen below,  the URL of each element that is located on the page is printed on the console:

Austin Siewert

CEO, Vercel

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

Identify HTML elements using ‘By Class’ in Cypress

HTML class attribute is mostly used for styling the element or group of elements. Unlike ID, class attributes need not be unique, which is why this is helpful when we need to apply a common style to multiple elements.

In Cypress, class selectors can be identified using the following options:

• cy.get(.<class_value>)
• cy.get(<tags>[class='<class_value’])

Demonstration: Using ‘By Class’ in Cypress

Consider the following HTML Page for demonstration:

<a href="http://automationpractice.com/index.php?id_category=3&controller=category" title=“Women” class=“sf-with-ul”>Women</a>

Shown below is the implementation that demonstrates the usage of ‘By Class’ in Cypress:

describe('Cypress Locators in action', ()=>{
   beforeEach(()=>{
       cy.visit('http://automationpractice.com')
   })
  
  it('Interact with Elements using class selector',()=>{
        cy.get('.item')
        .eq(0) //0th element in the array of elements
        .click()
        cy.get('[class*="center_column"]') 
        .should('be.visible')
    })  
  it('Class selector short hand',()=>{
     //find class containing value .. using *=
     cy.get("a[class*='add_to_cart']")
     .eq(0)  // finding 0th element
     .click()
     .get("#layer_cart")
     .should('be.visible')
  
   //find class value that start with .. using ^=
    cy.get("[class^='layer_cart_product']")
    .should('be.visible')
    .get("a[title='Proceed to checkout']")
    .click()
 
   //find class that ends with... using $=
    cy.get('[class$="_delete"]')
    .click()
    .get('.alert')
    .should('be.visible')
 })
})

Code Walkthrough

Test 1:  Interact with Elements using class selector

The cy.get(‘.item’) method is used to locate the element with class=”item”, which returns the list of elements matching the query.

cy.get('.item')

Here is how the locator is identified using the Inspect tool in Chrome:

Once we get the list of the elements using the get() method, the eq(<index>) method in Cypress is used for locating the first element from the list. Once we locate the first element from the list, we click on the link that it points to (i.e. ‘Prices Drop’)

.eq(0) //0th element in the array of elements
.click()

Next, we find the class containing value using the cy. get(‘ [class*=”center_column”]’) method. Raise an assert on the visibility of the element using the .should() method.

Test 2:  Class selector short hand

We find the first product from the list of items and add that product to the cart. We then validate the product present in the cart, remove the product and verify if the cart is empty.

For this, we make use of regex with the class selector so that the code looks cleaner.

cy.get("a[class*='add_to_cart']").eq(0)

The above code locates the ‘Add to cart button’ on the home page and returns the first button using eq(0).

After clicking on the first button, we wait for the element with ID #layer_car to be visible to perform necessary operations on that WebElement.

Once the button is visible, we click on the same by locating it using its title (i.e. ‘Proceed to checkout‘).

cy.get("[class^='layer_cart_product']")
    .should('be.visible')
    .get("a[title='Proceed to checkout']")
    .click()

We add a Product to the cart by clicking on the ‘Proceed to checkout’ button.

Once the item is added to the cart, we delete the same and check if the shopping cart is empty. The delete button is located using class$=”_delete”.

cy.get('[class$="_delete"]')
.click()
.get('.alert')
.should('be.visible')

Identify HTML elements by ‘Link Text’ in Cypress

Links are ways for connecting web resources (or web pages) to another through anchor tags (i.e., <a>) and href attributes. For example, as shown below, My Orders is the link text displayed on the page.

<a href="http://automationpractice.com/index.php?controller=history">My orders</a>

We can locate links in cypress using cy.get(<tags>:contains(‘<text>’)). Shown below is the sample implementation that demonstrates the usage of Link Text in Cypress:

it('Interact with links or button using partial text',()=>{
   cy.get('a:contains("My orders")')  // similar to partial link text
   .click()
   cy.get('.page-heading')
   .should('have.text','Authentication')
})

Shown below is the execution screenshot, which indicates that the test execution is successful:

Also Read – How To Find Broken Links Using Cypress [With Examples]

How to use the first() method in Cypress

Consider a scenario where you want to get the list of elements in DOM having a common pattern. For example, it could be items in the list, and you might be interested in fetching only the first item from the list.

To realize such a requirement, Cypress provides two approaches to get the first element in Cypress:

• eq(<index>) – Fetch element at <index> specified in the parameter. The example for this is covered above in the by class section.
• first() – Fetch only the first element from the list. It is useful when we intend to validate only the first element in the list.

To demonstrate the usage of the first() method in Cypress, we get all the links under the “item” class and use the first() method to click the first from the list.

t.only('Find elements with first()',()=>{
   cy.get('.item a')
   .first()
   .click()
   .get('.navigation_page')
   .should('contain.text','Price')
})

Shown below is the approach through which the first element is located on the desired web page:

Here is the execution snapshot:

How to use the last() method in Cypress

Akin to the first() method, Cypress’s last() method is used to locate the last element in a list of elements. This is a handy utility when working with applications like the ToDo app, where tasks are added at the end of the list and verification has to be done w.r.t the tasks’ addition (or deletion).

For demonstrating the usage of the last() method, we use the React ToDo App where we would be adding items and accessing the last item from the list.

it.only('Working with last()', ()=>{
   let task='Task at the end'
   cy.visit('https://todomvc.com/examples/react/#/active')
   .get('.new-todo')
   .type(task)
   .type('{enter}')
   .get('.todo-list li')
   .last()
   .should('have.text',task)
})

Shown below is the execution snapshot:

Also Read: Scalable and Reliable Cross Browser Testing With Cypress Framework

Starting your journey with Cypress End-to-End Testing? Check out how you can test your Cypress test scripts on TestMu AI’s online cloud.