Network practice · page.route()

Network interception playground

This page calls four API endpoints that don't actually exist on the server. Without mocks every fetch returns 404 and you'll see the empty-state UI. The whole point of the practice is to install page.route() handlers in your test, return your own JSON, and watch the UI react.

Endpoints this page calls

Refresh below to re-trigger every fetch. Each row updates with the response status (and timing) on completion.

GET /api/products Pending

GET /api/health Pending

GET /api/slow Pending

POST /api/login Idle

data-testid=endpoint-{name} · status-{name} fetch URLs=/api/products · /api/health · /api/slow · /api/login refresh=data-testid=refresh-products · refresh-all

Product catalog (driven by /api/products)

When the response is OK, products render here. With no mock, an empty state shows.

No products loaded.
The endpoint /api/products returned an error. Mock it from your Playwright test with page.route('**/api/products', ...).

Login (POST /api/login)

Submitting this form posts JSON to /api/login. Mock it to return a 200 with a fake token, or a 401 to test the error path.

Network log

Every fetch this page makes is logged here with status and timing. Useful for asserting that your mock fired.

No requests yet.

What students should practise

Mock /api/products with a 200 + JSON; assert the grid renders your fixture.
Mock the same endpoint with a 500; assert the empty-state shows.
Use page.waitForResponse while clicking Refresh.
Mock /api/login to return 401; assert the form error.
Slow down /api/slow with route.fulfill({ ... }) after a deliberate delay; assert pending → ok.

Playwright solutionpage.route() patterns: fulfill, abort, modify, wait. Show solution

// 1) Mock /api/products with a 200 + JSON fixture
await page.route('**/api/products', (route) => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify([
      { id: 'sku-1', name: 'Mock Widget', price: 9.99, stock: 42 }
    ])
  });
});

await page.goto('/playwright/network/intercept.html');
await expect(page.getByTestId('product-grid')).toContainText('Mock Widget');

// 2) Force the error path with a 500
await page.route('**/api/products', (route) => route.fulfill({ status: 500 }));
await page.getByTestId('refresh-products').click();
await expect(page.getByTestId('empty-state')).toBeVisible();

// 3) Wait for response while clicking refresh
const [response] = await Promise.all([
  page.waitForResponse((r) => r.url().includes('/api/products') && r.status() === 200),
  page.getByTestId('refresh-products').click()
]);
expect(await response.json()).toHaveLength(1);

// 4) Mock the login POST and force a 401
await page.route('**/api/login', (route) => {
  route.fulfill({ status: 401, body: JSON.stringify({ error: 'Invalid credentials' }) });
});
await page.getByTestId('login-submit').click();
await expect(page.getByTestId('login-result')).toContainText('401');

// 5) Modify a request payload before forwarding
await page.route('**/api/login', async (route, request) => {
  const body = JSON.parse(request.postData() || '{}');
  body.email = body.email.toLowerCase();
  await route.continue({ postData: JSON.stringify(body) });
});