Cypress技术问题：如何等待所有API请求完成后再执行操作

你的代码问题在于cy.wait("@allapirequests")仅会等待第一个匹配通配符的请求完成，但页面加载过程中可能有多个API请求在并行/串行执行，后续请求不会被等待，导致点击操作时仍有请求未完成。

修正方案 #

1. 缩小拦截范围（推荐）

避免用/**全局匹配所有请求（会包含静态资源、第三方脚本等无关请求），只拦截业务相关的API路径，比如/api/**：

// 仅拦截业务API请求
cy.intercept('/api/**').as('apiRequests')

// 触发页面加载（或其他会引发API请求的操作）
cy.visit('/your-target-page')

// 等待所有拦截到的API请求完成
cy.get('@apiRequests.all').then(requests => {
  // 根据请求数量生成等待别名数组，逐个等待完成
  const waitList = requests.map(() => '@apiRequests')
  cy.wait(waitList)
})

// 现在执行点击操作，此时所有API请求已完成
cy.get('somelocator').click()

2. 断言所有请求已响应

通过断言确保每个拦截到的请求都已收到响应：

cy.intercept('/api/**').as('apiRequests')

cy.visit('/your-target-page')

// 断言所有拦截的请求都有响应（即已完成）
cy.get('@apiRequests.all').should(requests => {
  requests.forEach(req => {
    expect(req.response).to.exist
    expect(req.response.statusCode).to.be.oneOf([200, 201, 204]) // 可选：验证响应状态
  })
})

cy.get('somelocator').click()

3. 已知请求数量时直接等待对应次数

如果明确知道页面会触发N个API请求，可直接等待N次：

cy.intercept('/api/**').as('api')

cy.visit('/your-target-page')

// 等待3次API请求完成（根据实际数量调整）
cy.wait(['@api', '@api', '@api'])

cy.get('somelocator').click()

注意事项 #

• 不要依赖固定等待时长（如cy.wait(1000)），这种方式不稳定，会因环境差异导致测试失败。
• 尽量精准匹配API路径，避免等待无关请求，提升测试效率和可靠性。

内容的提问来源于stack exchange，提问作者Edward K