トレースビューアー
導入
Playwright Trace Viewer は、スクリプト実行後に記録された Playwright トレースを調査するのに役立つ GUI ツールです。トレースは、CI でテストが失敗した場合のデバッグに非常に役立ちます。トレースは、ローカルまたはブラウザ上の trace.playwright.dev で開くことができます。
トレースビューアーを開く
保存されたトレースは、Playwright CLI を使用するか、またはブラウザ (trace.playwright.dev) で開くことができます。trace.zip ファイルが配置されている場所へのフルパスを必ず指定してください。
playwright show-trace trace.zip
trace.playwright.dev の使用
trace.playwright.dev は、Trace Viewer の静的ホスト版です。ドラッグアンドドロップ、または Select file(s) ボタンを使ってトレースファイルをアップロードできます。
Trace Viewer は、トレースをブラウザ内で完全に読み込み、外部にデータを送信することはありません。
リモートトレースの表示
リモートトレースは、その URL を使って直接開くことができます。これにより、例えば CI の実行結果から手動でファイルをダウンロードしなくても、リモートトレースを簡単に確認できます。
playwright show-trace https://example.com/trace.zip
trace.playwright.dev を使用する際、アクセス可能なストレージ (例: CI 環境内) にアップロードしたトレースの URL をクエリパラメーターとして渡すことも可能です。CORS (Cross-Origin Resource Sharing) のルールが適用される場合があります。
https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip
トレースの記録
トレースは、--tracing フラグを付けてテストを実行することで記録できます。
pytest --tracing on
トレースのオプションは以下の通りです。
on: 各テストのトレースを記録off: トレースを記録しない (デフォルト)retain-on-failure: 各テストのトレースを記録しますが、成功したテスト実行のトレースは削除します。
これによりトレースが記録され、test-results ディレクトリに trace.zip という名前で保存されます。
Pytest を使用していない場合は、こちらをクリックしてトレースの記録方法をご確認ください。
- Sync
- Async
browser = chromium.launch()
context = browser.new_context()
# Start tracing before creating / navigating a page.
context.tracing.start(screenshots=True, snapshots=True, sources=True)
page = context.new_page()
page.goto("https://playwright.dokyumento.jp")
# Stop tracing and export it into a zip archive.
context.tracing.stop(path = "trace.zip")
browser = await chromium.launch()
context = await browser.new_context()
# Start tracing before creating / navigating a page.
await context.tracing.start(screenshots=True, snapshots=True, sources=True)
page = await context.new_page()
await page.goto("https://playwright.dokyumento.jp")
# Stop tracing and export it into a zip archive.
await context.tracing.stop(path = "trace.zip")
トレースビューアーの機能
アクション
「アクション」タブでは、すべてのアクションに使用されたロケーターと、各アクションの実行にかかった時間を確認できます。テストの各アクションにカーソルを合わせると、DOM スナップショットの変化を視覚的に確認できます。時間を前後に移動し、アクションをクリックして検査とデバッグを行います。「Before」タブと「After」タブを使用して、アクションの前後に何が起こったかを視覚的に確認します。
各アクションを選択すると、以下が表示されます。
- アクションスナップショット
- アクションログ
- ソースコードの場所
スクリーンショット
screenshots オプションをオン (デフォルト) にしてトレースすると、各トレースはスクリーンキャストを記録し、それをフィルムストリップとしてレンダリングします。フィルムストリップにカーソルを合わせると、各アクションと状態の拡大画像が表示され、検査したいアクションを簡単に見つけることができます。
アクションをダブルクリックすると、そのアクションの時間範囲が表示されます。タイムラインのスライダーを使用すると、選択したアクションを増やすことができ、これらは「アクション」タブに表示され、すべてのコンソールログとネットワークログは、選択したアクションのログのみを表示するようにフィルタリングされます。
スナップショット
snapshots オプションをオン (デフォルト) にしてトレースすると、Playwright は各アクションの完全な DOM スナップショットのセットをキャプチャします。アクションのタイプに応じて、以下がキャプチャされます。
| 種類 | 説明 |
|---|---|
| Before | アクションが呼び出された時点のスナップショット。 |
| Action | 実行された入力の瞬間のスナップショット。このタイプのスナップショットは、Playwright が正確にどこをクリックしたかを調べるときに特に役立ちます。 |
| After | アクション後のスナップショット。 |
典型的なアクションスナップショットは次のようになります。
DOM ノードと正確なクリック位置の両方が強調表示されていることに注目してください。
ソース
サイドバーのアクションをクリックすると、そのアクションのコード行がソースパネルで強調表示されます。
Call
「Call」タブには、アクションにかかった時間、使用されたロケーター、厳密モードかどうか、使用されたキーなど、アクションに関する情報が表示されます。
ログ
テストの完全なログを参照して、Playwright が舞台裏で何をしているかをより深く理解します。たとえば、ビューへのスクロール、要素が表示されるまで、有効になるまで、安定するまで待機し、クリック、入力、押下などのアクションを実行します。
エラー
テストが失敗した場合、「エラー」タブに各テストのエラーメッセージが表示されます。タイムラインにも、エラーが発生した場所を強調表示する赤い線が表示されます。「ソース」タブをクリックして、ソースコードのどの行でエラーが発生したかを確認することもできます。
コンソール
ブラウザとテストからのコンソールログを確認します。コンソールログがブラウザからのものか、テストファイルからのものかを示すために、異なるアイコンが表示されます。
アクションサイドバーでテストのアクションをダブルクリックします。これにより、コンソールがフィルタリングされ、そのアクション中に作成されたログのみが表示されます。「すべて表示」ボタンをクリックすると、すべてのコンソールログが再度表示されます。
タイムラインを使用してアクションをフィルタリングするには、開始点をクリックして終了点までドラッグします。「コンソール」タブもフィルタリングされ、選択したアクション中に作成されたログのみが表示されます。
ネットワーク
「ネットワーク」タブには、テスト中に作成されたすべてのネットワークリクエストが表示されます。リクエストのタイプ、ステータスコード、メソッド、リクエスト、コンテンツタイプ、期間、サイズで並べ替えることができます。リクエストをクリックすると、リクエストヘッダー、レスポンスヘッダー、リクエストボディ、レスポンスボディなど、詳細情報が表示されます。
アクションサイドバーでテストのアクションをダブルクリックします。これにより、ネットワークリクエストがフィルタリングされ、そのアクション中に作成されたリクエストのみが表示されます。「すべて表示」ボタンをクリックすると、すべてのネットワークリクエストが再度表示されます。
タイムラインを使用してアクションをフィルタリングするには、開始点をクリックして終了点までドラッグします。「ネットワーク」タブもフィルタリングされ、選択したアクション中に作成されたネットワークリクエストのみが表示されます。
メタデータ
「アクション」タブの横にある「メタデータ」タブには、ブラウザ、ビューポートサイズ、テスト期間など、テストに関する詳細情報が表示されます。