How to wait for cy.request() to complete its then() block?

[unikitty37]

If I have the following code:

let item

const createItem = () => {
  item = { name: 'thing', colour: 'red' }
  cy.request('POST', '/api/create', item)
    .then((response) => {
      item.id = response.body.id
      console.log(`ID from API: ${item.id}`)
    })
}

describe('Item', () => {
  it('creates an item', () => {
    createItem()
    console.log(`ID is now: ${item.id}`)

    cy.visit(`/item/${item.id}`)

    // tests here
  }
}

then I see this in the console:

ID is now: undefined
ID from API: 42

rather than

ID from API: 42
ID is now: undefined

and the test tries to navigate to /items/undefined rather than /items/42.

Obviously, this is because cy.request() is async and createItem() returns before it has executed, but how can I wait for the .then() to have completed?

I tried aliasing: cy.request(…).as('apiCall') and using cy.wait('apiCall') but it only allows routes to be aliased.

The only way I've found to beat this so far is to call createItem() from a beforeEach() block, but that means having to have loads of different context() blocks in the tests. Is there an easier way?

[bahmutov]

Please read our documentation that explains how every test command is queued and is asynchronous https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Commands-Are-Asynchronous

In your example:

createItem()
console.log(`ID is now: ${item.id}`)

cy.visit(`/item/${item.id}`)

the console.log immediately executes, while createItem and cy.visit are enqueued to be executed. If you want the console.log execute to run AFTER the Cypress commands inside createItem finish, then you can do one of these things

createItem()
cy.then(() => {
  console.log(`ID is now: ${item.id}`)
})

cy.visit(`/item/${item.id}`)

or return Cypress object from createItem which allows you to chain more things

const createItem = () => {
  item = { name: 'thing', colour: 'red' }
  return cy.request('POST', '/api/create', item)
    .then((response) => {
      item.id = response.body.id
      console.log(`ID from API: ${item.id}`)
    })
}

createItem()
  .then(() => {
    console.log(`ID is now: ${item.id}`)
  })

cy.visit(`/item/${item.id}`)

[jgonzalezalbisu]

I've got a very similar question which I've posted here, and I'm not able to fix it. Would you mind taking a look at it and give me any suggestion?

https://stackoverflow.com/questions/69138981/how-to-wait-for-cypress-then-command-to-finish-before-returning-a-value

Thank you!

[rrauenza]

or return Cypress object from createItem which allows you to chain more things

const createItem = () => {
  item = { name: 'thing', colour: 'red' }
  return cy.request('POST', '/api/create', item)
    .then((response) => {
      item.id = response.body.id
      console.log(`ID from API: ${item.id}`)
    })
}

createItem()
  .then(() => {
    console.log(`ID is now: ${item.id}`)
  })

cy.visit(`/item/${item.id}`)

Wouldn't this cy.visit() get scheduled asynchronously before item.id is defined? The console.log is dependent on the chain, but the visit isn't....

[unikitty37]

Thanks — I thought I had tried that, but obviously not! I suspect I was trying to cy.wrap(createItem()) rather than using .then().

[jgonzalezalbisu]

I've got a very similar question which I've posted here, and I'm not able to fix it. Would you mind taking a look at it and give me any suggestion?

https://stackoverflow.com/questions/69138981/how-to-wait-for-cypress-then-command-to-finish-before-returning-a-value

Thank you!