How does network interception work with page.route?

Route handlers let a test sit between the page and the network. A handler matches by URL pattern, then decides whether to let the request go to the server, return a synthetic response, or fail it. This is how tests remove dependence on slow or unstable third parties.

await page.route("**/api/recommendations", async (route) => {
  await route.fulfill({
    status: 200,
    contentType: "application/json",
    body: JSON.stringify({
      items: [{ id: 1, name: "Lamp" }],
    }),
  });
});

await page.goto("/cart");
await expect(page.getByText("Lamp")).toBeVisible();

The handler decisions

• route.continue() sends the request to the network, optionally with overrides
• route.fulfill() returns a synthetic response without hitting the server
• route.abort() fails the request, useful for offline and error states
• route.fallback() defers to the next matching handler
• route.request() exposes the URL, method, headers and post body

Order matters. The most recently registered matching route is tried first. That makes it easy to install a broad default and then override one endpoint in a specific test. Use fallback when the newer handler only wants to modify some requests and let the rest continue to the earlier behaviour.

await page.route("**/api/**", async (route) => {
  if (route.request().url().includes("/health")) {
    await route.fallback();
    return;
  }

  await route.continue();
});