跳到主要内容

网络

介绍

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

模拟 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")));

网络事件

您可以监控所有 请求(Request)响应(Response)

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

变体

使用 响应(Response)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())中使用简化的 glob 模式进行 URL 匹配。这些模式支持基本通配符

  1. 星号 (*)
    • 单个 * 匹配除 / 之外的任何字符
    • 双星号 ** 匹配包括 / 在内的任何字符
  2. 问号 ? 只匹配问号 ?。如果要匹配任何字符,请改用 *
  3. 花括号 {} 可用于匹配以逗号 , 分隔的选项列表
  4. 反斜杠 \ 可用于转义任何特殊字符(请注意将反斜杠本身转义为 \\

示例

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

重要说明

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

WebSockets

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

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

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

丢失的网络事件和 Service 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 本身发出的请求,请参阅此实验性功能