Cypress cy.wait() only waits for the first networkcall, need to wait for all calls

Question

I would like to wait until the webpage is loaded with items. Each is getting retreived with a GET.

And I would like to wait on all these items until the page is loaded fully. I already made a interceptions for these. Named: 4ItemsInEditorStub

I have tried cy.wait('@4ItemsInEditorStub.all') But this gives an timeout error at the end.

How can I let Cypress wait untill all "4ItemsInEditorStub" interceptions are completed?

Answer 1

Trying to wait on alias.all won't work -- Cypress has no idea what .all means in this context, or what value it should have. Even after your 4 expected calls are completed, there could be a fifth call after that (Cypress doesn't know). alias.all should only be used with cy.get(), to retrieve all yielded calls by that alias.

Instead, if you know that it will always be four calls, you can just wait four times.

cy.wait('4ItemsInEditorStub')
  .wait('4ItemsInEditorStub')
  .wait('4ItemsInEditorStub')
  .wait('4ItemsInEditorStub');

Answer 2

You can either hard code a long enough wait (ie. cy.wait(3_000)) to cover the triggered request time and then use cy.get('@4ItemsInEditorStub.all')

cy.wait(10_000)
cy.get('@4ItemsInEditorStub.all')
// do some checks with the calls

or you can use unique intercepts and aliases to wait on all 4

cy.intercept('/your-call').as('4ItemsInEditorStub1')
cy.intercept('/your-call').as('4ItemsInEditorStub2')
cy.intercept('/your-call').as('4ItemsInEditorStub3')
cy.intercept('/your-call').as('4ItemsInEditorStub4')

cy.visit('')

cy.wait([
  '@4ItemsInEditorStub1',
  '@4ItemsInEditorStub2',
  '@4ItemsInEditorStub3',
  '@4ItemsInEditorStub4',
])

Answer 3

There is a package cypress-network-idle that makes the job simple

cy.waitForNetworkIdlePrepare({
  method: 'GET',
  pattern: '**/api/item/*',
  alias: 'calls',
})
cy.visit('/')
// now wait for the "@calls" to finish 
cy.waitForNetworkIdle('@calls', 2000)  // no further requests after 2 seconds 

Installation

# install using NPM
npm i -D cypress-network-idle
# install using Yarn
yarn add -D cypress-network-idle

In cypress/support/e2e.js

import 'cypress-network-idle'

Answer 4

Network idle testing looks good, but you might find it difficult to set the right time period, which may change each time you run (depending on network speed).

Take a look at my answer here Test that an API call does NOT happen in Cypress.

Using a custom command you can wait for a maximum number of calls without failing if there are actually less calls.

For example, if you have 7 or 8 calls, setting the maximum to 10 ensures you wait for all of them

Cypress.Commands.add('maybeWaitAlias', (selector, options) => {
  const waitFn = Cypress.Commands._commands.wait.fn
  return waitFn(cy.currentSubject(), selector, options)
    .then((pass) => pass, (fail) => fail)
})

cy.intercept(...).as('allNetworkCalls')

cy.visit('/');

// up to 10 calls
Cypress._.times(10, () => {
  cy.maybeWaitAlias('@allNetworkCalls', {timeout:1000}) // only need short timeout
})

// get array of all the calls
cy.get('@allNetworkCalls.all')
  .then(calls => {
    console.log(calls)
  })