如何使用Cypress拦截API响应、存储结果并提取指定值？

想要访问某页面（示例：www.example.com），进入页面时会触发特定API请求，需要拦截该API，将JSON响应存入变量并提取指定值。尝试了以下代码，但等待5秒后执行失败：

describe('Intercept API response', () => {
  it('Stores the response in a variable', () => {
    let responseData;

    cy.intercept('GET', 'https://jsonplaceholder.typicode.com/posts/1').as('getData');

    cy.visit('https://www.example.com')
      .then(() => {
        cy.wait('@getData')
          .then((xhr) => {
            responseData = xhr.response.body;
            console.log(responseData);
          });
      });
  });
});

核心问题 #

1. 拦截逻辑冗余：Cypress命令本身是异步链式执行，不需要用then包裹cy.wait，多余的嵌套反而可能导致异步时序混乱。
2. 变量使用风险：直接给responseData赋值后，后续代码可能在异步赋值完成前就执行，导致变量未被正确初始化。

修正后的代码 #

describe('Intercept API response', () => {
  it('Stores the response in a variable', () => {
    let responseData;

    // 提前定义拦截器，确保页面发起请求前拦截器已生效
    cy.intercept('GET', 'https://jsonplaceholder.typicode.com/posts/1').as('getData');

    // 访问页面，直接链式执行后续命令
    cy.visit('https://www.example.com');

    // 等待API请求完成，处理响应数据
    cy.wait('@getData').then((interception) => {
      responseData = interception.response.body;
      console.log('获取到的API响应:', responseData);

      // 提取指定字段，示例为提取文章标题
      const targetValue = responseData.title;
      cy.log('提取的指定值:', targetValue);

      // 若要在后续Cypress命令中复用，建议存为别名
      cy.wrap(targetValue).as('targetValue');
    });

    // 后续使用提取的值进行断言或业务操作
    cy.get('@targetValue').then((value) => {
      expect(value).to.equal('sunt aut facere repellat provident occaecati excepturi optio reprehenderit');
    });
  });
});

额外排查建议 #

• 确认API的请求方法、URL完全匹配，注意是否包含查询参数、路径参数差异
• 检查页面是否确实触发了该API请求，可通过浏览器开发者工具网络面板验证
• 若API响应较慢，可延长等待超时时间：cy.wait('@getData', { timeout: 10000 })
• 如果是POST/PUT等其他请求方法，需修改cy.intercept的第一个参数

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