What is route.fulfill() vs route.continue()?

The Answer

`route.fulfill()` intercepts the request and responds with YOUR mock data — the request never reaches the server. `route.continue()` lets the request proceed to the real server, optionally modifying headers or the URL.

Deep Dive Explanation

Use `fulfill()` for pure mocking (fast, no network dependency). Use `continue()` for adding auth headers or logging. The hybrid `route.fetch()` + `fulfill()` pattern is powerful for modifying real responses without fully mocking them.

example.spec.ts

// fulfill() - Replace response entirely with mock
await page.route('**/api/user', route => route.fulfill({
  status: 200,
  body: JSON.stringify({ name: 'Mock User', role: 'admin' }),
}));

// continue() - Pass through but modify request
await page.route('**/api/**', route => route.continue({
  headers: {
    ...route.request().headers(),
    'X-Test-Header': 'playwright-test',
    'Authorization': 'Bearer test-token-123'
  }
}));

// Hybrid: modify response from real server
await page.route('**/api/products', async route => {
  const response = await route.fetch(); // Get real response
  const data = await response.json();
  data.push({ id: 999, name: 'Injected Product' }); // Mutate it
  await route.fulfill({ json: data }); // Return modified response
});