Mock a GET Request

The concept

Real APIs are slow, change their data and sometimes go down. To test how a page handles a specific state, such as an empty list, a long list or an error, you can intercept its requests and answer them yourself.

page.route(pattern, handler) registers a handler for matching requests. Inside it, route.fulfill() sends back a response you define: a status, headers and a body. The json option sets the body and content type in one go.

Timing matters again. If the page requests data while it loads, the route must be registered before page.goto(). Register it afterwards and the real request has already gone out.

The fragile version

await page.goto('/orders');
await page.route('**/api/orders', route => route.fulfill(noOrders));
await expect(page.getByText('No orders yet')).toBeVisible();

Why it breaks: The orders request happened during goto, before the route existed, so the page shows real data and the empty-state assertion fails.

A robust Playwright version

const noOrders = { status: 200, json: [] };
await page.route('**/api/orders', route => route.fulfill(noOrders));
await page.goto('/orders');
await expect(page.getByText('No orders yet')).toBeVisible();

The mock is in place before the page loads, so the page renders exactly the state under test.

This is a general example on a made-up page, not the challenge’s reference solution.

Common mistakes

• Registering the route after navigation.
• A URL pattern that does not match (query strings and hosts trip people up; try a glob like **/api/orders*).
• Forgetting to call fulfill, continue or abort, which leaves the request hanging.

FAQ