ネットワーク
イントロダクション
Playwright は、HTTP と HTTPS の両方のブラウザネットワークトラフィックを監視および変更するための API を提供します。ページが行うすべてのリクエスト(XHR や fetch リクエストを含む)は、追跡、変更、および処理できます。
API のモック
API のモック方法の詳細については、API モッキングガイドをご覧ください。
- API リクエストをモックして、API にアクセスしないようにする
- API リクエストを実行して、レスポンスを変更する
- HAR ファイルを使用してネットワークリクエストをモックする。
HTTP 認証
HTTP 認証を実行します。
- Sync
- Async
context = browser.new_context(
http_credentials={"username": "bill", "password": "pa55w0rd"}
)
page = context.new_page()
page.goto("https://example.com")
context = await browser.new_context(
http_credentials={"username": "bill", "password": "pa55w0rd"}
)
page = await context.new_page()
await page.goto("https://example.com")
HTTP プロキシ
HTTP(S) プロキシまたは SOCKSv5 経由でロードするようにページを設定できます。プロキシは、ブラウザ全体に対してグローバルに設定することも、ブラウザコンテキストごとに個別に設定することもできます。
オプションで HTTP(S) プロキシのユーザー名とパスワードを指定したり、プロキシをバイパスするホストを指定することもできます。
グローバルプロキシの例を次に示します。
- Sync
- Async
browser = chromium.launch(proxy={
"server": "http://myproxy.com:3128",
"username": "usr",
"password": "pwd"
})
browser = await chromium.launch(proxy={
"server": "http://myproxy.com:3128",
"username": "usr",
"password": "pwd"
})
コンテキストごとに指定することも可能です。
- Sync
- Async
browser = chromium.launch()
context = browser.new_context(proxy={"server": "http://myproxy.com:3128"})
browser = await chromium.launch()
context = await browser.new_context(proxy={"server": "http://myproxy.com:3128"})
ネットワークイベント
- Sync
- Async
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)
import asyncio
from playwright.async_api import async_playwright, Playwright
async def run(playwright: Playwright):
chromium = playwright.chromium
browser = await chromium.launch()
page = await 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))
await page.goto("https://example.com")
await browser.close()
async def main():
async with async_playwright() as playwright:
await run(playwright)
asyncio.run(main())
または、page.expect_response() を使用して、ボタンクリック後のネットワークレスポンスを待機します。
- Sync
- Async
# 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
# Use a glob url pattern
async with page.expect_response("**/api/fetch_data") as response_info:
await page.get_by_text("Update").click()
response = await response_info.value
バリエーション
レスポンスを page.expect_response() で待機します。
- Sync
- Async
# 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
# Use a regular expression
async with page.expect_response(re.compile(r"\.jpeg$")) as response_info:
await page.get_by_text("Update").click()
response = await response_info.value
# Use a predicate taking a response object
async with page.expect_response(lambda response: token in response.url) as response_info:
await page.get_by_text("Update").click()
response = await response_info.value
リクエストの処理
- Sync
- Async
page.route(
"**/api/fetch_data",
lambda route: route.fulfill(status=200, body=test_data))
page.goto("https://example.com")
await page.route(
"**/api/fetch_data",
lambda route: route.fulfill(status=200, body=test_data))
await page.goto("https://example.com")
Playwright スクリプトでネットワークリクエストを処理することにより、API エンドポイントをモックできます。
バリエーション
browser_context.route() または page.route() を使用して、ブラウザコンテキスト全体にルートを設定します。ポップアップウィンドウと開かれたリンクに適用されます。
- Sync
- Async
context.route(
"**/api/login",
lambda route: route.fulfill(status=200, body="accept"))
page.goto("https://example.com")
await context.route(
"**/api/login",
lambda route: route.fulfill(status=200, body="accept"))
await page.goto("https://example.com")
リクエストの変更
- Sync
- Async
# 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"))
# Delete header
async def handle_route(route):
headers = route.request.headers
del headers["x-secret"]
await route.continue_(headers=headers)
await page.route("**/*", handle_route)
# Continue requests as POST.
await page.route("**/*", lambda route: route.continue_(method="POST"))
変更を加えてリクエストを続行できます。上記の例では、送信リクエストから HTTP ヘッダーを削除しています。
リクエストの中止
page.route() と route.abort() を使用してリクエストを中止できます。
- Sync
- Async
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_())
await page.route("**/*.{png,jpg,jpeg}", lambda route: route.abort())
# Abort based on the request type
await page.route("**/*", lambda route: route.abort() if route.request.resource_type == "image" else route.continue_())
レスポンスの変更
レスポンスを変更するには、APIRequestContext を使用して元のレスポンスを取得し、レスポンスを route.fulfill() に渡します。オプションを介してレスポンスの個々のフィールドを上書きできます。
- Sync
- Async
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)
async def handle_route(route: Route) -> None:
# Fetch original response.
response = await route.fetch()
# Add a prefix to the title.
body = await response.text()
body = body.replace("<title>", "<title>My prefix:")
await 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"},
)
await page.route("**/title.html", handle_route)
Glob URL パターン
Playwright は、page.route() や page.expect_response() などのネットワークインターセプトメソッドで URL マッチングに簡略化された glob パターンを使用します。これらのパターンは基本的なワイルドカードをサポートしています。
- アスタリスク
- 単一の
*
は/
を除く任意の文字に一致します。 - 二重の
**
は/
を含む任意の文字に一致します。
- 単一の
- 疑問符
?
は/
を除く任意の単一文字に一致します。 - 中括弧
{}
は、コンマ,
で区切られたオプションのリストに一致するために使用できます。 - 角括弧
[]
は、文字のセットに一致するために使用できます。 - バックスラッシュ
\
は、任意の特殊文字をエスケープするために使用できます(バックスラッシュ自体を\\
としてエスケープすることに注意してください)。
例
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.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)
ネットワークイベントと Service Worker の欠落
Playwright の組み込みの browser_context.route() と page.route() を使用すると、テストでネイティブにリクエストをルーティングし、モックとインターセプトを実行できます。
- Playwright のネイティブ browser_context.route() と page.route() を使用していて、ネットワークイベントが欠落しているように見える場合は、service_workers を
'block'
に設定して Service Worker を無効にします。 - Mock Service Worker (MSW) などのモックツールを使用している可能性があります。このツールはレスポンスのモックにはすぐに使用できますが、ネットワークリクエストを引き継ぐ独自の Service Worker を追加するため、browser_context.route() と page.route() からは見えなくなります。ネットワークテストとモックの両方に関心がある場合は、レスポンスモックに組み込みの browser_context.route() と page.route() を使用することを検討してください。
- Service Worker をテストとネットワークモックにのみ使用するのではなく、Service Worker 自体が行うリクエストのルーティングとリッスンに関心がある場合は、この実験的な機能をご覧ください。