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.

HTTP Authentication​

Perform HTTP Authentication.

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setHttpCredentials("bill", "pa55w0rd"));
Page page = context.newPage();
page.navigate("https://example.com");

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 the setProxy for.

Here is an example of a global proxy:

Browser browser = chromium.launch(new BrowserType.LaunchOptions()
  .setProxy(new Proxy("http://myproxy.com:3128")
  .setUsername("usr")
  .setPassword("pwd")));

Its also possible to specify it per context:

Browser browser = chromium.launch();
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setProxy(new Proxy("http://myproxy.com:3128")));

Network events​

You can monitor all the Requests and Responses:

import com.microsoft.playwright.*;

public class Example {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      BrowserType chromium = playwright.chromium();
      Browser browser = chromium.launch();
      Page page = browser.newPage();
      page.onRequest(request -> System.out.println(">> " + request.method() + " " + request.url()));
      page.onResponse(response -> System.out.println("<<" + response.status() + " " + response.url()));
      page.navigate("https://example.com");
      browser.close();
    }
  }
}

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

// Use a glob URL pattern
Response response = page.waitForResponse("**/api/fetch_data", () -> {
  page.getByText("Update").click();
});

Variations​

Wait for Responses with Page.waitForResponse()

// Use a RegExp
Response response = page.waitForResponse(Pattern.compile("\\.jpeg$"), () -> {
  page.getByText("Update").click();
});

// Use a predicate taking a Response object
Response response = page.waitForResponse(r -> r.url().contains(token), () -> {
  page.getByText("Update").click();
});

Handle requests​

page.route("**/api/fetch_data", route -> route.fulfill(new Route.FulfillOptions()
  .setStatus(200)
  .setBody(testData)));
page.navigate("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.

browserContext.route("**/api/login", route -> route.fulfill(new Route.FulfillOptions()
  .setStatus(200)
  .setBody("accept")));
page.navigate("https://example.com");

Modify requests​

// Delete header
page.route("**/*", route -> {
  Map<String, String> headers = new HashMap<>(route.request().headers());
  headers.remove("X-Secret");
    route.resume(new Route.ResumeOptions().setHeaders(headers));
});

// Continue requests as POST.
page.route("**/*", route -> route.resume(new Route.ResumeOptions().setMethod("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().

page.route("**/*.{png,jpg,jpeg}", route -> route.abort());

// Abort based on the request type
page.route("**/*", route -> {
  if ("image".equals(route.request().resourceType()))
    route.abort();
  else
    route.resume();
});

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:

page.route("**/title.html", route -> {
  // Fetch original response.
  APIResponse response = route.fetch();
  // Add a prefix to the title.
  String body = response.text();
  body = body.replace("<title>", "<title>My prefix:");
  Map<String, String> headers = response.headers();
  headers.put("content-type", "text/html");
  route.fulfill(new Route.FulfillOptions()
    // Pass all fields from the response.
    .setResponse(response)
    // Override response body.
    .setBody(body)
    // Force content type to be html.
    .setHeaders(headers));
});

Glob URL patterns​

Playwright uses simplified glob patterns for URL matching in network interception methods like Page.route() or Page.waitForResponse(). These patterns support basic wildcards:

  1. Asterisks:
    • A single * matches any characters except /
    • A double ** matches any characters including /
  2. Question mark ? matches only question mark ?. If you want to match any character, use * instead.
  3. Curly braces {} can be used to match a list of options separated by commas ,
  4. Backslash \ can be used to escape any of special characters (note to escape backslash itself as \\)

Examples:

  • https://example.com/*.js matches https://example.com/file.js but not https://example.com/path/file.js
  • https://example.com/?page=1 matches https://example.com/?page=1 but not https://example.com
  • **/*.js matches both https://example.com/file.js and https://example.com/path/file.js
  • **/*.{png,jpg,jpeg} matches all image requests

Important notes:

  • The glob pattern must match the entire URL, not just a part of it.
  • When using globs for URL matching, consider the full URL structure, including the protocol and path separators.
  • For more complex matching requirements, consider using [RegExp] instead of glob patterns.

WebSockets​

Playwright supports WebSockets inspection, mocking and modifying out of the box. See our API mocking guide to learn how to mock WebSockets.

Every time a WebSocket is created, the Page.onWebSocket(handler) event is fired. This event contains the WebSocket instance for further web socket frames inspection:

page.onWebSocket(ws -> {
  log("WebSocket opened: " + ws.url());
  ws.onFrameSent(frameData -> log(frameData.text()));
  ws.onFrameReceived(frameData -> log(frameData.text()));
  ws.onClose(ws1 -> 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 setServiceWorkers 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.