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

ネットワーク

はじめに​

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 マッチングに簡略化されたグロブパターンを使用します。これらのパターンは基本的なワイルドカードをサポートしています。

  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全体に一致する必要があります。
  • URLマッチングにglobを使用する場合は、プロトコルやパスセパレータを含む完全なURL構造を考慮してください。
  • より複雑なマッチング要件には、グロブパターンではなく [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");
};

不足しているネットワークイベントとサービスワーカー​

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. テストやネットワークモックにサービスワーカーのみを使用するのではなく、サービスワーカー自体が行ったリクエストのルーティングとリッスンに興味がある場合は、この実験的な機能を参照してください。