跳到主要内容

网络

简介

Playwright 提供了用于监控修改浏览器网络流量(包括 HTTP 和 HTTPS)的 API。页面发起的任何请求,包括 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")));

网络事件

你可以监控所有的 [请求](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() 在点击按钮后等待网络响应:

// 使用通配符 URL 模式
Response response = page.waitForResponse("**/api/fetch_data", () -> {
page.getByText("Update").click();
});

变体

使用 Page.waitForResponse() 等待 [响应](Response

// 使用正则表达式
Response response = page.waitForResponse(Pattern.compile("\\.jpeg$"), () -> {
page.getByText("Update").click();
});

// 使用接受 Response 对象的谓词
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");

修改请求

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

// 以 POST 方式继续请求。
page.route("**/*", route -> route.resume(new Route.ResumeOptions().setMethod("POST")));

你可以带着修改继续请求。上面的示例从传出请求中删除了一个 HTTP 标头。

中止请求

你可以使用 Page.route()Route.abort() 中止请求。

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

// 根据请求类型中止
page.route("**/*", route -> {
if ("image".equals(route.request().resourceType()))
route.abort();
else
route.resume();
});

修改响应

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

page.route("**/title.html", route -> {
// 获取原始响应。
APIResponse response = route.fetch();
// 给标题添加前缀。
String body = response.text();
body = body.replace("<title>", "<title>我的前缀:");
Map<String, String> headers = response.headers();
headers.put("content-type", "text/html");
route.fulfill(new Route.FulfillOptions()
// 传递响应中的所有字段。
.setResponse(response)
// 覆盖响应正文。
.setBody(body)
// 强制内容类型为 html。
.setHeaders(headers));
});

全局 URL 模式

Playwright 在诸如 Page.route()Page.waitForResponse() 等网络拦截方法中,使用简化的全局模式来匹配 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} 匹配所有图像请求

重要说明:

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

WebSockets

Playwright 原生支持 WebSockets 检查、模拟和修改。有关如何模拟 WebSockets 的信息,请参阅我们的 API 模拟指南

每次创建 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"));
});

缺少网络事件和 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 自身发出的请求感兴趣,请参阅 此实验性功能