CODEWITHSUNDEEP
cypresselementxpath-2.0cypress-custom-commandscypress-origin
Fadi Alharthi
Fadi Alharthi

Reputation: 21

Error when using a custom command inside cy.origin()

When I use cy.xpath() commands inside cy.origin() it's not working.

it('t1', function() {
    cy.origin(('BaseUrl'), () => {
        cy.visit('/profile')
        cy.xpath("//input[@name='username']").type('user')
        cy.xpath("//input[@name='password']").type('pass')
        cy.xpath("//button[@type='button']").click()
    })
})

Error:

TypeError
cy.xpath is not a function

It works correctly outside of cy.origin()

Upvotes: 2

Views: 1673

Answers (3)

Hemsworth.H
Hemsworth.H

Reputation: 170

There is now Cypress.require() to allow use of custom commands and queries inside cy.origin().

Cypress.require enables utilizing dependencies within the cy.origin() callback function. It is used to require modules such as npm packages and other local files.

Note that cy.xpath() has been dropped as it's obsolete, as already suggested CSS selectors are a simpler and better option for querying in Cypress.

Upvotes: 3

Fody
Fody

Reputation: 32108

TLDR: Stick with standard Cypress commands inside cy.origin().

It's a current limitation of cy.orgin(), in fact any custom command must be treated specially and cy.xpath() is a custom command.

See Callback restrictions

It is also currently not possible to use require() or dynamic import() within the callback. Because of this limitation, it cannot use npm packages or other third-party libraries inside the callback, as there is no mechanism to reference them. This functionality will be provided in a future version of Cypress.

While third-party packages are strictly unavailable, it is possible to reuse your own code between cy.origin() callbacks. The workaround is to create a custom Cypress command within the secondary origin in a before block:

before(() => {
  cy.origin('somesite.com', () => {
    Cypress.Commands.add('clickLink', (label) => {
      cy.get('a').contains(label).click()
    })
  })
})

it('clicks the secondary origin link', () => {
  cy.origin('somesite.com', () => {
    cy.visit('/page')
    cy.clickLink('Click Me')
  })
})

But you can't use this pattern with cy.xpath() as you currently need to require('cypress-xpath') and that can't be done inside cy.origin().

A Workaround

  1. Navigate to /node_modules/cypress-xpath/src/index.js

  2. Copy the entire contents

  3. Add a new command file in support: /cypress/support/xpath.js

  4. Add this to the file, pasting in the copied code

    before(() => {
  cy.origin('somesite.com', () => {  // your cross-origin URL here

     // paste here code from /node_modules/cypress-xpath/src/index.js

  })
})

  5. Import xpath.js into /cypress/support/commands.js

Now cy.xpath() will work within cy.orgin() in any of your tests.

Upvotes: 3

SuchAnIgnorantThingToDo-UKR
SuchAnIgnorantThingToDo-UKR

Reputation: 4415

Check to see if non-xpath works.

cy.origin(('BaseUrl'), () => {
  cy.visit('/profile')
  cy.get("input[@name='username']").type('user')
  ...

If not, you've probably not set the experimentalSessionAndOrigin flag correctly.

Upvotes: 1

Related Questions