メインコンテンツにスキップ

ネットワーク

イントロダクション​

Playwright は、ブラウザのネットワークトラフィック (HTTP および HTTPS) を監視および変更するための API を提供します。ページが行うすべてのリクエスト (XHR および fetch リクエストを含む) は、追跡、変更、および処理できます。

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

ネットワークイベント​

すべての 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() などのネットワーク傍受メソッドでの URL マッチングに、簡略化された glob パターンを使用します。これらのパターンは基本的なワイルドカードをサポートしています。

  1. アスタリスク
    • 単一のアスタリスク * は、/ を除く任意の文字に一致します。
    • 二重アスタリスク ** は、/ を含む任意の文字に一致します。
  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 マッチングに glob を使用する場合は、プロトコルやパス区切り文字など、完全な URL 構造を考慮してください。
  • より複雑なマッチング要件については、glob パターンではなく [RegExp] の使用を検討してください。

WebSockets​

Playwright は、WebSockets の検査、モック、および変更を標準でサポートしています。WebSockets をモックする方法については、API モックガイド を参照してください。

WebSocket が作成されるたびに、Page.WebSocket イベントが発生します。このイベントには、Web ソケットフレームのさらなる検査のための 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() を使用すると、テストでリクエストをネイティブにルーティングし、モックと傍受を実行できます。

  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() を レスポンスのモック に使用することを検討してください。
  3. テストとネットワークモックに Service Workers を単独で使用するのではなく、Service Workers 自体が行うリクエストのルーティングとリスニングに関心がある場合は、この実験的な機能 を参照してください。