トレースビューワー

はじめに

Playwright トレースビューワーは、スクリプト実行後に記録された 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 は、トレースビューワーの静的にホストされるバリアントです。トレースファイルは、ドラッグアンドドロップまたは Select file(s) ボタンを使用してアップロードできます。

トレースビューワーは、トレースをブラウザに完全にロードし、外部にデータを送信しません。

リモートトレースの表示

リモートトレースは、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 を使用する場合、アクセス可能なストレージ (CI 内など) にアップロードされたトレースの URL をクエリパラメータとして渡すこともできます。CORS (Cross-Origin Resource Sharing) ルールが適用される場合があります。

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.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 スナップショットのセットをキャプチャします。アクションのタイプに応じて、以下をキャプチャします。

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

これは、一般的なアクションのスナップショットの外観です。

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

ソース

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

呼び出し

[呼び出し] タブには、アクションにかかった時間、使用されたロケーター、厳密モードかどうか、使用されたキーなど、アクションに関する情報が表示されます。

ログ

テストの完全なログを参照して、Playwright が背後で何をしているかをより深く理解します。たとえば、ビューへのスクロール、要素が表示、有効、安定になるのを待機し、クリック、入力、押下などのアクションを実行するなどです。

エラー

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

コンソール

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

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

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

ネットワーク

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

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

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

メタデータ

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