CODEWITHSUNDEEP
automationcypress
Spartacus
Spartacus

Reputation: 408

Cypress click element by ID / XPATH / Name?

I want to click on an element by XPATH / ID and not the default cypress locator, is it possible?

In selenium I can use find element by XPATH for example:

d.findElement(By.id("category")).click();

In Cypress it's:

cy.get('#hdtb-msb-vis > :nth-child(3) > .category').click()

Can I click by ID? (It looks better in selenium!)

d.findElement(By.id("category")).click();

VS

cy.get('#hdtb-msb-vis > :nth-child(3) > .category').click()

Upvotes: 24

Views: 103629

Answers (10)

slowlert
slowlert

Reputation: 21

I use Cypress v12+ and i just put

import "cypress-xpath"

inside of my e2e.ts file in the cypress/support directory. The other approaches did not work for me somehow. May be this is a thing with Cypress-Versions...

I think you can also import it in the testfile where you need xpath but inside the support-directory it has a global effect on every test-file.

Upvotes: 0

Dani.Zalopany
Dani.Zalopany

Reputation: 269

Update for Cypress v 11

The answers are out of date, from version 11 Cypress core repo includes the xpath commands.

The install and usage are

@cypress/xpath

Adds XPath command to Cypress.io test runner

Install with npm

npm install -D @cypress/xpath

Install with Yarn

yarn add @cypress/xpath --dev

Then include in your project's support file

require('@cypress/xpath');

Use

After installation your cy object will have xpath command.

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

Upvotes: 23

Masoma Begum
Masoma Begum

Reputation: 1

[Should install xpath package and then add in Support/e2e.js. After that it will show suggestion to use xpath in .js file ] cy.xpath('//body/div[@id="app"]/div[2]/div[2]/div[1]/div[2]/div[2]/form[1]/div[1]/div[2]/div[5]/div[2]/div[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[2]/div[1]/div[1]/div[1]').contains('02').click()

enter image description here

Upvotes: 0

Tarun Goswami
Tarun Goswami

Reputation: 71

For ID use # and . for classes

cy.get('#category').click()

There is no direct way of using ID, Name, Class, tag name. Use css selector or various inbuild cypress commands to find the element.

For Xpath, There is no default support for XPath in Cypress. Follow below steps to install plugin and use it.

Step 1: Install XPath Plugin using below command

npm install cypress-xpath

or

yarn add cypress-xpath --dev

Step 2 Add this line to index.js in support folder

require('cypress-xpath')

Step 3 Add your xpath in xpath command like this

 cy.xpath("//input[@id='edit-name']").type('Naruto')

For Detailed steps with example refer this

Upvotes: 0

Shirsh
Shirsh

Reputation: 73

execute npm install -D cypress-xpath

If you using typescript. Add one file inside cypress/support/index.d.ts

Add import './commands'; import '../../node_modules/cypress-xpath';

"types": ["cypress", "cypress-xpath"] in tsconfig.json

also add import '../../node_modules/cypress-xpath in index.js file

Upvotes: 0

Raju Kumar
Raju Kumar

Reputation: 21

There are 2 things to be done if trying to use xpath in cypress:-

  1. In the file 'index.js' which sits under the folder 'YourProject'->'cypress'->'support', add the entry "require('cypress-xpath')"
  2. In the file 'Dockerfile.cypress' which sits under the folder 'YourProject'->'configuration'->'docker', add the entry "RUN npm install cypress-xpath"

That's all you need to use all the xpath functions to uniquely identify all elements in your cypress tests. I personally prefer using xpath since this gives me more control on the UI elements. Hope this will make life more easier in using cypress.

Upvotes: 2

KMO
KMO

Reputation: 77

The first question contains two different selectors, the first (selenium) look for an id category and the second for a class category.

In fact :

d.findElement(By.id("category")).click();
==
cy.get('#category').click()

So yes you could select an element by it's ID !

If (and i don't think) you want to have others possibility for selecting your elments look for jquery selector (jquery is exposed in cypress)

Upvotes: 1

soccerway
soccerway

Reputation: 11951

I think, it is possible by adding a plug-in as suggested in Cypress website, please refer the following link https://docs.cypress.io/plugins/#content. If you refer the custom command section you could see cypress-xpath which takes you to following github link https://github.com/cypress-io/cypress-xpath

npm install -D cypress-xpath

Then include in your project's cypress/support/index.js

require('cypress-xpath')

Sample usage given below:

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

Please try after installing the plug-in and updating the support/index.js file.

Upvotes: 14

GonzaSSH
GonzaSSH

Reputation: 502

In Cypress, it works like this:

cy.get('button[id="category"]').click()

Notice that I just used button as an example here, you should replace that with the label of your element: div, select, textarea, etc...

Upvotes: 29

Mr. J.
Mr. J.

Reputation: 3721

#hdtb-msb-vis is an ID-selector and .category is a class-selector. But you should be able to select purely by the class-selector

cy.get('.category')
  .click()

But if that class is not unique you can click it via the ID and then the class:

cy.get('#hdtb-msb-vis')
  .find('.category')
  .click()

Upvotes: 0

Related Questions