Intercept a Form POST

The concept

Often you want to fake one request without breaking the rest of the page. A form might POST to /api/contact, while the same URL also serves a GET, and the page needs its scripts, styles and other API calls to work normally.

A route handler receives every matching request. Inside it, route.request().method() tells you whether it is a GET, POST, PUT and so on. Fulfil the one you want to stub and call route.continue() for the rest so they reach the real server untouched. (route.fallback() is the alternative when you have several handlers and want the next one to decide.)

This keeps the mock surgical: you control the outcome of the submission without masking anything else.

The fragile version

const okResponse = { status: 200, json: { ok: true } };
await page.route('**/*', route => route.fulfill(okResponse));

Why it breaks: This answers every request, including HTML, scripts and styles, with the same JSON, so the page breaks or tests something unrealistic.

A robust Playwright version

const created = { status: 201, json: { ok: true } };
await page.route('**/api/contact', route => {
  if (route.request().method() !== 'POST') return route.continue();
  return route.fulfill(created);
});
await page.getByRole('button', { name: 'Send' }).click();
await expect(page.getByText('Thanks, we will be in touch')).toBeVisible();

Only the POST is stubbed; everything else behaves normally.

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

Common mistakes

• Routing **/* and fulfilling everything.
• Leaving a branch where neither fulfill nor continue is called.
• Checking the method with the wrong case ('post' instead of 'POST').

FAQ