在Cypress中如何验证拦截的API被调用了指定次数？

我用Cypress做React应用的集成式组件测试，全程挂载完整应用并做交互操作，所有API调用都通过cy.intercept()模拟，这套方案比我之前用过的其他前端测试工具都可靠。但最近遇到一个问题：测试流程里某个API会被调用两次，第二次是点击按钮触发的业务逻辑，我需要验证它确实被调用了两次。

最初我写的验证代码是这样的：

cy.get('#myButton').click(); // 触发第二次API调用
cy.get('@myApi.all').should('have.length', 2);

但单独运行会失败，Cypress只记录到myApi被调用了一次。原因很简单：Cypress会立即执行断言，不会等待点击操作触发的API请求完成。

目前唯一能让测试通过的办法是加显式等待：

cy.get('#myButton').click(); // 触发第二次API调用
cy.wait(300);
cy.get('@myApi.all').should('have.length', 2);

给300ms等待时间后，第二次请求能被记录到，测试就过了。但这种方案太鸡肋，靠固定时间等待，环境差异很容易导致测试不稳定，根本不是长久之计。

更可靠的解决方案 #

方案1：等待第二次API调用完成

在定义拦截时先给API设置别名：

cy.intercept('GET', '/api/your-endpoint').as('myApi');

点击按钮后，直接用cy.wait('@myApi')等待第二次请求完成，再断言调用次数：

cy.get('#myButton').click();
cy.wait('@myApi'); // 等待第二次API请求结束
cy.get('@myApi.all').should('have.length', 2);

cy.wait('@myApi')会精准等待该别名对应的下一次请求完成，完全不需要依赖固定时间，测试稳定性直接拉满。

方案2：利用Cypress断言的重试机制

Cypress的should命令会自动重试断言直到通过或超时，所以可以直接对调用数组做回调式断言：

cy.get('#myButton').click();
cy.get('@myApi.all').should((calls) => {
  expect(calls.length).to.equal(2);
});

这种方式也能避免显式等待，Cypress会不断重试检查调用次数，直到达到预期或超时。不过相比第一种方案，它依赖重试超时时间（默认4秒），如果请求响应慢可能会有问题，所以更推荐第一种方案。

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