如何在Cypress中捕获网络请求并复用头信息重放验证登出授权失效？

一、捕获目标请求的参数与头信息 #

通过Cypress的cy.intercept()拦截页面自动发起的目标请求，提取并保存请求的关键信息：

// 提前设置请求拦截，匹配目标请求的特征（比如请求方法和路径）
cy.intercept('GET', '/api/user-profile').as('fetchUserProfile');

// 访问触发请求的页面
cy.visit('/dashboard');

// 等待请求完成后，提取请求的方法、URL、头信息和请求体
cy.wait('@fetchUserProfile').then((interception) => {
  // 把请求信息存入Cypress环境变量，供后续重放使用
  Cypress.env('savedAuthRequest', {
    method: interception.request.method,
    url: interception.request.url,
    headers: { ...interception.request.headers }, // 深拷贝避免引用问题
    body: interception.request.body
  });
});

二、登出后重放请求并验证错误码 #

完成请求信息捕获后，执行登出操作，再用保存的请求信息发起请求，验证授权失败的状态码：

// 执行登出操作，确保页面跳转到登录页
cy.get('[data-testid="logout-btn"]').click();
cy.url().should('contain', '/login');

// 取出保存的请求信息
const savedReq = Cypress.env('savedAuthRequest');

// 重放请求，禁用错误状态码导致测试失败的默认行为
cy.request({
  method: savedReq.method,
  url: savedReq.url,
  headers: savedReq.headers,
  body: savedReq.body,
  failOnStatusCode: false
}).then((response) => {
  // 根据业务预期验证状态码，通常是401（未授权）或403（禁止访问）
  expect(response.status).to.be.oneOf([401, 403]);
});

三、关键注意事项 #

• 精确拦截请求：如果页面有多个相似请求，需要给cy.intercept()添加更精准的匹配规则，比如包含特定Query参数或请求头，避免误拦截。
• 请求头处理：如果原请求头包含动态生成的字段（比如x-request-id），可以根据业务需求决定是否保留，一般直接复用原头信息即可。
• 请求体格式：如果是POST/PUT等带请求体的请求，确保保存的body格式正确（比如JSON对象无需额外序列化，Cypress会自动处理）。

四、替代自动化方案 #

如果不使用Cypress，也可以选择以下工具实现：

• Supertest + 测试框架：先通过Supertest登录获取认证Cookie，发起目标请求并保存参数，登出后复用原Cookie和参数发起请求，验证状态码。
• Playwright：使用page.route()拦截目标请求并保存请求信息，执行登出后通过page.request()重放请求，断言返回的错误状态码。

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