トレースビューアー
はじめに
Playwright Trace Viewerは、記録されたPlaywrightテストのトレースを探索できるGUIツールです。これにより、テストの各アクションを前後に移動し、各アクション中に何が起こっていたかを視覚的に確認できます。
学習内容
トレースの記録
デフォルトでは、playwright.configファイルには、各テストのtrace.zipファイルを作成するために必要な設定が含まれています。トレースはon-first-retryで実行されるように設定されており、これは失敗したテストの最初のリトライ時に実行されることを意味します。また、CIで実行する場合はretriesが2に、ローカルでは0に設定されています。これは、トレースが失敗したテストの最初のリトライ時に記録されることを意味し、最初の実行時や2回目のリトライ時には記録されません。
import { defineConfig } from '@playwright/test';
export default defineConfig({
retries: process.env.CI ? 2 : 0, // set to 2 when running on CI
// ...
use: {
trace: 'on-first-retry', // record traces on first retry of each test
},
});
トレースを記録するための利用可能なオプションの詳細については、トレースビューアーに関する詳細ガイドをご覧ください。
トレースは通常、継続的インテグレーション(CI)環境で実行されます。ローカルでは、テストの開発とデバッグにUIモードを使用できるためです。ただし、UIモードを使用せずにローカルでトレースを実行したい場合は、--trace onでトレースを強制的にオンにできます。
npx playwright test --trace on
HTMLレポートを開く
HTMLレポートには、実行されたすべてのテスト、使用されたブラウザ、および所要時間が表示されます。テストは、合格、失敗、不安定、またはスキップされたテストでフィルタリングできます。特定のテストを検索することもできます。テストをクリックすると詳細ビューが開き、エラー、テストステップ、トレースなどの詳細情報を確認できます。
npx playwright show-report
トレースを開く
HTMLレポートで、テスト名のファイル名の横にあるトレースアイコンをクリックすると、目的のテストのトレースを直接開くことができます。
また、テストの詳細ビューを開き、'Traces'タブまでスクロールし、トレースのスクリーンショットをクリックしてトレースを開くこともできます。
レポーターの詳細については、HTMLレポーターを含むレポーターに関する詳細ガイドをご覧ください。
トレースの表示
各アクションをクリックするか、タイムラインを使用してホバーすることで、テストのトレースを表示し、アクションの前後のページのの状態を確認できます。テストの各ステップ中にログ、ソース、ネットワーク、エラー、コンソールを検査します。トレースビューアーはDOMスナップショットを作成するため、完全に操作でき、ブラウザのDevToolsを開いてHTML、CSSなどを検査できます。
トレースの詳細については、トレースビューアーに関する詳細ガイドをご覧ください。