如何使用Cypress获取按钮点击后的API响应数据？

在Cypress中，你可以通过拦截API请求的方式直接获取点击按钮后的响应数据，无需依赖页面渲染结果，具体实现步骤如下：

1. 提前拦截目标API请求 #

在点击按钮前，用cy.intercept()监听目标API请求，给它设置别名方便后续调用：

// 拦截GET请求，别名为'fetchTargetData'
cy.intercept('GET', '/api/your-target-path').as('fetchTargetData');

// 若为POST请求，写法类似：
// cy.intercept('POST', '/api/submit-data').as('submitData');

如果不确定完整API路径，可用模糊匹配规则，比如匹配包含特定字符串的URL：

cy.intercept('GET', /\/api\/data.*/).as('fetchTargetData');

2. 触发按钮点击以发起请求 #

执行按钮点击操作，触发对应的API请求：

cy.get('button[data-testid="trigger-btn"]').click();

3. 等待请求完成并提取响应数据 #

用cy.wait()等待拦截的请求完成，再通过its()提取响应内容：

cy.wait('@fetchTargetData').then((interception) => {
  // 获取响应体数据
  const responseData = interception.response.body;
  
  // 直接对数据做断言或业务处理
  expect(responseData.code).to.equal(200);
  expect(responseData.data).to.have.length.greaterThan(0);
  
  // 也可将数据存入Cypress环境变量，供后续用例复用
  Cypress.env('cachedResponse', responseData);
});

关键注意事项 #

• cy.intercept()必须在触发请求（点击按钮）前配置，否则无法捕获目标请求。
• 若按钮触发多个API请求，可通过请求方法、参数、请求体进一步筛选拦截目标。
• 在Cypress控制台的「Network」标签下，可查看拦截到的请求完整详情。

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