如何在Cypress中记录API响应时间？选cy.intercept()还是cy.request()？

问题原因 #

你当前代码返回undefined是因为req.continue()回调里的res对象，并未直接关联到cy.wait()获取的intercept对象的response属性上，导致无法读取自定义的responseTime字段。

方案一：使用cy.intercept()（拦截页面自动发起的请求） #

通过监听请求的response事件来计算响应时间，确保时间值能被挂载到最终的intercept对象中：

cy.intercept('POST', '**/create-insurance-view-model', (req) => {
  // 记录请求开始时间
  req.startTime = Date.now();
  // 监听响应返回事件
  req.on('response', (res) => {
    res.responseTime = Date.now() - req.startTime;
  });
}).as('apiViewModel');

// 等待请求完成并获取响应时间
cy.wait('@apiViewModel').then((intercept) => {
  // 转换为秒并保留两位小数
  const responseTimeSec = (intercept.response.responseTime / 1000).toFixed(2);
  cy.log(`Time to get the license plate data was: ${responseTimeSec} seconds`);
});

方案二：使用cy.request()（手动发起API请求） #

如果不需要拦截页面请求，而是直接测试API接口，cy.request()的时间计算会更直观：

// 记录请求开始时间
const startTime = Date.now();

// 手动发起POST请求（需补充请求体参数，如果有）
cy.request('POST', '**/create-insurance-view-model')
  .then((response) => {
    const responseTimeSec = ((Date.now() - startTime) / 1000).toFixed(2);
    cy.log(`Time to get the license plate data was: ${responseTimeSec} seconds`);
    // 可在这里添加响应断言或其他处理逻辑
  });

两者适用场景对比 #

• cy.intercept()：适合拦截前端页面触发的API请求（如点击按钮后自动发起的请求），可同时修改请求/响应内容，用于测试前端与API的完整交互流程。
• cy.request()：适合单独测试API接口的性能或功能，无需依赖前端页面操作，时间计算逻辑更直接。

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