跳到主要内容

网络

介绍

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

模拟 API

请查阅我们的API 模拟指南,了解如何

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

HTTP 身份验证

执行 HTTP 身份验证。

using var context = await Browser.NewContextAsync(new()
{
HttpCredentials = new HttpCredentials
{
Username = "bill",
Password = "pa55w0rd"
},
});
var page = await context.NewPageAsync();
await page.GotoAsync("https://example.com");

HTTP 代理

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

您可以选择为 HTTP(S) 代理指定用户名和密码,还可以指定要绕过此代理的主机。

这里是一个全局代理的示例

var proxy = new Proxy
{
Server = "http://myproxy.com:3128",
Username = "user",
Password = "pwd"
};
await using var browser = await BrowserType.LaunchAsync(new()
{
Proxy = proxy
});

也可以按上下文指定

await using var browser = await BrowserType.LaunchAsync();
await using var context = await browser.NewContextAsync(new()
{
Proxy = new Proxy { Server = "http://myproxy.com:3128" },
});

网络事件

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

using Microsoft.Playwright;

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

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

// Use a glob URL pattern
var waitForResponseTask = page.WaitForResponseAsync("**/api/fetch_data");
await page.GetByText("Update").ClickAsync();
var response = await waitForResponseTask;

变体

使用 Page.RunAndWaitForResponseAsync() 等待响应

// Use a regular expression
var waitForResponseTask = page.WaitForResponseAsync(new Regex("\\.jpeg$"));
await page.GetByText("Update").ClickAsync();
var response = await waitForResponseTask;

// Use a predicate taking a Response object
var waitForResponseTask = page.WaitForResponseAsync(r => r.Url.Contains(token));
await page.GetByText("Update").ClickAsync();
var response = await waitForResponseTask;

处理请求

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

变体

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

await page.RouteAsync("**/api/fetch_data", async route => {
await route.FulfillAsync(new() { Status = 200, Body = testData });
});
await page.GotoAsync("https://example.com");

修改请求

// 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");
await route.ContinueAsync(new() { Headers = headers });
});

// Continue requests as POST.
await Page.RouteAsync("**/*", async route => await route.ContinueAsync(new() { Method = "POST" }));

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

中止请求

您可以使用 Page.RouteAsync()Route.AbortAsync() 中止请求。

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
await route.ContinueAsync();
});

修改响应

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

await Page.RouteAsync("**/title.html", async route =>
{
// Fetch original response.
var response = await route.FetchAsync();
// 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,
});
});

Glob URL 模式

Playwright 在 Page.RouteAsync()Page.RunAndWaitForResponseAsync() 等网络拦截方法中使用简化的 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.WebSocket 事件。此事件包含用于进一步检查 WebSocket 帧的 WebSocket 实例

page.WebSocket += (_, ws) =>
{
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");
};

缺少的网络事件和 Service Worker

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

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