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