Using XPath in Cypress

One of the essential aspect of the quality assurance process is an automated testing. Automated testing helps to ensure the reliability and stability of the web applications. There are multiple testing tools/frameworks are available, among them Cypress has gained the significant popularity due to its simplicity and effectiveness.

In automated testing one things is very important, which is element locators. When it comes to locating elements during automated testing, two powerful methods come to the rescue: XPath and CSS selectors. In this article, we will explore the application of XPath in Cypress and uncover the potential for efficient element selection, enabling smoother and more effective quality assurance processes.

What is XPath?

Let’s understand a XPath little more, XPath is a path expression language that allows us to navigate XML and HTML documents. It provides a flexible syntax for locating elements based on their attributes, positions, and relationships within the document. XPath expressions consist of a combination of nodes, axes, and predicates, enabling precise element targeting. The syntax of the XPath is //tag_name[@Attribute_name = “Value of attribute”] .

Types of XPath

Absolute XPath: It specifies the location of an element relative to another element within the HTML or XML document. It begins with a single forward slash (“/”) to indicate the root node and continues with a sequence of element names separated by forward slashes (“/”) to denote the hierarchy of elements leading to the target element. Each element in the path is specified by its tag name.

Eg. html/body/div/div[3]/form/input[1]

Relative XPath: It specifies the location of an element relative to another element within the HTML or XML document. It begins with a double forward slash (“//”) or a single dot (“.”) to indicate the current context or the starting point for the relative path.

Eg. //input[@id='lst-ib']

Find more information about the XPath here.

XPath in Cypress

Currently cypress does not supports the XPath right out of the box. We can use the plugin called cypress-xpath. To install this plugin, just go your cypress project directory and enter the following command:

npm install -D @cypress/xpath

After the installation we need to add this to require('@cypress/xpath') our e2e.js file so that we can use the xpath function in all our pages. In cypress we can not use cy.get() to select the web elements using XPath, for that we need to use cy.xpath() . Here are some examples of locating elements with XPath:

cy.xpath('//input') // Locating all input elements
cy.xpath('//*[@class="my-class"]') // Locating elements by class
cy.xpath('//*[@id="my-id"]') // Locating elements by ID

In the above example the elements will be located using input on the page as shown in first example. We can also further refine the selection by specifying the class or ID of the element as shown in the subsequent examples. For more complex scenarios, XPath offers advanced techniques to overcome challenges like dynamic element IDs or classes.

cy.xpath('//*[starts-with(@id, "dynamic-id-")]')

The above example demonstrates how to locate elements with dynamic IDs by using the starts-with() function.

We can write the XPath locators ourselves or we can generate them. It’s so much easier to generate the XPath by using the tool called selectorsHub. It is a free browser extension that we can install and use. It can help to generate the XPath or we can write and verify that written XPath using the selectorsHub. To learn more about this tool check the following link. Below is the very simple example of selecting the elements using XPath in cypress.

Output

Additional References:

@cypress/xpath plugin documentation: Here
XPath Introduction: Here
Automation Practice Site: Here