Watching what the app sends

Watching network traffic is standard practice on real Playwright teams. You cannot run it in the editor on this site, because our browser engine does not implement request interception. Everything below is real, working Playwright. Use it on a local project and it behaves exactly as described.

Here is a bug that a normal test will never catch.

You create a contact named Dana Fox at the company FoxLabs. The green message appears. The new row appears in the table. Everything looks correct on screen.

But the app sent an empty company name to the server. Nobody notices until a customer opens the record next week.

The screen was right. The data was wrong. To catch this you have to look at the request, which is the message your app sends to the server.

Playwright gives you a clean way to do this:

const savePromise = page.waitForResponse('**/api/contacts');
await page.getByTestId('save-contact').click();
const response = await savePromise;

expect(response.status()).toBe(201);
const body = await response.json();
expect(body.company).toBe('FoxLabs');

Read the order carefully, because it matters. You start waiting before you click. If you click first and then start waiting, the response may already have arrived and your test waits forever for something that has passed.

This pattern catches a whole family of bugs the screen cannot show you: wrong values sent, a request sent twice, or a request never sent at all.

You can also check the request itself rather than the response:

const request = await page.waitForRequest('**/api/contacts');
expect(request.postDataJSON().name).toBe('Dana Fox');

Most of the time you should still assert on what the user sees, because that is the promise your app makes to them. Reach for the network when you need to check the data being sent, or when nothing visible changes yet.

Remember this: start waiting for the response before you do the thing that triggers it.

You can practise the instinct behind this without the network API. The problem Prove a contact was actually saved makes you prove the save really happened instead of trusting the green message.

Reference: Network.