Skip to main content

Network

Introduction

Playwright provides APIs to monitor and modify browser network traffic, both HTTP and HTTPS. Any requests that a page does, including XHRs and fetch requests, can be tracked, modified and handled.

Mock APIs

Check out our API mocking guide to learn more on how to

  • mock API requests and never hit the API
  • perform the API request and modify the response
  • use HAR files to mock network requests.

Network mocking

You don't have to configure anything to mock network requests. Just define a custom Route that mocks network for a browser context.

example.spec.ts
import { test, expect } from '@playwright/test';

test.beforeEach(async ({ context }) => {
// Block any css requests for each test in this file.
await context.route(/.css$/, route => route.abort());
});

test('loads page without css', async ({ page }) => {
await page.goto('https://playwright.dev');
// ... test goes here
});

Alternatively, you can use page.route() to mock network in a single page.

example.spec.ts
import { test, expect } from '@playwright/test';

test('loads page without images', async ({ page }) => {
// Block png and jpeg images.
await page.route(/(png|jpeg)$/, route => route.abort());

await page.goto('https://playwright.dev');
// ... test goes here
});

HTTP Authentication

Perform HTTP Authentication.

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
httpCredentials: {
username: 'bill',
password: 'pa55w0rd',
}
}
});

HTTP Proxy

You can configure pages to load over the HTTP(S) proxy or SOCKSv5. Proxy can be either set globally for the entire browser, or for each browser context individually.

You can optionally specify username and password for HTTP(S) proxy, you can also specify hosts to bypass proxy for.

Here is an example of a global proxy:

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
proxy: {
server: 'http://myproxy.com:3128',
username: 'usr',
password: 'pwd'
}
}
});

Its also possible to specify it per context:

example.spec.ts
import { test, expect } from '@playwright/test';

test('should use custom proxy on a new context', async ({ browser }) => {
const context = await browser.newContext({
proxy: {
server: 'http://myproxy.com:3128',
}
});
const page = await context.newPage();

await context.close();
});

Network events

You can monitor all the Requests and Responses:

// Subscribe to 'request' and 'response' events.
page.on('request', request => console.log('>>', request.method(), request.url()));
page.on('response', response => console.log('<<', response.status(), response.url()));

await page.goto('https://example.com');

Or wait for a network response after the button click with page.waitForResponse():

// Use a glob URL pattern. Note no await.
const responsePromise = page.waitForResponse('**/api/fetch_data');
await page.getByText('Update').click();
const response = await responsePromise;

Variations

Wait for Responses with page.waitForResponse()

// Use a RegExp. Note no await.
const responsePromise = page.waitForResponse(/\.jpeg$/);
await page.getByText('Update').click();
const response = await responsePromise;

// Use a predicate taking a Response object. Note no await.
const responsePromise = page.waitForResponse(response => response.url().includes(token));
await page.getByText('Update').click();
const response = await responsePromise;

Handle requests

await page.route('**/api/fetch_data', route => route.fulfill({
status: 200,
body: testData,
}));
await page.goto('https://example.com');

You can mock API endpoints via handling the network requests in your Playwright script.

Variations

Set up route on the entire browser context with browserContext.route() or page with page.route(). It will apply to popup windows and opened links.

await browserContext.route('**/api/login', route => route.fulfill({
status: 200,
body: 'accept',
}));
await page.goto('https://example.com');

Modify requests

// Delete header
await page.route('**/*', async route => {
const headers = route.request().headers();
delete headers['X-Secret'];
await route.continue({ headers });
});

// Continue requests as POST.
await page.route('**/*', route => route.continue({ method: 'POST' }));

You can continue requests with modifications. Example above removes an HTTP header from the outgoing requests.

Abort requests

You can abort requests using page.route() and route.abort().

await page.route('**/*.{png,jpg,jpeg}', route => route.abort());

// Abort based on the request type
await page.route('**/*', route => {
return route.request().resourceType() === 'image' ? route.abort() : route.continue();
});

Modify responses

To modify a response use APIRequestContext to get the original response and then pass the response to route.fulfill(). You can override individual fields on the response via options:

await page.route('**/title.html', async route => {
// Fetch original response.
const response = await route.fetch();
// Add a prefix to the title.
let body = await response.text();
body = body.replace('<title>', '<title>My prefix:');
await route.fulfill({
// Pass all fields from the response.
response,
// Override response body.
body,
// Force content type to be html.
headers: {
...response.headers(),
'content-type': 'text/html'
}
});
});

WebSockets

Playwright supports WebSockets inspection out of the box. Every time a WebSocket is created, the page.on('websocket') event is fired. This event contains the WebSocket instance for further web socket frames inspection:

page.on('websocket', ws => {
console.log(`WebSocket opened: ${ws.url()}>`);
ws.on('framesent', event => console.log(event.payload));
ws.on('framereceived', event => console.log(event.payload));
ws.on('close', () => console.log('WebSocket closed'));
});

Missing Network Events and Service Workers

Playwright's built-in browserContext.route() and page.route() allow your tests to natively route requests and perform mocking and interception.

  1. If you're using Playwright's native browserContext.route() and page.route(), and it appears network events are missing, disable Service Workers by setting Browser.newContext.serviceWorkers to 'block'.
  2. It might be that you are using a mock tool such as Mock Service Worker (MSW). While this tool works out of the box for mocking responses, it adds its own Service Worker that takes over the network requests, hence making them invisible to browserContext.route() and page.route(). If you are interested in both network testing and mocking, consider using built-in browserContext.route() and page.route() for response mocking.
  3. If you're interested in not solely using Service Workers for testing and network mocking, but in routing and listening for requests made by Service Workers themselves, please see this experimental feature.