为何cy.intercept/cy.wait无法捕获我的HTTP请求？

问题概述 #

使用Cypress v13.1.0编写测试时，按cy.intercept-用户操作-cy.wait的流程配置，却始终无法捕获目标GET请求。浏览器和WireShark能确认请求已发送并正常响应，但Cypress提示超时，且尝试多种路径匹配、调整等待时机等操作均无效。

排查与解决方法 #

1. 确认请求是否经过Cypress代理 #

Cypress默认会代理应用发起的请求，但如果请求是硬编码的绝对路径（如http://localhost:7771），可能绕过代理直接发送。可以从以下几点调整：

• 修改请求为相对路径：如果应用代码允许，把API请求改为相对路径（如/api/agent/report/copy-style），再用cy.intercept("GET", "/api/agent/report/copy-style").as("getStyle")拦截。
• 配置Cypress代理规则：在cypress.config.js中添加experimentalModifyObstructiveThirdPartyCode: true，强制Cypress处理第三方域名的请求。
• 用正则/通配符匹配完整路径：如果必须保留绝对路径，改用正则或通配符匹配，避免精确路径的匹配问题：

  // 正则匹配
  cy.intercept("GET", /http:\/\/localhost:7771\/api\/agent\/report\/copy-style/).as("getStyle");
  // 通配符匹配（兼容带查询参数的情况）
  cy.intercept("GET", "http://localhost:7771/api/agent/report/copy-style*").as("getStyle");
  

2. 禁用服务工作线程（Service Worker） #

如果应用使用了Service Worker，请求可能被SW拦截并直接返回缓存，未到达网络层导致Cypress无法捕获。测试时可以手动禁用SW：

cy.visit("/#/", {
  onBeforeLoad(win) {
    win.navigator.serviceWorker.getRegistrations().then(regs => {
      regs.forEach(reg => reg.unregister());
    });
  }
});

3. 调整cy.intercept的声明时机 #

确保cy.intercept在所有可能触发请求的操作之前声明，且避免页面刷新导致拦截规则失效。比如把拦截声明放在cy.visit的onBeforeLoad回调中，保证页面加载时拦截规则已生效：

it("get copy-style", () => {
  cy.visit("/#/", {
    onBeforeLoad() {
      cy.intercept("GET", "http://localhost:7771/api/agent/report/copy-style").as("getStyle");
    }
  });

  openReport(undefined, testReport_demo);
  cy.get("rec-list").find('[data-cy="acceptButton"]').click();

  cy.wait("@getStyle").then((interception) => {
    console.log("The @getStyle result: ", interception);
  });
});

4. 检查请求是否被缓存 #

如果目标请求被浏览器缓存，Cypress不会捕获缓存命中的请求。可以在访问页面时添加禁用缓存的请求头：

cy.visit("/#/", {
  headers: {
    "Cache-Control": "no-cache, no-store, must-revalidate"
  }
});

5. 查看Cypress网络日志 #

在Cypress测试运行器中打开Network面板，查看所有被捕获的请求列表：

• 如果目标请求不在列表中：说明请求确实绕过了Cypress代理，回到步骤1排查代理问题；
• 如果目标请求在列表中：说明拦截规则匹配错误，调整cy.intercept的路径匹配规则（比如用正则、通配符，或检查是否有未考虑的查询参数、路径大小写问题）。

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