Playwright如何精准Mock单个路由方法且不覆盖同端点其他方法？

Playwright 支持通过带请求方法的URL匹配器对象实现类似Cypress cy.intercept({ url: 'url', method: METHOD })的精准拦截效果，每个路由规则独立生效，不会覆盖同端点其他方法的Mock配置。

核心方案：使用含method的匹配器对象 #

直接在page.route的第一个参数传入包含url和method的对象，即可仅拦截指定HTTP方法的请求，多个路由规则互不干扰：

test("精准控制不同方法的Mock", async ({ page }) => {
  // 单独Mock GET请求，不影响其他方法
  await page.route({ url: "endpoint", method: "GET" }, async (route) => {
    await route.fulfill({
      status: 200,
      body: JSON.stringify({ data: "GET mock response" })
    });
  });

  // 单独Mock POST请求
  await page.route({ url: "endpoint", method: "POST" }, async (route) => {
    await route.fulfill({
      status: 201,
      body: JSON.stringify({ id: 1, msg: "POST created" })
    });
  });

  // 执行某些操作后，单独修改POST的Mock，不会影响GET的配置
  await page.route({ url: "endpoint", method: "POST" }, async (route) => {
    await route.fulfill({
      status: 201,
      body: JSON.stringify({ id: 2, msg: "Updated POST mock response" })
    });
  });
});

方案原理 #

Playwright的路由匹配器支持对象形式，当指定method时，该路由规则只会对匹配的HTTP方法生效，多个针对同端点不同方法的路由规则会同时存在，不会互相覆盖。这和直接用字符串URL匹配后在内部判断method的方式不同——直接用字符串URL调用page.route会覆盖之前针对该URL的所有路由处理函数，而带method的匹配器会创建独立的规则。

复杂场景补充：结合自定义判断 #

如果需要更灵活的匹配逻辑（比如同时判断请求头、参数等），可以在路由处理函数内结合method判断，但需注意避免重复覆盖同URL的路由处理函数：

test("结合自定义条件的Mock", async ({ page }) => {
  await page.route("endpoint", async (route) => {
    const request = route.request();
    if (request.method() === "PUT" && request.headers()["x-test-mode"] === "debug") {
      await route.fulfill({ body: JSON.stringify({ success: true }) });
    } else {
      // 其他情况继续原有请求或走其他Mock
      await route.continue();
    }
  });
});

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