跳到主要内容

网络

简介

Playwright 提供了 API 来监控修改浏览器网络流量,包括 HTTP 和 HTTPS。页面发出的任何请求,包括 XHRfetch 请求,都可以被跟踪、修改和处理。

模拟 API

查看我们的 API 模拟指南,以了解更多关于如何

  • 模拟 API 请求,永不实际访问 API
  • 执行 API 请求并修改响应
  • 使用 HAR 文件来模拟网络请求。

HTTP 认证

执行 HTTP 认证。

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

HTTP 代理

您可以配置页面通过 HTTP(S) 代理或 SOCKSv5 加载。代理可以全局设置用于整个浏览器,也可以为每个浏览器上下文单独设置。

您可以选择为 HTTP(S) 代理指定用户名和密码,也可以指定主机来绕过 setProxy 设置。

这是一个全局代理的示例

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

也可以为每个上下文单独指定

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

网络事件

您可以监控所有的 请求响应

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();
}
}
}

或者在按钮点击后等待网络响应,使用 Page.waitForResponse()

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

变体

等待 响应,使用 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();
});

处理请求

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

您可以通过在 Playwright 脚本中处理网络请求来模拟 API 端点。

变体

使用 BrowserContext.route() 在整个浏览器上下文中设置路由,或使用 Page.route() 在页面中设置路由。它将应用于弹出窗口和打开的链接。

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

修改请求

// 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")));

您可以继续请求并进行修改。上面的示例从传出的请求中删除了一个 HTTP 标头。

中止请求

您可以使用 Page.route()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();
});

修改响应

要修改响应,请使用 APIRequestContext 获取原始响应,然后将响应传递给 Route.fulfill()。您可以通过选项覆盖响应上的各个字段

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 模式

Playwright 在网络拦截方法(如 Page.route()Page.waitForResponse())中,为 URL 匹配使用了简化的 glob 模式。这些模式支持基本通配符

  1. 星号
    • 单个 * 匹配除 / 之外的任何字符
    • ** 匹配包括 / 在内的任何字符
  2. 问号 ? 匹配除 / 之外的任何单个字符
  3. 花括号 {} 可以用于匹配以逗号 , 分隔的选项列表

示例

  • https://example.com/*.js 匹配 https://example.com/file.js,但不匹配 https://example.com/path/file.js
  • **/*.js 同时匹配 https://example.com/file.jshttps://example.com/path/file.js
  • **/*.{png,jpg,jpeg} 匹配所有图像请求

重要提示

  • glob 模式必须匹配整个 URL,而不仅仅是 URL 的一部分。
  • 当使用 glob 进行 URL 匹配时,请考虑完整的 URL 结构,包括协议和路径分隔符。
  • 对于更复杂的匹配要求,请考虑使用 [RegExp] 而不是 glob 模式。

WebSockets

Playwright 开箱即用地支持 WebSockets 的检查、模拟和修改。请参阅我们的 API 模拟指南,了解如何模拟 WebSockets。

每次创建 WebSocket 时,都会触发 Page.onWebSocket(handler) 事件。此事件包含 WebSocket 实例,用于进一步的 WebSocket 帧检查

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"));
});

缺失的网络事件和服务 Workers

Playwright 内置的 BrowserContext.route()Page.route() 允许您的测试原生路由请求并执行模拟和拦截。

  1. 如果您正在使用 Playwright 的原生 BrowserContext.route()Page.route(),并且似乎缺少网络事件,请通过将 setServiceWorkers 设置为 'block' 来禁用 Service Workers。
  2. 可能是您正在使用 Mock Service Worker (MSW) 等模拟工具。虽然此工具可以开箱即用地用于模拟响应,但它会添加自己的 Service Worker 来接管网络请求,从而使其对 BrowserContext.route()Page.route() 不可见。如果您对网络测试和模拟都感兴趣,请考虑使用内置的 BrowserContext.route()Page.route() 进行 响应模拟
  3. 如果您不仅对使用 Service Workers 进行测试和网络模拟感兴趣,而且对路由和监听 Service Workers 本身发出的请求感兴趣,请参阅 此实验性功能