如何让Cypress等待依赖于其他响应的请求响应？

核心思路 #

要验证基于请求A结果发起的动态请求B，关键是提前拦截所有符合请求B特征的接口，而非等到请求A响应后再配置拦截，这样才能完整捕获所有后续发起的请求B并验证状态。

实现代码 #

// 提前拦截所有请求B（匹配以.txt结尾的GET请求），设置统一别名
cy.intercept('GET', '/*.txt').as('itemRequest')

// 拦截请求A并设置别名
cy.intercept('GET', '/list.json').as('list')

// 触发页面加载，让应用自动发起请求A及后续的请求B
cy.visit('/')

// 等待请求A完成，提取返回的条目列表
cy.wait('@list').then((listInterception) => {
  // 假设/list.json返回结构为包含条目的数组，例如['one', 'two']，转换为预期请求路径
  const expectedRequestUrls = listInterception.response.body.map(item => `/${item}.txt`)
  
  // 获取所有拦截到的请求B记录
  cy.get('@itemRequest.all').then((itemInterceptions) => {
    // 断言请求数量与预期一致，避免漏发或多发起请求
    expect(itemInterceptions.length).to.eq(expectedRequestUrls.length)
    
    // 逐个验证每个请求B的状态码和路径匹配
    itemInterceptions.forEach(interception => {
      expect(expectedRequestUrls).to.include(interception.request.url)
      expect(interception.response.statusCode).to.eq(200)
    })
  })
})

原方案失败原因 #

• 方案1：在请求A的回调中才配置请求B的拦截/别名，此时应用可能已经发起了请求B，Cypress无法回溯捕获已完成的请求，导致cy.wait超时。
• 方案2：提前执行cy.wait但未配置对应拦截别名，当请求A响应后再添加别名时，请求B可能已完成，Cypress会错误判定等待成功，无法检测到不存在的接口（如/two.txt）。

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