トレースビューアー

はじめに

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

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

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

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace trace.zip"

trace.playwright.devの使用

trace.playwright.devは、トレースビューアーの静的にホストされたバージョンです。トレースファイルはドラッグ＆ドロップまたは「ファイルを選択」ボタンからアップロードできます。

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

リモートトレースの表示

リモートトレースはURLを使って直接開くことができます。これにより、例えばCI実行から手動でファイルをダウンロードすることなく、リモートトレースを簡単に表示できます。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace https://example.com/trace.zip"

trace.playwright.devを使用する際、アップロードされたトレースのURLを、アクセス可能なストレージ（例：CI内）からクエリパラメータとして渡すこともできます。CORS (Cross-Origin Resource Sharing) ルールが適用される場合があります。

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/fa874b0d59cdedec675521c21124e93161d66533.zip

トレースを記録する

トレースは、`BrowserContext.tracing()` APIを使用して次のように記録できます。

Browser browser = browserType.launch();
BrowserContext context = browser.newContext();

// Start tracing before creating / navigating a page.
context.tracing().start(new Tracing.StartOptions()
  .setScreenshots(true)
  .setSnapshots(true)
  .setSources(true));

Page page = context.newPage();
page.navigate("https://playwright.dokyumento.jp");

// Stop tracing and export it into a zip archive.
context.tracing().stop(new Tracing.StopOptions()
  .setPath(Paths.get("trace.zip")));

これによりトレースが記録され、`trace.zip`という名前のファイルに保存されます。

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

アクション

アクションタブでは、各アクションでどのロケーターが使用されたか、およびそれぞれの実行にかかった時間を確認できます。テストの各アクションにカーソルを合わせると、DOMスナップショットの変化を視覚的に確認できます。時間を戻したり進めたりして、アクションをクリックして調査およびデバッグできます。「Before」および「After」タブを使用して、アクションの前後に何が起こったかを視覚的に確認してください。

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

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

スクリーンショット

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

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

スナップショット

`setSnapshots`オプションをオンにして（デフォルト）、トレースを行うと、Playwrightは各アクションの完全なDOMスナップショットのセットをキャプチャします。アクションのタイプに応じて、以下をキャプチャします。

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

一般的なアクションスナップショットの例は次のとおりです。

DOMノードと正確なクリック位置の両方がどのように強調表示されているかに注目してください。

ソース

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

コール

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

ログ

テストの完全なログを確認することで、Playwrightが舞台裏で何を行っているかをよりよく理解できます。例えば、ビューへのスクロール、要素が表示可能、有効、安定するまでの待機、クリック、入力、キー操作などのアクションの実行などです。

エラー

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

コンソール

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

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

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

ネットワーク

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

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

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

メタデータ

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