Find the HTML Element by XPath in Cypress

Cypress doesn’t support XPath out of the box, however, if you are already familiar with XPath then you can use the third-party plugin cypress-xpath to get the HTML element by XPath by using the following steps:

Step 1: Install the cypress-xpath plugin using the below command:
npm install -D cypress-xpath

Step 2: Set Up XPath plugin
Navigate to cypress/support/index.js and add the below line
require('cypress-xpath')

Step 3: Use cy.xpath() command in the script as seen in the example below

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

To get specific elements using XPath you can also chain the cy.xpath() to another command as seen below

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