ネットワーク

概要

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

API のモック

詳細については、API モックガイドをご覧ください。

• API リクエストをモックして、API にアクセスしないようにする
• API リクエストを実行して、レスポンスを変更する
• HAR ファイルを使用してネットワークリクエストをモックする。

HTTP 認証

HTTP 認証を実行します。

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setHttpCredentials("bill", "pa55w0rd"));
Page page = context.newPage();
page.navigate("https://example.com");

HTTP プロキシ

ページが HTTP(S) プロキシまたは SOCKSv5 経由でロードするように設定できます。プロキシは、ブラウザ全体に対してグローバルに設定することも、ブラウザコンテキストごとに個別に設定することもできます。

HTTP(S) プロキシのユーザー名とパスワードをオプションで指定したり、setProxy をバイパスするホストを指定したりすることもできます。

グローバルプロキシの例を次に示します。

Browser browser = chromium.launch(new BrowserType.LaunchOptions()
  .setProxy(new Proxy("http://myproxy.com:3128")
  .setUsername("usr")
  .setPassword("pwd")));

コンテキストごとに指定することも可能です。

Browser browser = chromium.launch();
BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setProxy(new Proxy("http://myproxy.com:3128")));

ネットワークイベント

すべてのリクエストとレスポンスを監視できます。

import com.microsoft.playwright.*;

public class Example {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      BrowserType chromium = playwright.chromium();
      Browser browser = chromium.launch();
      Page page = browser.newPage();
      page.onRequest(request -> System.out.println(">> " + request.method() + " " + request.url()));
      page.onResponse(response -> System.out.println("<<" + response.status() + " " + response.url()));
      page.navigate("https://example.com");
      browser.close();
    }
  }
}

または、Page.waitForResponse() を使用してボタンクリック後のネットワークレスポンスを待機します。

// Use a glob URL pattern
Response response = page.waitForResponse("**/api/fetch_data", () -> {
  page.getByText("Update").click();
});

バリエーション

レスポンスを Page.waitForResponse() で待機します。

// Use a RegExp
Response response = page.waitForResponse(Pattern.compile("\\.jpeg$"), () -> {
  page.getByText("Update").click();
});

// Use a predicate taking a Response object
Response response = page.waitForResponse(r -> r.url().contains(token), () -> {
  page.getByText("Update").click();
});

リクエストの処理

page.route("**/api/fetch_data", route -> route.fulfill(new Route.FulfillOptions()
  .setStatus(200)
  .setBody(testData)));
page.navigate("https://example.com");

Playwright スクリプトでネットワークリクエストを処理することにより、API エンドポイントをモックできます。

バリエーション

BrowserContext.route() または Page.route() を使用して、ブラウザコンテキスト全体にルートを設定します。これは、ポップアップウィンドウと開かれたリンクに適用されます。

browserContext.route("**/api/login", route -> route.fulfill(new Route.FulfillOptions()
  .setStatus(200)
  .setBody("accept")));
page.navigate("https://example.com");

リクエストの変更

// Delete header
page.route("**/*", route -> {
  Map<String, String> headers = new HashMap<>(route.request().headers());
  headers.remove("X-Secret");
    route.resume(new Route.ResumeOptions().setHeaders(headers));
});

// Continue requests as POST.
page.route("**/*", route -> route.resume(new Route.ResumeOptions().setMethod("POST")));

変更を加えたリクエストを続行できます。上記の例では、送信リクエストから HTTP ヘッダーを削除しています。

リクエストの中止

Page.route() と Route.abort() を使用してリクエストを中止できます。

page.route("**/*.{png,jpg,jpeg}", route -> route.abort());

// Abort based on the request type
page.route("**/*", route -> {
  if ("image".equals(route.request().resourceType()))
    route.abort();
  else
    route.resume();
});

レスポンスの変更

レスポンスを変更するには、APIRequestContext を使用して元のレスポンスを取得し、そのレスポンスを Route.fulfill() に渡します。オプションを介してレスポンスの個々のフィールドをオーバーライドできます。

page.route("**/title.html", route -> {
  // Fetch original response.
  APIResponse response = route.fetch();
  // Add a prefix to the title.
  String body = response.text();
  body = body.replace("<title>", "<title>My prefix:");
  Map<String, String> headers = response.headers();
  headers.put("content-type", "text/html");
  route.fulfill(new Route.FulfillOptions()
    // Pass all fields from the response.
    .setResponse(response)
    // Override response body.
    .setBody(body)
    // Force content type to be html.
    .setHeaders(headers));
});

Glob URL パターン

Playwright は、Page.route() や Page.waitForResponse() などのネットワークインターセプトメソッドで 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.onWebSocket(handler) イベントが発生します。このイベントには、Web ソケットフレームのさらなる検査のための WebSocket インスタンスが含まれています。

page.onWebSocket(ws -> {
  log("WebSocket opened: " + ws.url());
  ws.onFrameSent(frameData -> log(frameData.text()));
  ws.onFrameReceived(frameData -> log(frameData.text()));
  ws.onClose(ws1 -> log("WebSocket closed"));
});

ネットワークイベントとサービスワーカーの欠落

Playwright の組み込みの BrowserContext.route() と Page.route() を使用すると、テストでリクエストをネイティブにルーティングし、モックとインターセプトを実行できます。

1. Playwright のネイティブ BrowserContext.route() と Page.route() を使用していて、ネットワークイベントが欠落しているように見える場合は、setServiceWorkers を 'block' に設定してサービスワーカーを無効にしてください。
2. Mock Service Worker (MSW) などのモックツールを使用している可能性があります。このツールはレスポンスのモックにはすぐに使用できますが、ネットワークリクエストを引き継ぐ独自のサービスワーカーを追加するため、BrowserContext.route() と Page.route() から見えなくなります。ネットワークテストとモックの両方に関心がある場合は、組み込みの BrowserContext.route() と Page.route() を レスポンスモックに使用することを検討してください。
3. サービスワーカーをテストとネットワークモックに単独で使用するだけでなく、サービスワーカー自体が行うリクエストのルーティングとリスニングに関心がある場合は、この実験的機能を参照してください。