如何在Cypress中正确等待并验证同一URL的多个请求？

问题场景 #

编写Cypress测试时，遇到向同一URL发送多个请求但请求体不同的场景：修改UI输入值触发新请求，用cy.intercept()结合cy.wait()验证每个请求体时，第二个cy.wait()总是获取到第一个请求的请求体，导致断言失败。

原始测试代码：

cy.intercept("POST", "/url").as("getCall");

cy.wait("@getCall").should((interception) => {
  // 验证第一个请求的请求体
});

// 触发新请求的UI交互操作

cy.wait("@getCall").should((interception) => {
  // 验证第二个请求的新请求体
});

临时解决方案是给每个请求设置不同别名，但操作繁琐：

cy.intercept("POST", "/url").as("getFirstCall");

cy.wait("@getFirstCall").should((interception) => {
  // 验证第一个请求的请求体
});

// 触发新请求的UI交互操作

cy.intercept("POST", "/url").as("getSecondCall");
cy.wait("@getSecondCall").should((interception) => {
  // 验证第二个请求的请求体
});

更优解决方案 #

1. 利用cy.intercept的请求队列特性

只需一次定义拦截别名，后续cy.wait会按顺序匹配队列中的新请求，无需重复定义拦截：

// 提前定义好拦截，覆盖所有匹配请求
cy.intercept("POST", "/url").as("getCalls");

// 触发第一个请求并验证
cy.wait("@getCalls").should((interception) => {
  expect(interception.request.body).to.deep.equal(/* 第一个请求体预期值 */);
});

// 触发第二个请求的UI操作
// ... 修改输入值等交互 ...

// 验证第二个请求，自动匹配队列中的下一个请求
cy.wait("@getCalls").should((interception) => {
  expect(interception.request.body).to.deep.equal(/* 第二个请求体预期值 */);
});

也可以一次性等待所有请求完成后批量验证：

cy.intercept("POST", "/url").as("getCalls");

// 依次触发两次请求的UI操作
// ... 第一次操作 ...
// ... 修改输入值的第二次操作 ...

// 等待两个请求完成，按顺序获取拦截结果
cy.wait("@getCalls").wait("@getCalls").then((interceptions) => {
  expect(interceptions[0].request.body).to.deep.equal(/* 第一个请求体 */);
  expect(interceptions[1].request.body).to.deep.equal(/* 第二个请求体 */);
});

2. 基于请求体特征精准拦截

如果请求体有明确区分特征，可在拦截时添加条件判断，给不同请求动态设置别名：

// 根据请求体特征分别设置别名
cy.intercept("POST", "/url", (req) => {
  if (req.body.targetKey === 'firstRequestValue') {
    req.alias = 'firstCall';
  } else if (req.body.targetKey === 'secondRequestValue') {
    req.alias = 'secondCall';
  }
});

// 触发第一个请求后验证
cy.wait("@firstCall").should((interception) => {
  // 验证逻辑
});

// 触发第二个请求后验证
cy.wait("@secondCall").should((interception) => {
  // 验证逻辑
});

3. 用cy.clock()控制请求时序（适用于密集请求场景）

如果请求触发间隔过短导致顺序混乱，可冻结时间手动控制请求发送时机：

cy.clock();
cy.intercept("POST", "/url").as("getCalls");

// 触发第一个请求
// ... UI操作 ...
cy.tick(1000); // 模拟时间流逝，确保请求发送完成
cy.wait("@getCalls").should((interception) => {
  // 验证第一个请求
});

// 触发第二个请求
// ... UI操作 ...
cy.tick(1000);
cy.wait("@getCalls").should((interception) => {
  // 验证第二个请求
});

cy.clock().restore(); // 恢复系统时间

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