トレースビューアー
はじめに
Playwrightトレースビューアーは、記録されたテストの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などを検査できます。
トレースの詳細については、トレースビューアーに関する詳細ガイドをご覧ください。