How do I intercept network requests and compare their JSON bodies to expected JSON in an end-to-end test using Playwright?

Question

Accepted Answer

# Intercepting and Comparing JSON in Playwright

You can intercept network requests and compare their JSON bodies to expected JSON in an end-to-end test using Playwright's `page.route` method.

First, use `page.route` to intercept the API endpoint:

```typescript
await page.route('*/**/api/v1/fruits', async (route) => {
  const response = await route.fetch();
  const json = await response.json();
  const expectedJson = { name: 'Playwright', id: 100 };
  expect(json).toEqual(expectedJson);
  await route.fulfill({ response, json });
});
```

Then, navigate to the URL where the API call is made:

```typescript
await page.goto('https://ray.run/api-mocking');
```

Finally, assert that your expected data is visible on the page:

```typescript
await expect(page.getByText('Playwright', { exact: true })).toBeVisible();
```

With `page.route`, you can access request bodies, modify them, and compare them against expected JSON objects. This is a powerful tool for end-to-end testing. For more tips on efficient Playwright test scripts, check out [this blog post](https://ray.run/blog/tips-for-writing-efficient-playwright-test-scripts).

How do I intercept network requests and compare their JSON bodies to expected JSON in an end-to-end test using Playwright?

Answer

Intercepting and Comparing JSON in Playwright

References

Related Discord Threads

Related Questions