トレースビューアー
はじめに
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は、トレースビューアーの静的ホスト版です。ドラッグ＆ドロップまたは「Select file(s)」ボタンを使用してトレースファイルをアップロードできます。
トレースビューアーは、トレースを完全にブラウザにロードし、外部にデータを送信することはありません。
リモートトレースの表示
リモートトレースは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/fa874b0d59cdedec675521c21124e93161d66533.zip
トレースの記録
トレースは、--tracingフラグを付けてテストを実行することで記録できます。
pytest --tracing on
トレースのオプションは次のとおりです。
on: 各テストのトレースを記録off: トレースを記録しない。(デフォルト)retain-on-failure: 各テストのトレースを記録するが、成功したテスト実行のすべてのトレースは削除する。
これによりトレースが記録され、test-resultsディレクトリのtrace.zipというファイルに保存されます。
Pytestを使用していない場合は、こちらをクリックしてトレースの記録方法を学習してください。
- 同期
- 非同期
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」タブを使用して、アクションの前後で何が起こったかを視覚的に確認できます。
各アクションを選択すると表示されるもの
- アクションのスナップショット
- アクションログ
- ソースコードの場所
スクリーンショット
スクリーンショットオプションを有効にして（デフォルト）トレースを行うと、各トレースはスクリーンキャストを記録し、それをフィルムストリップとして表示します。フィルムストリップにカーソルを合わせると、各アクションと状態の拡大画像が表示され、検査したいアクションを簡単に見つけることができます。
アクションをダブルクリックすると、そのアクションの時間範囲が表示されます。タイムラインのスライダーを使用して選択するアクションを増やすことができ、それらはアクションタブに表示され、すべてのコンソールログとネットワークログは選択されたアクションのログのみを表示するようにフィルタリングされます。
スナップショット
スナップショットオプションを有効にして（デフォルト）トレースを行うと、Playwrightは各アクションについて一連の完全なDOMスナップショットをキャプチャします。アクションのタイプに応じて、次をキャプチャします。
| タイプ | 説明 |
|---|---|
| 前 | アクションが呼び出された時点のスナップショット。 |
| アクション | 実行された入力の瞬間のスナップショット。このタイプのスナップショットは、Playwrightが正確にどこをクリックしたかを調べるときに特に役立ちます。 |
| 後 | アクション後のスナップショット。 |
典型的なアクションスナップショットは次のようになります。
DOMノードと正確なクリック位置の両方がどのように強調表示されているかに注目してください。
ソース
サイドバーのアクションをクリックすると、そのアクションのコード行がソースパネルでハイライト表示されます。
呼び出し
「呼び出し」タブには、アクションにかかった時間、使用されたロケーター、厳密モードか否か、使用されたキーなど、アクションに関する情報が表示されます。
ログ
テストの完全なログを確認することで、Playwrightが舞台裏で何を行っているかをよりよく理解できます。例えば、ビューへのスクロール、要素が可視・有効・安定になるまでの待機、クリック、入力、キー操作などのアクションの実行。
エラー
テストが失敗した場合、「エラー」タブに各テストのエラーメッセージが表示されます。タイムラインにも、エラーが発生した箇所をハイライトする赤い線が表示されます。ソースタブをクリックすると、ソースコードのどの行でエラーが発生したかを確認することもできます。
コンソール
ブラウザとテストの両方からのコンソールログを確認できます。コンソールログがブラウザから来たものか、テストファイルから来たものかを示す異なるアイコンが表示されます。
アクションサイドバーでテストからアクションをダブルクリックします。これにより、コンソールがフィルタリングされ、そのアクション中に作成されたログのみが表示されます。「Show all」ボタンをクリックすると、すべてのコンソールログが再び表示されます。
タイムラインを使用して、開始点をクリックし終了点までドラッグすることでアクションをフィルターできます。コンソールタブも、選択されたアクション中に作成されたログのみを表示するようにフィルターされます。
ネットワーク
ネットワークタブには、テスト中に発生したすべてのネットワークリクエストが表示されます。リクエストのタイプ、ステータスコード、メソッド、リクエスト、コンテンツタイプ、期間、サイズなどで並べ替えることができます。リクエストをクリックすると、リクエストヘッダー、レスポンスヘッダー、リクエストボディ、レスポンスボディなど、そのリクエストに関する詳細情報が表示されます。
アクションサイドバーでテストからアクションをダブルクリックします。これにより、ネットワークリクエストがフィルタリングされ、そのアクション中に作成されたリクエストのみが表示されます。「Show all」ボタンをクリックすると、すべてのネットワークリクエストが再び表示されます。
タイムラインを使用して、開始点をクリックし終了点までドラッグすることでアクションをフィルターできます。ネットワークタブも、選択されたアクション中に発生したネットワークリクエストのみを表示するようにフィルターされます。
メタデータ
アクションタブの隣にはメタデータタブがあり、ブラウザ、ビューポートサイズ、テストの実行時間など、テストに関する詳細情報が表示されます。