如何让Cypress等待.intercept拦截的所有请求执行完成后再继续？

问题原因 #

你的代码存在两个核心问题导致执行顺序不符合预期：

1. cy.wait("@getApi")默认仅等待第一个匹配规则的请求完成，页面会发起2个/api/**接口请求，所以第一个请求结束就会继续往下执行后续逻辑
2. Cypress命令是异步入队执行的，直接写在测试用例中的console.log("here")是同步代码，会早于所有Cypress异步命令执行

解决方案 #

方案1：已知接口请求数量

如果能确定页面会发起N个匹配的接口请求，直接声明等待N次别名即可，同时将后续逻辑放入.then()回调保证执行顺序：

describe("Cypress", () => {
  it("Example Test", () => {
    cy.intercept("GET", "/api/**").as("getApi");
    cy.visit("/home/");
    // 2个匹配请求，等待两次
    cy.wait(["@getApi", "@getApi"]).then(() => {
      console.log("here");
    });
  });
});

方案2：不确定接口请求数量

如果无法提前预知请求数量，可以通过拦截回调统计活跃请求数，结合Cypress自带的断言重试机制等待所有请求完成：

describe("Cypress", () => {
  it("Example Test", () => {
    let activeApiRequests = 0;
    cy.intercept("GET", "/api/**", (req) => {
      activeApiRequests++;
      req.continue((res) => {
        // 请求完成后活跃数减1
        activeApiRequests--;
      });
    }).as("getApi");

    cy.visit("/home/");

    // 自动重试直到所有请求都完成
    cy.wrap(null).should(() => {
      expect(activeApiRequests).to.equal(0);
    }).then(() => {
      console.log("here");
    });
  });
});

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