Wrap promises

You can use cy.wrap command to wait for promises to resolve before continuing Cypress test.

📺 Watch this recipe explained in Use cy.wrap Command To Wrap Promises In Your Cypress Tests.

A single promise

cy.wrap(Promise.resolve(42)).should('equal', 42)

Multiple promises

Use Promise.all to create a single promise to wait for multiple promises.

Let's compute SHA of the given text using an asynchronous function from the Compute SHA256 recipe.

async function digestMessage(message) {
  // encode as (utf-8) Uint8Array
  const msgUint8 = new TextEncoder().encode(message)
  const hashBuffer = await crypto.subtle.digest(
    'SHA-256',
    msgUint8,
  ) // hash the message
  const hashArray = Array.from(new Uint8Array(hashBuffer))
  const hashHex = hashArray
    .map((b) => b.toString(16).padStart(2, '0'))
    .join('') // convert bytes to hex string
  return hashHex
}

We can compute sha of multiple strings in parallel.

cy.wrap(
  Promise.all([
    digestMessage('foo'),
    digestMessage('bar'),
    digestMessage('baz'),
  ]),
)
  // resolves with an array of hashes
  .should('have.length', 3)
  // use cy.spread to spread the array elements into arguments
  .spread((sha1, sha2, sha3) => {
    expect(sha1, 'sha1 !== sha2').to.not.equal(sha2)
    expect(sha1, 'sha1 !== sha3').to.not.equal(sha3)
    expect(sha2, 'sha2 !== sha3').to.not.equal(sha3)
  })

The same wait can be achieved by mapping data into an array of promises using cy.map from cypress-map plugin and then applying Promise.all function. Note: you need to bind Promise.all method to the Promise itself to work properly, typical JavaScript context madness.

cy.wrap(['foo', 'bar', 'baz'])
  .map(digestMessage)
  .then(Promise.all.bind(Promise))
  .then((shas) => {
    shas.forEach((sha, k) => {
      expect(sha, `sha ${k + 1}`).to.be.a('string')
    })
  })

👍 Highly recommended: read the blog post The Zen Of Cypress Data Setup.