如何在Cypress中等待同一URL的多个XHR请求？

嘿，这个场景我太熟悉了！在Cypress里要确保同一URL发起了多个XHR请求并等待它们完成，其实分两种情况处理——看你用的是新版的cy.intercept()还是旧版的cy.route()，我给你详细拆解：

从Cypress 6.0版本开始，官方更推荐用cy.intercept()替代cy.route()，它的功能更灵活，处理多请求也更顺手：

• 第一步：拦截目标路由并标记别名
  先定义拦截规则，并用as()给这个路由起一个别名，Cypress会自动记录所有匹配该规则的请求：

  cy.intercept('GET', '/api/your-target-url').as('multiRequests');
  

• 第二步：触发所有需要的请求
  执行你的页面操作（比如连续点击按钮、批量提交表单），确保所有目标XHR请求都被发起。

• 第三步：等待指定数量的请求完成
  直接用cy.wait()结合别名，重复调用的次数就是你要等待的请求数。比如要等3次请求：

  // 直接链式等待3次
  cy.wait('@multiRequests').wait('@multiRequests').wait('@multiRequests');
  
  // 如果次数多，用循环更简洁
  Cypress._.times(3, () => {
    cy.wait('@multiRequests');
  });
  

  要是还需要验证每个请求的细节（比如参数、响应状态），可以在每次wait后链式调用then()获取请求对象：

  cy.wait('@multiRequests').then((interception) => {
    expect(interception.request.body).to.deep.equal({ action: 'submit' });
    expect(interception.response.statusCode).to.equal(200);
  });
  

  另外，你还可以直接获取所有拦截到的请求数组，断言总数是否符合预期：

  cy.wait('@multiRequests').then(() => {
    cy.get('@multiRequests.all').then((allRequests) => {
      // 确保至少有2个请求
      expect(allRequests.length).to.be.greaterThan(1);
    });
  });
  

如果你还在维护旧版Cypress项目，用cy.route()的话，可以通过手动存储请求的方式实现：

• 第一步：定义路由并收集请求
  声明路由后，用回调函数把每个发起的请求存入数组：

  let requestList = [];
  cy.route('POST', '/api/your-target-url').as('oldRoute').then((route) => {
    route.xhr.on('request', (xhr) => {
      requestList.push(xhr);
    });
  });
  

• 第二步：触发请求
  执行页面操作，让多个目标请求发起。

• 第三步：等待并断言请求数量
  先等待至少一次请求完成，再断言数组长度满足要求（如果请求有延迟，可加短时间等待确保所有请求都被捕获）：

  cy.wait('@oldRoute').then(() => {
    // 可选：如果请求发起有延迟，加个短等待
    cy.wait(500);
    // 验证请求数量大于1
    expect(requestList.length).to.be.greaterThan(1);
  });
  

如果不确定具体请求数量，只想确保至少有N个，可以用Promise来等待数组长度达标：

cy.wrap(null).then(() => {
  return new Cypress.Promise((resolve) => {
    const checkInterval = setInterval(() => {
      if (requestList.length >= 2) {
        clearInterval(checkInterval);
        resolve();
      }
    }, 100);
  });
});

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