Cypress not able to recognize Xpath functions

Question

Running Cypress and came across using xpath in Cypress and I am trying the following code in .js file.

/// <reference types = "cypress" />
describe ("Test Contact us form",()=>{
    it("Should be able to submit the form", ()=>{
        cy.visit('some url');
        cy.xpath('//a[contains (@href, "contact")]').click();
     });
})

This is how my xpath node_modules directory path looks like

\Projects\node_modules\xpath

Here is my index.js

// Alternatively you can use CommonJS syntax:
// require('./commands')
require('xpath')

Here is my package.json

{
  "name": "projects",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "Thisistest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^5.2.0",
    "xpath": "0.0.29"
  }
}

Here is a snippet of the package-lock.json

"xpath": {
      "version": "0.0.29",
      "resolved": "https://registry.npmjs.org/xpath/-/xpath-0.0.29.tgz",
      "integrity": "some key",
      "dev": true
    },

After running the test, I am getting the following compilation error.
Its a TypeError.

cy.xpath is not a function

Seems to be a small config thing. However, followed the exact steps as given on https://github.com/cypress-io/cypress-xpath#readme

Answer 1

I removed and re-setup cypress and xpath again using npm through git bash and it worked.

Previously, I had setup using node.js command prompt. After installing xpath using same npm command, xpath was successfully downloaded, however, the directory name inside node_modules was just xpath instead of cypress-xpath. Now, even though I had require('xpath') under the index.json file, it was still unable to detect xpath.

Answer 2

I had faced the same issue. then I changed the reference types from cypress to cypress-xpath as follows

///reference types = 'cypress-xpath'

and the problem is resolved. This might be helpful to you.

Answer 3

[Updated for Cypress Ver- 10.9.0 in year 2022]

Use link below to install: cypress-xpath plugin

 https://www.npmjs.com/package/cypress-xpath

Step 1: Install XPath Plugin using below command

npm install cypress-xpath

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

require('cypress-xpath');

Step 3 Add your xpath in cy.xpath method like below:

 cy.xpath("//input[@name='userName']").should("be.visible");

Please make sure to check that you're getting code intellisense like this (refer image attached), once successful installation of the cypress-xpath plugin.

Answer 4

I downloaded cypress-xpath and updated the config file with requires('cypress-xpath) and then tried and it worked

Answer 5

In my case when i added the line require('@cypress/xpath') in the e2e.js file under the support folder , it worked