網路

簡介

Playwright 提供 API 來監控和修改瀏覽器網路流量，包括 HTTP 和 HTTPS。頁面執行的任何請求，包含 XHR 和 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,
    });
});

Glob URL 模式

Playwright 在網路攔截方法（例如 Page.RouteAsync() 或 Page.RunAndWaitForResponseAsync()）中使用簡化的 glob 模式進行 URL 比對。這些模式支援基本萬用字元

星號
- 單個 * 符號比對任何字元，除了 /
- 雙個 ** 符號比對任何字元，包含 /
問號 ? 比對任何單個字元，除了 /
大括號 {} 可以用來比對以逗號 , 分隔的選項列表

範例

https://example.com/*.js 比對 https://example.com/file.js 但不比對 https://example.com/path/file.js
**/*.js 比對 https://example.com/file.js 和 https://example.com/path/file.js
**/*.{png,jpg,jpeg} 比對所有圖片請求

重要注意事項

glob 模式必須比對整個 URL，而不僅僅是部分 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 Workers

Playwright 的內建 BrowserContext.RouteAsync() 和 Page.RouteAsync() 允許您的測試原生路由請求並執行模擬和攔截。

如果您正在使用 Playwright 的原生 BrowserContext.RouteAsync() 和 Page.RouteAsync()，並且網路事件似乎遺失，請透過將 ServiceWorkers 設定為 'block' 來停用 Service Workers。
可能是您正在使用模擬工具，例如 Mock Service Worker (MSW)。雖然此工具可以開箱即用地用於模擬回應，但它會新增自己的 Service Worker 來接管網路請求，因此使其對 BrowserContext.RouteAsync() 和 Page.RouteAsync() 不可見。如果您對網路測試和模擬都感興趣，請考慮使用內建的 BrowserContext.RouteAsync() 和 Page.RouteAsync() 進行回應模擬。
如果您不僅對使用 Service Workers 進行測試和網路模擬感興趣，而且對路由和監聽 Service Workers 本身發出的請求感興趣，請參閱此實驗性功能。

簡介​

模擬 API​

HTTP 驗證​

HTTP 代理伺服器​

網路事件​

變化​

處理請求​

變化​

修改請求​

中止請求​

修改回應​

Glob URL 模式​

WebSockets​

遺失的網路事件和 Service Workers​

簡介