'cypress-promise' library is not working as expected-CodePudding

I have tests in which i used the cypress-promise library. I have included promisify in that to wait until my commands are executed and give response. in my file i have 3 it's block when i ran individually it executes properly but when i run all at once first it and second it's api's aborted when url changes or url updated and last one's test are executed properly.

 it("visit particular employee", async ()=>{
  cy.visit("/")
  const id = 12
  const updatedEmployeeData = await cy.uploadEmployeeData().promisify();
  cy.visit(`/all-employess/${updatedEmployeeData[id].employeeCode}`);
  cy.get('.input').type(updatedEmployeeData[id].name);
  
 })
 
 it("visit particular employee  2", async ()=>{
  cy.visit("/")
  const id = 13
  const updatedEmployeeData = await cy.uploadEmployeeData().promisify();
  cy.visit(`/all-employess/${updatedEmployeeData[id].employeeCode}`);
  cy.get('.input').type(updatedEmployeeData[id].name)
 })

 it("visit particular employee", async ()=>{
  cy.visit("/")
  const id = 14
  const updatedEmployeeData = await cy.uploadEmployeeData().promisify();
  cy.visit(`/all-employess/${updatedEmployeeData[id].employeeCode}`);
  cy.get('.input').type(updatedEmployeeData[id].name)
 })


 in first it and second it after cy.visit(`/all-employess/${updatedEmployeeData[id].employeeCode}`); it stops executing and in third it properly executes.

I don't understand with this approach;

CodePudding user response：

As the library documented on its page (https://www.npmjs.com/package/cypress-promise): Did you import and polyfill the cy commands?

An alternative it to use the 'register' polyfill to add promisify method to all Cypress chains. This requires import 'cypress-promise/register' in your cypress/support/index file

If not try to use the library in the way it is documented there: await promisify(<your cypress cmd>):

import promisify from 'cypress-promise'
 
it('should run tests with async/await', async () => {
  const foo = await promisify(cy.wrap('foo'))
  expect(foo).to.equal('foo')
})

If you did so, I can't help further but it is currently not really possible to read that fact out of your question.

CodePudding user response：

It looks like you could take an alternate approach without cypress-promisify

beforeEach(() => {
  cy.visit("/")
  cy.uploadEmployeeData().as('updatedEmployeeData')
})

it("visit particular employee", () => {
  cy.get('@updatedEmployeeData').then(updatedEmployeeData => {
    const id = 12
    cy.visit(`/all-employess/${updatedEmployeeData[id].employeeCode}`);
    cy.get('.input').type(updatedEmployeeData[id].name);
  })
})
 
it("visit particular employee  2", () => {
  cy.get('@updatedEmployeeData').then(updatedEmployeeData => {
    const id = 13
    cy.visit(`/all-employess/${updatedEmployeeData[id].employeeCode}`);
    cy.get('.input').type(updatedEmployeeData[id].name)
  })
})

it("visit particular employee", () => {
  cy.get('@updatedEmployeeData').then(updatedEmployeeData => {
    const id = 14
    cy.visit(`/all-employess/${updatedEmployeeData[id].employeeCode}`);
    cy.get('.input').type(updatedEmployeeData[id].name)
  })
})

Alternative to avoid nested then.
The trade-off is you must use function() syntax for every it()

beforeEach(() => {   // can be before() instead of beforeEach() if data does not change
  cy.visit("/")
  cy.uploadEmployeeData().as('updatedEmployeeData')
  cy.uploadManagerData().as('updatedManagerData')
})

it("visit particular employee", function() {  // use function() form 
                                              // so that "this" is defined correctly
  const id = 12
  cy.visit(`/all-employess/${this.updatedEmployeeData[id].employeeCode}`);
  cy.get('.input').type(this.updatedEmployeeData[id].name);

  // also use this.updatedManagerData
})