トレースビューアー
はじめに
Playwrightトレースビューアーは、スクリプト実行後に記録されたPlaywrightトレースを探索するのに役立つGUIツールです。トレースは、テストがCIで失敗した場合にデバッグするための優れた方法です。トレースはローカルで開くか、ブラウザでtrace.playwright.devで開くことができます。
トレースビューアーを開く
保存されたトレースは、Playwright CLIを使用するか、ブラウザでtrace.playwright.devから開くことができます。trace.zipファイルが保存されている完全なパスを追加してください。
npx playwright show-trace path/to/trace.zip
trace.playwright.devの使用
trace.playwright.devは、トレースビューアーの静的ホスト版です。ドラッグ＆ドロップまたはファイルを選択ボタンでトレースファイルをアップロードできます。
トレースビューアーはトレースを完全にブラウザに読み込み、外部にデータを送信することはありません。
リモートトレースの表示
リモートトレースはURLを使って直接開くことができます。これにより、例えばCI実行から手動でファイルをダウンロードすることなく、リモートトレースを簡単に表示できます。
npx 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
トレースの記録
ローカルでのトレース
開発モード中にトレースを記録するには、テスト実行時に--traceフラグをonに設定します。また、各テストを自動的にトレースするため、より良い開発者エクスペリエンスのためにUIモードを使用することもできます。
npx playwright test --trace on
その後、HTMLレポートを開き、トレースアイコンをクリックしてトレースを開くことができます。
npx playwright show-report
CIでのトレース
トレースは、テスト設定ファイルでtrace: 'on-first-retry'オプションを設定することにより、失敗したテストの最初のリトライ時に継続的インテグレーションで実行されるべきです。これにより、リトライされた各テストに対してtrace.zipファイルが生成されます。
- テスト
- ライブラリ
import { defineConfig } from '@playwright/test';
export default defineConfig({
retries: 1,
use: {
trace: 'on-first-retry',
},
});
const browser = await chromium.launch();
const context = await browser.newContext();
// Start tracing before creating / navigating a page.
await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.goto('https://playwright.dokyumento.jp');
// Stop tracing and export it into a zip archive.
await context.tracing.stop({ path: 'trace.zip' });
トレースを記録するための利用可能なオプション
'on-first-retry'- テストが初めてリトライされる場合にのみトレースを記録します。'on-all-retries'- すべてのテストリトライに対してトレースを記録します。'off'- トレースを記録しません。'on'- 各テストに対してトレースを記録します。（パフォーマンス負荷が高いため推奨されません）'retain-on-failure'- 各テストに対してトレースを記録しますが、成功したテスト実行からは削除します。
リトライを有効にしていないが、失敗したテストのトレースを希望する場合は、trace: 'retain-on-failure'を使用することもできます。
より詳細なオプションについては、testOptions.traceを参照してください。
Playwrightをテストランナーとして使用していない場合は、代わりにbrowserContext.tracing APIを使用してください。
トレースビューアーの機能
アクション
アクションタブでは、すべてのアクションに使用されたロケータと、各アクションの実行にかかった時間を確認できます。テストの各アクションにカーソルを合わせると、DOMスナップショットの変化を視覚的に確認できます。時間を前後して、アクションをクリックして検査・デバッグします。BeforeタブとAfterタブを使用して、アクションの前後に何が起こったかを視覚的に確認します。
各アクションを選択すると表示されるもの
- アクションスナップショット
- アクションログ
- ソースコードの場所
スクリーンショット
screenshotsオプションをオンにして（デフォルト）トレースする場合、各トレースはスクリーンキャストを記録し、それをフィルムストリップとしてレンダリングします。フィルムストリップにカーソルを合わせると、各アクションと状態の拡大画像が表示され、検査したいアクションを簡単に見つけることができます。
アクションをダブルクリックすると、そのアクションの時間範囲が表示されます。タイムラインのスライダーを使用して選択したアクションを増やし、これらはアクションタブに表示され、すべてのコンソールログとネットワークログは選択されたアクションのログのみを表示するようにフィルタリングされます。
スナップショット
snapshotsオプションをオンにして（デフォルト）トレースする場合、Playwrightは各アクションに対して完全なDOMスナップショットのセットをキャプチャします。アクションのタイプに応じて、以下をキャプチャします。
| タイプ | 説明 |
|---|---|
| Before | アクションが呼び出された時点のスナップショット。 |
| アクション | 実行された入力の瞬間のスナップショット。このタイプのスナップショットは、Playwrightが正確にどこをクリックしたかを探索する際に特に役立ちます。 |
| After | アクション後のスナップショット。 |
典型的なアクションスナップショットは以下のようになります。
DOMノードと正確なクリック位置の両方がハイライト表示されている点に注目してください。
ソース
サイドバーでアクションをクリックすると、そのアクションのコード行がソースパネルでハイライト表示されます。
コール
コールタブには、アクションにかかった時間、使用されたロケータ、厳密モードであるか、使用されたキーなどのアクションに関する情報が表示されます。
ログ
Playwrightが舞台裏で何をしているか（ビューへのスクロール、要素の可視性・有効性・安定性の待機、クリック、入力、押下などのアクションの実行）をよりよく理解するために、テストの完全なログを確認できます。
エラー
テストが失敗した場合、エラータブに各テストのエラーメッセージが表示されます。タイムラインには、エラーが発生した場所を示す赤い線も表示されます。ソースタブをクリックすると、エラーがソースコードのどの行にあるかを確認できます。
コンソール
ブラウザとテストの両方からのコンソールログを確認できます。コンソールログがブラウザから来たのか、テストファイルから来たのかを示すために、異なるアイコンが表示されます。
アクションサイドバーのテストからアクションをダブルクリックします。これにより、コンソールはそのアクション中に作成されたログのみを表示するようにフィルタリングされます。すべて表示ボタンをクリックすると、すべてのコンソールログが再度表示されます。
タイムラインを使用して、開始点をクリックして終了点までドラッグすることでアクションをフィルタリングします。コンソールタブも、選択されたアクション中に作成されたログのみを表示するようにフィルタリングされます。
ネットワーク
ネットワークタブには、テスト中に作成されたすべてのネットワークリクエストが表示されます。さまざまなタイプのリクエスト、ステータスコード、メソッド、リクエスト、コンテンツタイプ、期間、サイズでソートできます。リクエストをクリックすると、リクエストヘッダー、レスポンスヘッダー、リクエストボディ、レスポンスボディなど、その詳細情報が表示されます。
アクションサイドバーのテストからアクションをダブルクリックします。これにより、ネットワークリクエストはそのアクション中に作成されたリクエストのみを表示するようにフィルタリングされます。すべて表示ボタンをクリックすると、すべてのネットワークリクエストが再度表示されます。
タイムラインを使用して、開始点をクリックして終了点までドラッグすることでアクションをフィルタリングします。ネットワークタブも、選択されたアクション中に作成されたネットワークリクエストのみを表示するようにフィルタリングされます。
メタデータ
アクションタブの隣にメタデータタブがあり、ブラウザ、ビューポートサイズ、テスト期間など、テストに関する詳細情報が表示されます。
添付ファイル
「添付ファイル」タブでは、添付ファイルを探索できます。ビジュアルリグレッションテストを行っている場合、画像の差分、実際の画像、期待される画像を調べてスクリーンショットを比較できます。期待される画像をクリックすると、スライダーを使用して画像を重ねて表示し、スクリーンショットの違いを簡単に確認できます。