Cypress - get DOM element after calling bunch of requests

user_16623011 0
Viewed 139

I am trying to write a test that can wait the bunch of requests as below complete, and then I can see the account info. I have tried the cy.wait, however, it not works ideally as I expected because sometimes the request back slowly, so Cypress can not detect the DOM element and report errors.

At Network tab on Chrome

postUrl - post request
postUrl - post request
postUrl - post request
postUrl - post request
getUrl - get request
getUrl - get request
getUrl - get request

So, I used for loop and cy.intercept, like following code. But, it would cause infinite loop that calling the first postUrl continually

const bunch = []
const accountName = [xx, yy, zz, aa]
for(let i = 0; i< accountName.length; i++) {
  cy.intercept({
     url
     method

  }).as(`req${accountName[i]}`)
  bunch.push(`req${accountName[i]}`)
}

cy.wait(bunch)

Only thing that I would like is that precisely wait the bunch of requests complete, like wait for all request finishs, then I can do following test.

cypress for-loop testing xmlhttprequest
1 Answers

Th difference between the alias name in cy.intercept(...).as('reqXX') and cy.wait('@reqXX') is @, which is missing in your code.

The loop itself should be ok.

const bunchOfAliases = []
const accountName = [xx, yy, zz, aa]
for(let i = 0; i< accountName.length; i++) {
  const alias = `req${accountName[i]}`
  cy.intercept({
     url
     method
  }).as(alias)
  bunchOfAliases.push(alias)
}

const waitAliases = bunchOfAliases.map(alias => `@{alias}`)  // add @

cy.wait(...waitAliases)  // destructure the array

or simpler

const accountNames = [xx, yy, zz, aa]
accountNames.forEach(accountName => {
  cy.intercept({
     url
     method
  }).as(`req${accountName}`)
}

const waitAliases = accountNames.map(accountName => `@req${accountName}`)  // add @

cy.wait(...waitAliases)  // destructure the array
user_166166930
Related