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

ネットワーク

はじめに​

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

APIのモック​

APIモックガイドで、以下の方法について詳しく学習してください。

  • APIリクエストをモックし、APIを呼び出さない
  • APIリクエストを実行し、レスポンスを変更する
  • HARファイルを使用してネットワークリクエストをモックする。

HTTP認証​

HTTP認証を実行します。

context = browser.new_context(
    http_credentials={"username": "bill", "password": "pa55w0rd"}
)
page = context.new_page()
page.goto("https://example.com")

HTTPプロキシ​

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

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

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

browser = chromium.launch(proxy={
  "server": "http://myproxy.com:3128",
  "username": "usr",
  "password": "pwd"
})

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

browser = chromium.launch()
context = browser.new_context(proxy={"server": "http://myproxy.com:3128"})

ネットワークイベント​

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

from playwright.sync_api import sync_playwright, Playwright

def run(playwright: Playwright):
    chromium = playwright.chromium
    browser = chromium.launch()
    page = browser.new_page()
    # Subscribe to "request" and "response" events.
    page.on("request", lambda request: print(">>", request.method, request.url))
    page.on("response", lambda response: print("<<", response.status, response.url))
    page.goto("https://example.com")
    browser.close()

with sync_playwright() as playwright:
    run(playwright)

または、page.expect_response()を使用してボタンクリック後にネットワークレスポンスを待つこともできます。

# Use a glob url pattern
with page.expect_response("**/api/fetch_data") as response_info:
    page.get_by_text("Update").click()
response = response_info.value

バリエーション​

page.expect_response()でレスポンスを待つ

# Use a regular expression
with page.expect_response(re.compile(r"\.jpeg$")) as response_info:
    page.get_by_text("Update").click()
response = response_info.value

# Use a predicate taking a response object
with page.expect_response(lambda response: token in response.url) as response_info:
    page.get_by_text("Update").click()
response = response_info.value

リクエストの処理​

page.route(
    "**/api/fetch_data",
    lambda route: route.fulfill(status=200, body=test_data))
page.goto("https://example.com")

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

バリエーション​

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

context.route(
    "**/api/login",
    lambda route: route.fulfill(status=200, body="accept"))
page.goto("https://example.com")

リクエストの変更​

# Delete header
def handle_route(route):
    headers = route.request.headers
    del headers["x-secret"]
    route.continue_(headers=headers)
page.route("**/*", handle_route)

# Continue requests as POST.
page.route("**/*", lambda route: route.continue_(method="POST"))

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

リクエストの中止​

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

page.route("**/*.{png,jpg,jpeg}", lambda route: route.abort())

# Abort based on the request type
page.route("**/*", lambda route: route.abort() if route.request.resource_type == "image"  else route.continue_())

レスポンスの変更​

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

def handle_route(route: Route) -> None:
    # Fetch original response.
    response = route.fetch()
    # Add a prefix to the title.
    body = response.text()
    body = body.replace("<title>", "<title>My prefix:")
    route.fulfill(
        # Pass all fields from the response.
        response=response,
        # Override response body.
        body=body,
        # Force content type to be html.
        headers={**response.headers, "content-type": "text/html"},
    )

page.route("**/title.html", handle_route)

Glob URLパターン​

Playwrightは、page.route()やpage.expect_response()のようなネットワークインターセプトメソッドで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.on("websocket")イベントが発火します。このイベントには、その後のWebSocketフレーム検査のためのWebSocketインスタンスが含まれます。

def on_web_socket(ws):
    print(f"WebSocket opened: {ws.url}")
    ws.on("framesent", lambda payload: print(payload))
    ws.on("framereceived", lambda payload: print(payload))
    ws.on("close", lambda payload: print("WebSocket closed"))

page.on("websocket", on_web_socket)

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

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

  1. Playwrightのネイティブなbrowser_context.route()とpage.route()を使用しているにもかかわらずネットワークイベントが欠落しているように見える場合は、service_workersを'block'に設定してService Workerを無効にしてください。
  2. Mock Service Worker (MSW) のようなモックツールを使用している可能性があります。このツールはレスポンスのモックにはすぐに利用できますが、独自のService Workerを追加し、それがネットワークリクエストを横取りするため、browser_context.route()やpage.route()からは見えなくなります。ネットワークテストとモックの両方に興味がある場合は、組み込みのbrowser_context.route()とpage.route()をレスポンスのモックに使用することを検討してください。
  3. Service Workerをテストやネットワークモックだけでなく、Service Worker自体が行うリクエストのルーティングやリッスンに興味がある場合は、この実験的な機能を参照してください。