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

トレースビューアー

はじめに​

Playwrightトレースビューアーは、スクリプト実行後に記録されたPlaywrightトレースを探索するのに役立つGUIツールです。トレースは、テストがCIで失敗した場合にデバッグするための優れた方法です。トレースはローカルで開くか、ブラウザでtrace.playwright.devで開くことができます。

トレースビューアーを開く​

保存されたトレースは、Playwright CLIを使用するか、ブラウザでtrace.playwright.devから開くことができます。trace.zipファイルが保存されている完全なパスを追加してください。

playwright show-trace trace.zip

trace.playwright.devの使用​

trace.playwright.devは、トレースビューアーの静的ホスト版です。ドラッグ＆ドロップまたはファイルを選択ボタンでトレースファイルをアップロードできます。

トレースビューアーはトレースを完全にブラウザに読み込み、外部にデータを送信することはありません。

Drop Playwright Trace to load

リモートトレースの表示​

リモートトレースは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")

トレースビューアーの機能​

アクション​

アクションタブでは、すべてのアクションに使用されたロケータと、各アクションの実行にかかった時間を確認できます。テストの各アクションにカーソルを合わせると、DOMスナップショットの変化を視覚的に確認できます。時間を前後して、アクションをクリックして検査・デバッグします。BeforeタブとAfterタブを使用して、アクションの前後に何が起こったかを視覚的に確認します。

actions tab in trace viewer

各アクションを選択すると表示されるもの

  • アクションスナップショット
  • アクションログ
  • ソースコードの場所

スクリーンショット​

スクリーンショットオプションをオンにしてトレースする場合（デフォルト）、各トレースはスクリーンキャストを記録し、フィルムストリップとしてレンダリングします。フィルムストリップにカーソルを合わせると、各アクションと状態の拡大画像が表示され、検査したいアクションを簡単に見つけることができます。

アクションをダブルクリックすると、そのアクションの時間範囲が表示されます。タイムラインのスライダーを使用して選択したアクションを増やし、これらはアクションタブに表示され、すべてのコンソールログとネットワークログは選択されたアクションのログのみを表示するようにフィルタリングされます。

timeline view in trace viewer

スナップショット​

スナップショットオプションをオンにしてトレースする場合（デフォルト）、Playwrightは各アクションに対して完全なDOMスナップショットのセットをキャプチャします。アクションの種類に応じて、次のものをキャプチャします。

タイプ説明
Beforeアクションが呼び出された時点のスナップショット。
アクション実行された入力の瞬間のスナップショット。このタイプのスナップショットは、Playwrightが正確にどこをクリックしたかを探索する際に特に役立ちます。
Afterアクション後のスナップショット。

典型的なアクションスナップショットは以下のようになります。

action tab in trace viewer

DOMノードと正確なクリック位置の両方がハイライト表示されている点に注目してください。

ソース​

サイドバーでアクションをクリックすると、そのアクションのコード行がソースパネルでハイライト表示されます。

showing source code tab in trace viewer

コール​

コールタブには、アクションにかかった時間、使用されたロケータ、厳密モードであるか、使用されたキーなどのアクションに関する情報が表示されます。

showing call tab in trace viewer

ログ​

Playwrightが舞台裏で何をしているか（ビューへのスクロール、要素の可視性・有効性・安定性の待機、クリック、入力、押下などのアクションの実行）をよりよく理解するために、テストの完全なログを確認できます。

showing log of tests in trace viewer

エラー​

テストが失敗した場合、エラータブに各テストのエラーメッセージが表示されます。タイムラインには、エラーが発生した場所を示す赤い線も表示されます。ソースタブをクリックすると、エラーがソースコードのどの行にあるかを確認できます。

showing errors in trace viewer

コンソール​

ブラウザとテストの両方からのコンソールログを確認できます。コンソールログがブラウザから来たのか、テストファイルから来たのかを示すために、異なるアイコンが表示されます。

showing log of tests in trace viewer

アクションサイドバーのテストからアクションをダブルクリックします。これにより、コンソールはそのアクション中に作成されたログのみを表示するようにフィルタリングされます。すべて表示ボタンをクリックすると、すべてのコンソールログが再度表示されます。

タイムラインを使用して、開始点をクリックして終了点までドラッグすることでアクションをフィルタリングします。コンソールタブも、選択されたアクション中に作成されたログのみを表示するようにフィルタリングされます。

ネットワーク​

ネットワークタブには、テスト中に作成されたすべてのネットワークリクエストが表示されます。さまざまなタイプのリクエスト、ステータスコード、メソッド、リクエスト、コンテンツタイプ、期間、サイズでソートできます。リクエストをクリックすると、リクエストヘッダー、レスポンスヘッダー、リクエストボディ、レスポンスボディなど、その詳細情報が表示されます。

network requests tab in trace viewer

アクションサイドバーのテストからアクションをダブルクリックします。これにより、ネットワークリクエストはそのアクション中に作成されたリクエストのみを表示するようにフィルタリングされます。すべて表示ボタンをクリックすると、すべてのネットワークリクエストが再度表示されます。

タイムラインを使用して、開始点をクリックして終了点までドラッグすることでアクションをフィルタリングします。ネットワークタブも、選択されたアクション中に作成されたネットワークリクエストのみを表示するようにフィルタリングされます。

メタデータ​

アクションタブの隣にメタデータタブがあり、ブラウザ、ビューポートサイズ、テスト期間など、テストに関する詳細情報が表示されます。

meta data in trace viewer