Cypress - 在调用一堆请求后获取 DOM 元素

Question

我正在尝试编写一个测试，可以等待下面的一堆请求完成，然后我可以看到帐户信息。我已经尝试过

cy.wait

，但是效果并没有达到我的预期，因为有时请求返回很慢，所以Cypress无法检测到DOM元素并报告错误。

在 Chrome 上的“网络”选项卡中

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

所以，我使用了for循环和

cy.intercept

，就像下面的代码一样。但是，不断调用第一个postUrl会导致无限循环

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)

我唯一想要的是精确地等待一堆请求完成，比如等待所有请求完成，然后我可以进行以下测试。

Answer 1

cy.intercept(...).as('reqXX')

和

cy.wait('@reqXX')

中的别名之间的区别是

@

，它在您的代码中缺失。

循环本身应该没问题。

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

或更简单

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