Inspect a Network Payload

The concept

Checking what the UI shows is only half the story. Sometimes the bug is in what the page sends: a missing field, the wrong ID, a filter that is ignored. Playwright lets you capture outgoing requests and inspect them.

page.waitForRequest() resolves with a Request object when a matching request is sent. request.postData() returns the raw body and request.postDataJSON() parses JSON or form-encoded bodies. As with responses, start waiting before the action that sends the request.

When the value you are checking is generated during the test, such as a unique search term, keep it in a variable and compare against that, rather than a hard-coded string.

The fragile version

await page.getByRole('searchbox').fill('laptop');
await page.getByRole('button', { name: 'Find' }).click();
const req = await page.waitForRequest('**/api/search');
expect(req.postData()).toContain('laptop');

Why it breaks: The listener starts after the click, so the request may already have gone. A hard-coded term could also match cached or default data.

A robust Playwright version

const term = `laptop-${Date.now()}`;
const requestPromise = page.waitForRequest(
  r => r.url().includes('/api/search') && r.method() === 'POST'
);
await page.getByRole('searchbox').fill(term);
await page.getByRole('button', { name: 'Find' }).click();
const request = await requestPromise;
expect(request.postDataJSON()).toMatchObject({ query: term });

Listening starts first, the match is precise, and the body is checked against the run-time value.

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

Common mistakes

• Starting to wait after the triggering click.
• Comparing raw postData() strings when the body is JSON; parse it.
• Matching on URL alone when several methods hit the same endpoint.

FAQ