跳至主要内容

Network

简介​

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

模拟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)代理指定用户名和密码，也可以指定绕过Proxy的主机。

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

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

网络事件​

您可以监控所有的Request请求和Response响应：

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()等待Response响应

// 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,
    });
});

全局URL模式​

Playwright在网络拦截方法（如Page.RouteAsync()或Page.RunAndWaitForResponseAsync()）中使用简化的glob模式进行URL匹配。这些模式支持基本通配符：

  1. Asterisks:
    • 单个 * 匹配除 / 外的任何字符
    • 双星号 ** 可以匹配包括 / 在内的任何字符
  2. 问号 ? 匹配除 / 外的任意单个字符
  3. 大括号 {} 可用于匹配由逗号 , 分隔的选项列表
  4. 方括号 [] 可用于匹配一组字符
  5. 反斜杠 \ 可用于转义任何特殊字符（注意反斜杠本身需要用 \\ 转义）

示例：

  • 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
  • **/v[0-9]* 匹配 https://example.com/v1/ 但不匹配 https://example.com/vote/
  • **/*.js 匹配 https://example.com/file.js 和 https://example.com/path/file.js
  • **/*.{png,jpg,jpeg} 匹配所有图片请求

重要说明：

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

WebSockets​

Playwright 支持开箱即用的WebSockets检查、模拟和修改。请参阅我们的API mocking guide了解如何模拟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");
};

缺失的网络事件与服务工作者​

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

  1. 如果您正在使用Playwright的原生BrowserContext.RouteAsync()和Page.RouteAsync()，并且发现网络事件似乎缺失，可以通过将ServiceWorkers设置为'block'来禁用Service Workers。
  2. 可能是您正在使用像Mock Service Worker (MSW)这样的模拟工具。虽然该工具开箱即用可以模拟响应，但它会添加自己的Service Worker来接管网络请求，从而使这些请求对BrowserContext.RouteAsync()和Page.RouteAsync()不可见。如果您同时关注网络测试和模拟，可以考虑使用内置的BrowserContext.RouteAsync()和Page.RouteAsync()进行response mocking。
  3. 如果您不仅对使用Service Workers进行测试和网络模拟感兴趣，还想了解如何路由和监听由Service Workers自身发出的请求，请参阅此实验性功能。