cypress-promise' library is not working as expected

Question

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;

Answer 1

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.

Answer 2

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
})

Answer 3

I found that this doesn't work in Github actions yet, but works locally.