トレースビューアー

はじめに

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（クロスオリジンリソース共有）ルールが適用される場合があります。

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`ファイルが生成されます。

テスト

playwright.config.ts

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タブを使用して、アクションの前後で何が起こったかを視覚的に確認してください。

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

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

スクリーンショット

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

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

スナップショット

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

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

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

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

ソース

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

コール

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

ログ

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

エラー

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

コンソール

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

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

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

ネットワーク

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

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

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

メタデータ

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

添付ファイル

「添付ファイル」タブでは、添付ファイルを探索できます。ビジュアルリグレッションテストを行っている場合、イメージ差分、実際のイメージ、期待されるイメージを調べてスクリーンショットを比較できます。期待されるイメージをクリックすると、スライダーを使用して片方の画像をもう一方の画像に重ねて表示できるため、スクリーンショットの違いを簡単に確認できます。