How to identify the element in cypress

We can identify the element in cypress using css selector and xpath. To identify the element with css selector we can use get() method and to identify with xpath we have install the plugin and we can use cy.xpath() method. We are clicking on and element on identifying the element in the below example:

HTML example

<div class=’fruit-list’>Banana</div>

Example code in Cypress:

Using CSS Selector

cy.get(‘.fruit-list’).Click(); //fruit-list is the class name for the html in web page

Using XPath:

1. First, you need to install the Cypress XPath plugin:

npm install -D cypress-xpath


1. Then include it in your cypress/support/e2e.js (or index.js):

    require('cypress-xpath');


1. Use cy.xpath():

cy.xpath(“//div[@class=’fruit-list’]).click();