Cypress无法拦截指定URL请求，请求存在但拦截超时

问题场景 #

修改Cypress测试用例，更换同一服务商的相似URL后，拦截失效，出现No request ever occurred超时错误。原URL测试正常，已尝试添加延迟、提前配置拦截、验证页面可正常请求目标URL，但问题仍存在。

测试代码 #

describe("test", () => {
  beforeEach(() => {
    // Set up intercepts BEFORE visit
    cy.intercept(
      "https://pxdata.stat.fi:443/PxWeb/api/v1/fi/StatFin/vaerak/statfin_vaerak_pxt_11ra.px",
      { fixture: "week3/population.json" }
    ).as("getPopulation");

    cy.intercept(
      "https://pxdata.stat.fi:443/PxWeb/api/v1/fi/StatFin/tyokay/statfin_tyokay_pxt_115b.px",
      { fixture: "week3/employment.json" }
    ).as("getEmployment");
  });

  it("Table should be populated if JS is enabled", () => {
    
    cy.visit("/");
    cy.wait(['@getEmployment', '@getPopulation']);

    cy.get("table tbody tr").should("have.length", 10); // Or however many are in your fixture
  });
});

数据获取代码 #

const populationUrl = "https://pxdata.stat.fi:443/PxWeb/api/v1/fi/StatFin/vaerak/statfin_vaerak_pxt_11ra.px";
const employmentUrl = "https://pxdata.stat.fi:443/PxWeb/api/v1/fi/StatFin/tyokay/statfin_tyokay_pxt_115b.px";

const fetchStatFinData = async (url, body) => {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(body)
  });
  return await response.json();
};

const initializeCode = async () => {
  const populationBody = await (await fetch("population_values.json")).json();
  const employmentBody = await (await fetch("employment_values.json")).json();

  const [populationData, employmentData] = await Promise.all([
    fetchStatFinData(populationUrl, populationBody),
    fetchStatFinData(employmentUrl, employmentBody)
  ]);

  setupTable(populationData, employmentData);
};

排查与解决方法 #

1. 修正URL匹配精度 #

Cypress默认精确匹配URL，注意以下细节：

• 浏览器会自动省略HTTPS的默认443端口，拦截规则中写https://pxdata.stat.fi:443/...无法匹配实际发送的https://pxdata.stat.fi/...请求，需去掉端口号。
• 检查路径大小写、参数顺序，确保和实际请求完全一致。

2. 显式指定请求方法 #

页面代码使用POST请求，显式指定方法可提升匹配准确性：

cy.intercept('POST', "https://pxdata.stat.fi/PxWeb/api/v1/fi/StatFin/vaerak/statfin_vaerak_pxt_11ra.px", { fixture: "week3/population.json" }).as("getPopulation");

3. 使用模糊匹配规则 #

如果URL存在细微差异，可通过通配符或正则匹配：

• 通配符示例：

cy.intercept('POST', 'https://pxdata.stat.fi/PxWeb/api/v1/fi/StatFin/**/*.px', { fixture: "week3/population.json" }).as("getPopulation");

• 正则表达式示例：

cy.intercept(/https:\/\/pxdata\.stat\.fi\/PxWeb\/api\/v1\/fi\/StatFin\/.*\.px/, { fixture: "week3/population.json" }).as("getPopulation");

4. 验证请求实际发送情况 #

测试运行时打开Cypress的Network面板，确认：

• 目标请求是否真的被触发
• 请求的URL、方法是否与拦截规则匹配
• 页面初始化逻辑是否在cy.visit后正确执行（比如是否等待DOM加载完成）

5. 拆分等待逻辑排查 #

拆分cy.wait，单独查看每个请求的拦截状态，定位具体失效的请求：

cy.wait('@getEmployment').then(interception => {
  console.log('Employment请求详情:', interception);
});
cy.wait('@getPopulation').then(interception => {
  console.log('Population请求详情:', interception);
});

修改后的测试代码示例 #

describe("test", () => {
  beforeEach(() => {
    // 显式指定POST方法，移除默认端口443
    cy.intercept('POST', "https://pxdata.stat.fi/PxWeb/api/v1/fi/StatFin/vaerak/statfin_vaerak_pxt_11ra.px", { fixture: "week3/population.json" }).as("getPopulation");

    cy.intercept('POST', "https://pxdata.stat.fi/PxWeb/api/v1/fi/StatFin/tyokay/statfin_tyokay_pxt_115b.px", { fixture: "week3/employment.json" }).as("getEmployment");
  });

  it("Table should be populated if JS is enabled", () => {
    cy.visit("/");
    
    // 拆分等待，单独排查每个请求
    cy.wait('@getEmployment');
    cy.wait('@getPopulation');

    cy.get("table tbody tr").should("have.length", 10);
  });
});

内容的提问来源于stack exchange，提问作者Veikko M.