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

ネットワーク

はじめに​

Playwrightは、HTTPとHTTPSの両方でブラウザのネットワークトラフィックを監視および変更するためのAPIを提供します。ページが行うすべてのリクエスト（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)プロキシのユーザー名とパスワードを指定できます。また、プロキシをバイパスするホストを指定することもできます。

以下はグローバルプロキシの例です。

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

  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.jsとhttps://example.com/path/file.jsの両方に一致します。
  • **/*.{png,jpg,jpeg}はすべての画像リクエストに一致します。

重要な注意事項

  • globパターンは、URL全体に一致する必要があり、その一部に一致するだけではいけません。
  • URLマッチングにglobを使用する場合、プロトコルとパスセパレータを含む完全なURL構造を考慮してください。
  • より複雑なマッチング要件には、globパターンではなく[RegExp]の使用を検討してください。

WebSockets​

Playwrightは、WebSocketsの検査、モック、および変更をすぐに利用できます。APIモックガイドを参照して、WebSocketsをモックする方法を学びましょう。

WebSocketが作成されるたびに、Page.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'に設定してサービスワーカーを無効にしてください。
  2. Mock Service Worker (MSW)のようなモックツールを使用している可能性があります。このツールはレスポンスのモックにはすぐに利用できますが、独自のサービスワーカーを追加し、それがネットワークリクエストを乗っ取るため、BrowserContext.RouteAsync()とPage.RouteAsync()からは見えなくなります。ネットワークテストとモックの両方に興味がある場合は、組み込みのBrowserContext.RouteAsync()とPage.RouteAsync()をレスポンスモックに使用することを検討してください。
  3. テストやネットワークモックのためだけにサービスワーカーを使用するだけでなく、サービスワーカー自身によって行われたリクエストのルーティングとリッスンに興味がある場合は、この実験的な機能を参照してください。