playwright/docs/network.md

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.

Contents

• HTTP Authentication
• Handle file downloads
• Network events
• Handle requests
• Modify requests
• Abort requests

HTTP Authentication

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

You can also use browserContext.setHTTPCredentials to update HTTP credentials of an existing context.

API reference

• browser.newContext([options])
• browserContext.setHTTPCredentials(httpCredentials)

Handle file downloads

const [ download ] = await Promise.all([
	page.waitForEvent('download'), // <-- start waiting for the download
	page.click('button#delayed-download') // <-- perform the action that directly or indirectly initiates it.
]);
const path = await download.path();

For every attachment downloaded by the page, "download" event is emitted. If you create a browser context with the acceptDownloads: true, all these attachments are going to be downloaded into a temporary folder. You can obtain the download url, file system path and payload stream using the Download object from the event.

Variations

If you have no idea what initiates the download, you can still handle the event:

page.on('download', download => download.path().then(console.log));

Note that handling the event forks the control flow and makes script harder to follow. Your scenario might end while you are downloading a file since your main control flow is not awaiting for this operation to resolve.

API reference

• Download
• page.on('download')
• page.waitForEvent(event)

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 pattern
const [response] = await Promise.all([
  page.waitForResponse('**/api/fetch_data'),
  page.click('button#update'),
]);

Variations

// Use a RegExp
const [response] = await Promise.all([
  page.waitForResponse(/\.jpeg$/),
  page.click('button#update'),
]);

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

API reference

• class Request
• class Response
• event 'request'
• event 'response'
• page.waitForRequest(urlOrPredicate[, options])
• page.waitForResponse(urlOrPredicate[, options])

Handle requests

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

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

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

• browserContext.route(url, handler)
• browserContext.unroute(url[, handler])
• page.route(url, handler)
• page.unroute(url[, handler])
• Route

Modify requests

await page.route('**/*', route => {
  const headers = route.request().headers();
  delete headers['X-Secret'];
  route.continue({headers});
});
await page.goto('https://chromium.org');

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

Variations

// Continue requests as POST.

await page.route('**/*', route => route.continue({method: 'POST'}));
await page.goto('https://chromium.org');

Abort requests

const page = await browser.newPage();
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
await page.goto('https://example.com');

Variations

// Abort requests based on their type.

await page.route('**/*', route => {
  return route.request().resourceType() === 'image' ?
      route.abort() : route.continue();
});
await page.goto('https://chromium.org');

API reference

• page.route(url, handler)
• browserContext.route(url, handler)
• route.abort([errorCode])