playwright/docs/network.md

Working With 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 and modified.

Note

As of playwright v0.13.0, Playwright is not yet capable of tracking websocket messages.

Monitor all network activity in page

const { chromium, webkit, firefox } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Subscribe to 'request' and 'response' events.S
  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();
})();

API reference

• Request
• Response
• event: 'request'
• event: 'response'

Wait for a network response after the button click

const [response] = await Promise.all([
  page.waitForResponse('/api/fetch_data'),
  page.click('button#update'),
]);

The snippet above clicks a button and waits for the network response that matches the given pattern.

Variations

// User glob URL pattern
const [response] = await Promise.all([
  page.waitForResponse('**/*'),
  page.click('button#update'),
]);

// User pattern predicate
const [response] = await Promise.all([
  page.waitForResponse(url => url.includes(token)),
  page.click('button#update'),
]);

API reference

• page.waitForRequest(urlOrPredicate[, options])
• page.waitForResponse(urlOrPredicate[, options])

Mock API endpoint with the test data

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

You can also use browserContext.route to mock API endpoints for all the pages in the context.

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

Abort selected 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])

Modify selected 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');

Setup HTTP authentication

const context = await browser.newContext({
  httpCredentials: {
    username: 'bill',
    password: 'pa55w0rd',
  },
});
const page = await context.newPage();
awat 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)