2021-01-01 15:17:27 -08:00
---
id: network
title: "Network"
---
2020-12-30 18:04:51 -08:00
2021-01-14 15:01:39 -08:00
Playwright provides APIs to **monitor** and **modify** network traffic, both HTTP and HTTPS. Any requests that page
does, including [XHRs ](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest ) and
2020-12-30 18:04:51 -08:00
[fetch ](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API ) requests, can be tracked, modified and handled.
2021-01-01 15:17:27 -08:00
<!-- TOC -->
2020-12-30 18:04:51 -08:00
< br / >
## HTTP Authentication
```js
const context = await browser.newContext({
httpCredentials: {
username: 'bill',
password: 'pa55w0rd',
},
});
const page = await context.newPage();
await page.goto('https://example.com');
```
2021-03-01 09:18:44 -08:00
```java
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
2021-03-05 13:50:34 -08:00
.setHttpCredentials("bill", "pa55w0rd"));
2021-03-01 09:18:44 -08:00
Page page = context.newPage();
page.navigate("https://example.com");
```
2021-01-14 15:01:39 -08:00
```python async
context = await browser.new_context(
http_credentials={"username": "bill", "password": "pa55w0rd"}
)
page = await context.new_page()
await page.goto("https://example.com")
```
```python sync
context = browser.new_context(
http_credentials={"username": "bill", "password": "pa55w0rd"}
)
page = context.new_page()
page.goto("https://example.com")
```
2020-12-30 18:04:51 -08:00
2021-05-14 23:22:30 -07:00
```csharp
2021-05-19 17:19:25 -07:00
using var context = await Browser.NewContextAsync(new BrowserNewContextOptions
2021-05-14 23:22:30 -07:00
{
HttpCredentials = new HttpCredentials
{
Username = "bill",
Password = "pa55w0rd"
},
});
var page = await context.NewPageAsync();
await page.GotoAsync("https://example.com");
```
2021-01-17 21:09:40 -08:00
### API reference
2020-12-30 18:04:51 -08:00
- [`method: Browser.newContext` ]
2021-03-01 20:14:19 -08:00
## 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:
```js
const browser = await chromium.launch({
proxy: {
server: 'http://myproxy.com:3128',
2021-05-24 18:35:58 +02:00
username: 'usr',
2021-03-01 20:14:19 -08:00
password: 'pwd'
}
});
```
```java
Browser browser = chromium.launch(new BrowserType.LaunchOptions()
2021-03-05 13:50:34 -08:00
.setProxy(new Proxy("http://myproxy.com:3128")
.setUsername('usr')
.setPassword('pwd'));
2021-03-01 20:14:19 -08:00
```
```python async
browser = await chromium.launch(proxy={
"server": "http://myproxy.com:3128",
2021-05-24 18:35:58 +02:00
"username": "usr",
2021-03-01 20:14:19 -08:00
"password": "pwd"
})
```
```python sync
browser = chromium.launch(proxy={
"server": "http://myproxy.com:3128",
2021-05-24 18:35:58 +02:00
"username": "usr",
2021-03-01 20:14:19 -08:00
"password": "pwd"
})
```
2021-05-14 23:22:30 -07:00
```csharp
var proxy = new Proxy
{
Server = "http://myproxy.com:3128",
Username = "user",
Password = "pwd"
};
2021-05-19 17:19:25 -07:00
await using var browser = await BrowserType.LaunchAsync(new BrowserTypeLaunchOptions
{
Proxy = proxy
});
2021-05-14 23:22:30 -07:00
```
2021-10-25 16:32:09 -07:00
When specifying proxy for each context individually, **Chromium on Windows** needs 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:
2021-03-01 20:14:19 -08:00
```js
const browser = await chromium.launch({
2021-10-25 16:32:09 -07:00
// Browser proxy option is required for Chromium on Windows.
2021-03-01 20:14:19 -08:00
proxy: { server: 'per-context' }
});
const context = await browser.newContext({
proxy: { server: 'http://myproxy.com:3128' }
})
```
```java
Browser browser = chromium.launch(new BrowserType.LaunchOptions()
2021-10-25 16:32:09 -07:00
// Browser proxy option is required for Chromium on Windows.
2021-03-05 13:50:34 -08:00
.setProxy(new Proxy("per-context"));
2021-03-01 20:14:19 -08:00
BrowserContext context = chromium.launch(new Browser.NewContextOptions()
2021-03-05 13:50:34 -08:00
.setProxy(new Proxy("http://myproxy.com:3128"));
2021-03-01 20:14:19 -08:00
```
```python async
2021-10-25 16:32:09 -07:00
# Browser proxy option is required for Chromium on Windows.
2021-03-01 20:14:19 -08:00
browser = await chromium.launch(proxy={"server": "per-context"})
context = await browser.new_context(proxy={"server": "http://myproxy.com:3128"})
```
```python sync
2021-10-25 16:32:09 -07:00
# Browser proxy option is required for Chromium on Windows.
2021-03-01 20:14:19 -08:00
browser = chromium.launch(proxy={"server": "per-context"})
context = browser.new_context(proxy={"server": "http://myproxy.com:3128"})
```
2021-05-14 23:22:30 -07:00
```csharp
var proxy = new Proxy { Server = "per-context" };
2021-05-19 17:19:25 -07:00
await using var browser = await BrowserType.LaunchAsync(new BrowserTypeLaunchOptions
{
2021-10-25 16:32:09 -07:00
// Browser proxy option is required for Chromium on Windows.
2021-05-19 17:19:25 -07:00
Proxy = proxy
});
using var context = await Browser.NewContextAsync(new BrowserNewContextOptions
{
Proxy = new Proxy { Server = "http://myproxy.com:3128" })
});
2021-05-14 23:22:30 -07:00
```
2020-12-30 18:04:51 -08:00
## Network events
You can monitor all the requests and responses:
```js
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();
})();
```
2021-03-01 09:18:44 -08:00
```java
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();
}
}
}
```
2021-01-14 15:01:39 -08:00
```python async
import asyncio
from playwright.async_api import async_playwright
async def run(playwright):
chromium = playwright.chromium
browser = await chromium.launch()
page = await browser.new_page()
# Subscribe to "request" and "response" events.
page.on("request", lambda request: print(">>", request.method, request.url))
page.on("response", lambda response: print("< < ", response.status, response.url))
await page.goto("https://example.com")
await browser.close()
async def main():
async with async_playwright() as playwright:
await run(playwright)
asyncio.run(main())
```
```python sync
from playwright.sync_api import sync_playwright
def run(playwright):
chromium = playwright.chromium
browser = chromium.launch()
page = browser.new_page()
# Subscribe to "request" and "response" events.
page.on("request", lambda request: print(">>", request.method, request.url))
page.on("response", lambda response: print("< < ", response.status, response.url))
page.goto("https://example.com")
browser.close()
with sync_playwright() as playwright:
run(playwright)
```
2021-05-14 23:22:30 -07:00
```csharp
using Microsoft.Playwright;
2022-04-19 21:23:26 +03:00
using var playwright = await Playwright.CreateAsync();
await using var browser = await playwright.Chromium.LaunchAsync();
var page = await browser.NewPageAsync();
page.Request += (_, request) => Console.WriteLine(">> " + request.Method + " " + request.Url);
page.Response += (_, response) => Console.WriteLine("< < " + response.Status + " " + response.Url);
await page.GotoAsync("https://example.com");
2021-05-14 23:22:30 -07:00
```
2020-12-30 18:04:51 -08:00
Or wait for a network response after the button click:
```js
// Use a glob URL pattern
const [response] = await Promise.all([
page.waitForResponse('**/api/fetch_data'),
page.click('button#update '),
]);
```
2021-03-01 09:18:44 -08:00
```java
// Use a glob URL pattern
Response response = page.waitForResponse("**/api/fetch_data", () -> {
page.click("button#update ");
});
```
2021-01-14 15:01:39 -08:00
```python async
# Use a glob url pattern
async with page.expect_response("**/api/fetch_data") as response_info:
await page.click("button#update ")
response = await response_info.value
```
```python sync
# Use a glob url pattern
with page.expect_response("**/api/fetch_data") as response_info:
page.click("button#update ")
response = response_info.value
```
2021-05-14 23:22:30 -07:00
```csharp
// Use a glob URL pattern
2021-05-15 11:57:20 -07:00
var waitForResponseTask = page.WaitForResponseAsync("**/api/fetch_data");
2021-05-15 14:02:07 -07:00
await page.ClickAsync("button#update ");
var response = await waitForResponseTask;
2021-05-14 23:22:30 -07:00
```
2020-12-30 18:04:51 -08:00
#### Variations
```js
// 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 '),
]);
```
2021-03-01 09:18:44 -08:00
```java
// Use a RegExp
Response response = page.waitForResponse(Pattern.compile("\\.jpeg$"), () -> {
page.click("button#update ");
});
// Use a predicate taking a Response object
Response response = page.waitForResponse(r -> r.url().contains(token), () -> {
page.click("button#update ");
});
```
2021-01-14 15:01:39 -08:00
```python async
2021-01-15 16:01:41 -08:00
# Use a regular expression
2021-01-14 15:01:39 -08:00
async with page.expect_response(re.compile(r"\.jpeg$")) as response_info:
await page.click("button#update ")
response = await response_info.value
# Use a predicate taking a response object
async with page.expect_response(lambda response: token in response.url) as response_info:
await page.click("button#update ")
response = await response_info.value
```
```python sync
2021-01-15 16:01:41 -08:00
# Use a regular expression
2021-01-14 15:01:39 -08:00
with page.expect_response(re.compile(r"\.jpeg$")) as response_info:
page.click("button#update ")
response = response_info.value
2020-12-30 18:04:51 -08:00
2021-01-14 15:01:39 -08:00
# Use a predicate taking a response object
with page.expect_response(lambda response: token in response.url) as response_info:
page.click("button#update ")
response = response_info.value
```
2021-05-14 23:22:30 -07:00
```csharp
// Use a regular expression
2021-05-15 11:57:20 -07:00
var waitForResponseTask = page.WaitForResponseAsync(new Regex("\\.jpeg$"));
2021-05-15 14:02:07 -07:00
await page.ClickAsync("button#update ");
var response = await waitForResponseTask;
2021-05-14 23:22:30 -07:00
// Use a predicate taking a Response object
2021-05-15 11:57:20 -07:00
var waitForResponseTask = page.WaitForResponseAsync(r => r.Url.Contains(token));
2021-05-15 14:02:07 -07:00
await page.ClickAsync("button#update ");
var response = await waitForResponseTask;
2021-05-14 23:22:30 -07:00
```
2021-01-17 21:09:40 -08:00
### API reference
2020-12-30 18:04:51 -08:00
- [Request]
- [Response]
- [`event: Page.request` ]
- [`event: Page.response` ]
- [`method: Page.waitForRequest` ]
- [`method: Page.waitForResponse` ]
< br / >
## Handle requests
```js
await page.route('**/api/fetch_data', route => route.fulfill({
status: 200,
body: testData,
}));
await page.goto('https://example.com');
```
2021-03-01 09:18:44 -08:00
```java
page.route("**/api/fetch_data", route -> route.fulfill(new Route.FulfillOptions()
2021-03-05 13:50:34 -08:00
.setStatus(200)
.setBody(testData)));
2021-03-01 09:18:44 -08:00
page.navigate("https://example.com");
```
2021-01-14 15:01:39 -08:00
```python async
await page.route(
"**/api/fetch_data",
lambda route: route.fulfill(status=200, body=test_data))
await page.goto("https://example.com")
```
```python sync
page.route(
"**/api/fetch_data",
lambda route: route.fulfill(status=200, body=test_data))
page.goto("https://example.com")
```
2022-01-26 18:54:01 +01:00
You can mock API endpoints via handling the network requests in your Playwright script.
2020-12-30 18:04:51 -08:00
#### Variations
```js
// 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');
```
2021-03-01 09:18:44 -08:00
```java
browserContext.route("**/api/login", route -> route.fulfill(new Route.FulfillOptions()
2021-03-05 13:50:34 -08:00
.setStatus(200)
.setBody("accept")));
2021-03-01 09:18:44 -08:00
page.navigate("https://example.com");
```
2021-01-14 15:01:39 -08:00
```python async
# Set up route on the entire browser context.
# It will apply to popup windows and opened links.
await context.route(
"**/api/login",
lambda route: route.fulfill(status=200, body="accept"))
await page.goto("https://example.com")
```
```python sync
# Set up route on the entire browser context.
# It will apply to popup windows and opened links.
context.route(
"**/api/login",
lambda route: route.fulfill(status=200, body="accept"))
page.goto("https://example.com")
```
2020-12-30 18:04:51 -08:00
2021-05-14 23:22:30 -07:00
```csharp
await page.RouteAsync("**/api/fetch_data", async route => {
await route.FulfillAsync(status: 200, body: testData);
});
await page.GotoAsync("https://example.com");
```
2021-01-17 21:09:40 -08:00
### API reference
2020-12-30 18:04:51 -08:00
- [`method: BrowserContext.route` ]
- [`method: BrowserContext.unroute` ]
- [`method: Page.route` ]
- [`method: Page.unroute` ]
- [Route]
< br / >
## Modify requests
```js
// Delete header
await 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'}));
```
2021-03-01 09:18:44 -08:00
```java
// Delete header
page.route("**/*", route -> {
Map< String , String > headers = new HashMap< >(route.request().headers());
headers.remove("X-Secret");
2021-03-05 13:50:34 -08:00
route.resume(new Route.ResumeOptions().setHeaders(headers));
2021-03-01 09:18:44 -08:00
});
// Continue requests as POST.
2021-03-05 13:50:34 -08:00
page.route("**/*", route -> route.resume(new Route.ResumeOptions().setMethod("POST")));
2021-03-01 09:18:44 -08:00
```
2021-01-14 15:01:39 -08:00
```python async
# Delete header
async def handle_route(route):
headers = route.request.headers
del headers["x-secret"]
route.continue_(headers=headers)
await page.route("**/*", handle_route)
# Continue requests as POST.
await page.route("**/*", lambda route: route.continue_(method="POST"))
```
```python sync
# Delete header
def handle_route(route):
headers = route.request.headers
del headers["x-secret"]
route.continue_(headers=headers)
page.route("**/*", handle_route)
# Continue requests as POST.
page.route("**/*", lambda route: route.continue_(method="POST"))
```
2021-05-14 23:22:30 -07:00
```csharp
// Delete header
await page.RouteAsync("**/*", async route => {
var headers = new Dictionary< string , string > (route.Request.Headers.ToDictionary(x => x.Key, x => x.Value));
headers.Remove("X-Secret");
2021-05-19 17:19:25 -07:00
await route.ContinueAsync(new RouteContinueOptions { Headers = headers });
2021-05-14 23:22:30 -07:00
});
// Continue requests as POST.
2021-05-17 20:10:32 -07:00
await page.RouteAsync("**/*", async route => await route.ContinueAsync(method: "POST"));
2021-05-14 23:22:30 -07:00
```
2020-12-30 18:04:51 -08:00
You can continue requests with modifications. Example above removes an HTTP header from the outgoing requests.
## Abort requests
```js
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();
});
```
2021-03-01 09:18:44 -08:00
```java
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();
});
```
2021-01-14 15:01:39 -08:00
```python async
await page.route("**/*.{png,jpg,jpeg}", lambda route: route.abort())
2020-12-30 18:04:51 -08:00
2021-01-14 15:01:39 -08:00
# Abort based on the request type
await page.route("**/*", lambda route: route.abort() if route.request.resource_type == "image" else route.continue_())
```
```python sync
page.route("**/*.{png,jpg,jpeg}", lambda route: route.abort())
# Abort based on the request type
page.route("**/*", lambda route: route.abort() if route.request.resource_type == "image" else route.continue_())
```
2021-05-14 23:22:30 -07:00
```csharp
await page.RouteAsync("**/*.{png,jpg,jpeg}", route => route.AbortAsync());
// Abort based on the request type
await page.RouteAsync("**/*", async route => {
if ("image".Equals(route.Request.ResourceType))
await route.AbortAsync();
else
2021-05-17 20:10:32 -07:00
await route.ContinueAsync();
2021-05-14 23:22:30 -07:00
});
```
2021-01-17 21:09:40 -08:00
### API reference
2020-12-30 18:04:51 -08:00
- [`method: Page.route` ]
- [`method: BrowserContext.route` ]
- [`method: Route.abort` ]
2021-03-24 08:17:59 +08:00
< br / >
2021-10-18 17:53:06 -07:00
## Modify responses
2021-10-19 07:38:27 -07:00
To modify a response use [APIRequestContext] to get original response and then pass the response to [`method: Route.fulfill` ].
2022-04-18 22:29:16 +03:00
You can override individual fields on the response via options:
2021-10-18 17:53:06 -07:00
```js
await page.route('**/title.html', async route => {
// Fetch original response.
const response = await page.request.fetch(route.request());
// Add a prefix to the title.
let body = await response.text();
body = body.replace('< title > ', '< title > My prefix:');
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'
}
});
});
```
2022-06-02 23:12:09 +02:00
```java
page.route("**/title.html", route -> {
// Fetch original response.
APIResponse response = page.request().fetch(route.request());
// 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));
});
```
```python async
async def handle_route(route: Route) -> None:
# Fetch original response.
response = await page.request.fetch(route.request)
# Add a prefix to the title.
body = await response.text()
body = body.replace("< title > ", "< title > My prefix:")
await route.fulfill(
# Pass all fields from the response.
response=response,
# Override response body.
body=body,
# Force content type to be html.
headers={**response.headers, "content-type": "text/html"},
)
await page.route("**/title.html", handle_route)
```
```python sync
def handle_route(route: Route) -> None:
# Fetch original response.
response = page.request.fetch(route.request)
# Add a prefix to the title.
body = response.text()
body = body.replace("< title > ", "< title > My prefix:")
route.fulfill(
# Pass all fields from the response.
response=response,
# Override response body.
body=body,
# Force content type to be html.
headers={**response.headers, "content-type": "text/html"},
)
page.route("**/title.html", handle_route)
```
```csharp
await Page.RouteAsync("**/title.html", async route =>
{
// Fetch original response.
var response = await Page.APIRequest.FetchAsync(route.Request);
// Add a prefix to the title.
var body = await response.TextAsync();
body = body.Replace("< title > ", "< title > My prefix:");
var headers = response.Headers;
headers.Add("Content-Type", "text/html");
await route.FulfillAsync(new()
{
// Pass all fields from the response.
Response = response,
// Override response body.
Body = body,
// Force content type to be html.
Headers = headers,
});
});
```
2021-10-18 17:53:06 -07:00
### API reference
2021-10-19 07:38:27 -07:00
- [APIRequestContext]
2021-10-18 17:53:06 -07:00
- [`method: Page.route` ]
- [`method: BrowserContext.route` ]
- [`property: Playwright.request` ]
- [`property: BrowserContext.request` ]
- [`property: Page.request` ]
- [`method: Route.fulfill` ]
< br / >
2021-03-24 08:17:59 +08:00
## WebSockets
Playwright supports [WebSockets ](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API ) inspection out of the
box. Every time WebSocket is created, [`event: Page.webSocket` ] event is fired. This event contains the [WebSocket]
instance for further web socket frames inspection:
```js
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'));
});
```
```java
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"));
});
```
```python
def on_web_socket(ws):
print(f"WebSocket opened: {ws.url}")
ws.on("framesent", lambda payload: print(payload))
ws.on("framereceived", lambda payload: print(payload))
ws.on("close", lambda payload: print("WebSocket closed"))
page.on("websocket", on_web_socket)
```
2021-05-14 23:22:30 -07:00
```csharp
2021-05-15 11:57:20 -07:00
page.WebSocket += (_, ws) =>
{
2021-05-14 23:22:30 -07:00
Console.WriteLine("WebSocket opened: " + ws.Url);
ws.FrameSent += (_, f) => Console.WriteLine(f.Text);
ws.FrameReceived += (_, f) => Console.WriteLine(f.Text);
ws.Close += (_, ws1) => Console.WriteLine("WebSocket closed");
};
```
2021-03-24 08:17:59 +08:00
### API reference
- [WebSocket]
- [`event: Page.webSocket` ]
- [`event: WebSocket.frameSent` ]
- [`event: WebSocket.frameReceived` ]
- [`event: WebSocket.close` ]
< br / >