如何将cy.intercept拦截的请求体保存到外部变量

原写法失效原因 #

Cypress 的所有命令均为异步队列执行模式，cy.intercept 仅会将拦截逻辑注册到队列中，你写在 cy.intercept 后的同步代码会先于拦截回调触发，此时外部的 request 变量还未被赋值，因此无法直接按原有写法获取值。

可行替代方案 #

方案1：使用别名+cy.wait 直接获取请求体（官方推荐） #

这是最符合Cypress设计规范的实现方式，无需额外声明外部变量：

// 注册拦截并设置别名
cy.intercept("POST", "/url**", (req) => {
  req.reply({
    body: response // 替换为你自定义的mock返回值
  });
}).as('targetPostRequest');

// 此处放置触发该POST请求的操作，例如点击提交按钮
cy.get('#submit').click();

// 等待拦截命中，从拦截结果中直接拿到请求体
cy.wait('@targetPostRequest').then(interception => {
  const requestBody = interception.request.body;
  // 直接调用其他函数，将请求体作为参数传入即可
  yourCustomFunc(requestBody);
});

方案2：将请求体挂载到测试上下文共享 #

如果需要在同个测试用例的多个位置复用请求体，可以存到Mocha的测试上下文this中：

注意：测试用例的回调不能使用箭头函数，否则this指向会异常

it('测试用例名称', function() {
  cy.intercept("POST", "/url**", (req) => {
    req.reply({ body: response });
  }).as('targetPostRequest');

  cy.get('#submit').click();
  // 将请求体存为上下文别名
  cy.wait('@targetPostRequest').its('request.body').as('savedReqBody');

  // 后续需要使用的位置，通过.then回调从上下文取值
  cy.then(() => {
    yourCustomFunc(this.savedReqBody);
  });
});

方案3：保留外部变量写法（调整取值时机） #

如果一定要用外部let变量存储，只需要把读取变量的逻辑放到拦截命中后的异步回调中即可：

let request;
cy.intercept("POST", "/url**", (req) => {
  request = {...req.body};
  req.reply({ body: response });
}).as('targetPostRequest');

cy.get('#submit').click();
// 必须等待拦截触发完成后，再读取外部变量
cy.wait('@targetPostRequest').then(() => {
  // 此时request已经完成赋值，可以正常使用
  yourCustomFunc(request);
});

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