Skip to main content
Version: 1.15

Network

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


HTTP Authentication#

const context = await browser.newContext({  httpCredentials: {    username: 'bill',    password: 'pa55w0rd',  },});const page = await context.newPage();await page.goto('https://example.com');

API reference#

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:

const browser = await chromium.launch({  proxy: {    server: 'http://myproxy.com:3128',    username: 'usr',    password: 'pwd'  }});

When specifying proxy for each context individually, you need to give Playwright a hint that proxy will be set. This is done via passing a non-empty proxy server to the browser itself. Here is an example of a context-specific proxy:

const browser = await chromium.launch({  proxy: { server: 'per-context' }});const context = await browser.newContext({  proxy: { server: 'http://myproxy.com:3128' }})

Network events#

You can monitor all the requests and responses:

const { chromium, webkit, firefox } = require('playwright');
(async () => {  const browser = await chromium.launch();  const page = await browser.newPage();
  // 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');
  await browser.close();})();

Or wait for a network response after the button click:

// Use a glob URL patternconst [response] = await Promise.all([  page.waitForResponse('**/api/fetch_data'),  page.click('button#update'),]);

Variations#

// Use a RegExpconst [response] = await Promise.all([  page.waitForResponse(/\.jpeg$/),  page.click('button#update'),]);
// Use a predicate taking a Response objectconst [response] = await Promise.all([  page.waitForResponse(response => response.url().includes(token)),  page.click('button#update'),]);

API reference#


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 quests in your Playwright script.

Variations#

// Set up route on the entire browser context.// 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');

API reference#


Modify requests#

// Delete headerawait page.route('**/*', route => {  const headers = route.request().headers();  delete headers['X-Secret'];  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#

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

API reference#


WebSockets#

Playwright supports WebSockets inspection out of the box. Every time WebSocket is created, 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'));});

API reference#