How to find Web Elements using Cypress?

Finding web elements in your website is crucial, especially when testing it for compatibility. But how can you find elements in your web app if you don’t know the exact location?

Well, locators can help you with that! If you have earlier worked with Selenium, you’ll be well-versed with the concept of locators. Locators are known as the backbone of all test automation frameworks for web-based applications. They help the automation tool identify the GUI elements, such as buttons, check boxes, text boxes, etc.

What is Cypress?

Cypress is a new automation testing tool that is gaining attention at a fast pace. It is a JavaScript-based framework best suited for Cypress E2E testing of modern web applications. The best part about Cypress automation testing is that it is integrated with locators.

Cypress locator helps you find and return web page elements based on your query. For example, during automation testing, if you want to perform any action on the web element, you need to find that element and then complete the action on it. Cypress locator helps you locate that element on the web page.

Besides, Cypress supports various locators like tags, Class, ID, attributes, text, etc. It also helps XPath Selectors, which require third-party plugin cypress-xpath installation.

Getting Elements with Cypress

With multiple locators of Cypress, you can easily find HTML elements in your web app. The cy.get() method is used to fetch the elements.

Using ID selector to get elements

ID is an attribute of an HTML tag used to find HTML elements. With the cy.get() command, you can pass the id with a prefix (#) to get the element.

For example, if you need to find the HTML element in the below code:

<inpur id=”8943_email_login” class=”8934_email_ajax”>

You can use the following command:

cy.get(‘#user_email_login’)

The # is used as a prefix to id inside cy.get(). Once you get the elements with this, you can perform operations on the elements like click, type, etc.

Using Class to get HTML elements

Class is another similar attribute of HTML elements, which can be used as a locator or selector to find the elements. Just like the ID attribute, Class is also passed directly with the . (dot) prefix using the Cypress command.

For instance, if you need to find an HTML element in the below code:

<input id=“user_email_login” class=“user_email_ajax”>

You can use the below command with Class attribute in Cypress:

cy.get(‘.user_email_ajax’)

This command uses .(dot) as a prefix to class inside cy.get().

Using Tag Name to get HTML elements

By passing the tag name with the Cypress command, you can find the HTML elements quickly. To do so, consider the below example:

<input id=“user_email_login” class=“user_email_ajax”>

In this example, use the below command to get the HTML elements with tag name:

cy.get(‘input’)

Using Attributes to get HTML element

Attributes is another excellent way to get elements in the web app. As Cypress supports all types of CSS selectors, you can pass the CSS selectors inside the cy.get() command to get an element.

For example, consider the below code snippet for an HTML element with id name user_email_login and class name user_email_ajax.

<input id=”user_email_login” class=”user_email_ajax” type=”text” name=”user_login”>

The above code has a name attribute, which you can use to get the element. Now, to get an element using an attribute in Cypress, pass the CSS selector to cy.get() as seen below:

cy.get(‘input[name=”user_login”]’)

Besides, you can also use the id and class attribute in the above example to get the elements. Another advantage of using Attributes in Cypress is that you don’t need to use a prefix like # or .(dot), you can directly use the class or id name.

Working with Multiple Elements in Cypress

The cy.get() function can be used to get both single and multiple elements, but if there are multiple matches for the same name, tag, Class, or attribute, it returns all the possible matches. In such a case, if you need to work with specific elements at a specific index, you need to use the first(), last(), or eq() functions along with the cy.get() command.

Getting the First Element

To get the first element in Cypress, use the below command:

cy.get(‘.msg-body’).first()

The above command might provide more than one result, but using the first(), you will only get the first element in your HTML code.

Getting the Last Element

To get the last element in Cypress, use the below command:

cy.get(‘.msg-body’).last()

Running the above command might return more than one element, but using the last() will provide the last component within the set of fetched elements.

Getting Specific Element by Index in Cypress

To get a specific element in your script, you can use the eq() function along with cy.get(‘.msg-body’). For example, the command cy.get(‘.msg-body’).eq(2) will provide you with the specific element in your script.

Getting DOM Element that Contains Text in Cypress

In Cypress, you can use the contains() function that can be used with cy command or can be chained with cy.get() command to get the DOM elements, as seen below:

cy.contains(‘Sign In’);

Running the above command will search for Text ‘Sign In’ inside the web page to return the element. But, it won’t verify the type of element on the web.

Using Regular Expressions inside the cy.contains()

With Cypress, you can use regular expressions inside the contains() function. For example, the below code allows you to search for the element that contains text starting with c and has more than two characters, including numbers, alphabets, _, etc.

cy.contains(/^c\w+/)

Using XPath in Cypress to get HTML Elements

Although Cypress doesn’t support XPath, if you have good knowledge about it, then you can use the third-party plugin cypress-xpath to get the HTML element by XPath using the below steps:

• First of all, install the cypress-xpath plugin with the below command:

npm install –D cypress–xpath

• Set up the XPath plugin on your system.

require(‘cypress-xpath’)

• Now, use the cy.xpath() command in the script as seen in the below example:

it(‘finds list items’, () => {
cy.xpath(‘//ul[@class=”todo-list”]//li’)
.should(‘have.length’, 3)
})

• To get the desired elements with XPath, you can chain the cy.xpath() to another command, shown below:

it(‘finds list items’, () => {
cy.xpath(‘//ul[@class=”todo-list”]’)
.xpath(‘./li’)
.should(‘have.length’, 3)
}

Final Words

Cypress has turned out to be an amazing tool for automation testing and gaining attention from the software industry. Its effective approach to web testing makes it an ideal option for most QAs and companies. Although the tool is already equipped with a set of rich features, its true potential can be explored by running the Cypress tests on a scalable and reliable cloud-based cross browser testing platform like LambdaTest. LambdaTest provides an integrated Cypress CLI that simplifies the task of executing your Cypress tests in parallel across a wide range of online browsers and OS combinations.

Author Bio: Vixit Raj is Product Growth and Marketing Specialist in LambdaTest : The Cross Browser Web App Testing Platform. An E&C engineering background & Digital Marketing domain experience of 5+ years has aroused his interest towards learning about latest technology advancements, product marketing, coding and testing.