テストの実行とデバッグ
はじめに
Playwrightを使用すると、単一のテスト、一連のテスト、またはすべてのテストを実行できます。テストは`--project`フラグを使用して、1つのブラウザまたは複数のブラウザで実行できます。テストはデフォルトで並行して実行され、ヘッドレスモードで実行されます。これは、テスト実行中にブラウザウィンドウが開かれず、結果がターミナルに表示されることを意味します。ただし、`--headed` CLI引数を使用してヘッドモードでテストを実行したり、`--ui`フラグを使用してUIモードでテストを実行したりすることもできます。ウォッチモード、タイムトラベルデバッグなど、テストの完全なトレースを確認できます。
学ぶこと
テストの実行
コマンドライン
`playwright test`コマンドでテストを実行できます。これにより、`playwright.config`ファイルで設定されているすべてのブラウザでテストが実行されます。テストはデフォルトでヘッドレスモードで実行され、テスト実行中にブラウザウィンドウは開かれず、結果はターミナルに表示されます。
npx playwright test
UIモードでテストを実行
各テストステップを簡単に確認し、各ステップの前、最中、後に何が起こったかを視覚的に確認できるため、UIモードでテストを実行することを強くお勧めします。これにより、開発者エクスペリエンスが向上します。UIモードには、ロケーターピッカー、ウォッチモードなど、他にも多くの機能が付属しています。
npx playwright test --ui
UIモードの詳細ガイドでその機能について詳しく学ぶことができます。
ヘッドモードでテストを実行
ヘッドモードでテストを実行するには、`--headed`フラグを使用します。これにより、Playwrightがウェブサイトとどのように相互作用するかを視覚的に確認できます。
npx playwright test --headed
異なるブラウザでテストを実行
テストを実行したいブラウザを指定するには、`--project`フラグの後にブラウザ名を指定します。
npx playwright test --project webkit
複数のブラウザでテストを実行するように指定するには、`--project`フラグを複数回使用し、それぞれのブラウザ名を指定します。
npx playwright test --project webkit --project firefox
特定のテストを実行
単一のテストファイルを実行するには、実行したいテストファイルの名前を渡します。
npx playwright test landing-page.spec.ts
異なるディレクトリから一連のテストファイルを実行するには、テストを実行したいディレクトリ名を渡します。
npx playwright test tests/todo-page/ tests/landing-page/
ファイル名に`landing`または`login`を含むファイルを実行するには、これらのキーワードをCLIに渡すだけです。
npx playwright test landing login
特定のタイトルを持つテストを実行するには、`-g`フラグの後にテストのタイトルを指定します。
npx playwright test -g "add a todo item"
最後に失敗したテストを実行
最後のテスト実行で失敗したテストのみを実行するには、まずテストを実行し、次に`--last-failed`フラグを付けて再度実行します。
npx playwright test --last-failed
VS Codeでテストを実行
VS Code拡張機能を使用して、VS Codeから直接テストを実行できます。インストール後、実行したいテストの横にある緑色の三角形をクリックするか、テストサイドバーからすべてのテストを実行できます。詳細については、VS Code入門ガイドを参照してください。
テストのデバッグ
PlaywrightはNode.jsで実行されるため、`console.log`を使用したり、IDE内で、またはVS Code拡張機能を使ってVS Codeから直接デバッグするなど、好みのデバッガーでデバッグできます。PlaywrightにはUIモードが付属しており、テストの各ステップを簡単に確認し、ログ、エラー、ネットワークリクエスト、DOMスナップショットの検査などを確認できます。また、Playwrightインスペクターを使用することもできます。これは、Playwright API呼び出しをステップ実行し、そのデバッグログを表示し、ロケーターを探索するのに役立ちます。
UIモードでテストをデバッグ
各テストステップを簡単に確認し、各ステップの前、最中、後に何が起こったかを視覚的に確認できるため、UIモードでテストをデバッグすることを強くお勧めします。これにより、開発者エクスペリエンスが向上します。UIモードには、ロケーターピッカー、ウォッチモードなど、他にも多くの機能が付属しています。
npx playwright test --ui
デバッグ中に、「ロケーターを選択」ボタンを使用してページ上の要素を選択し、Playwrightがその要素を見つけるために使用するロケーターを確認できます。ロケータープレイグラウンドでロケーターを編集し、ブラウザウィンドウでリアルタイムにハイライト表示されるのを確認することもできます。「ロケーターをコピー」ボタンを使用してロケーターをクリップボードにコピーし、テストに貼り付けます。
UIモードの詳細ガイドでその機能について詳しく学ぶことができます。
Playwrightインスペクターでテストをデバッグ
すべてのテストをデバッグするには、Playwrightテストコマンドの後に`--debug`フラグを付けて実行します。
npx playwright test --debug
このコマンドは、ブラウザウィンドウとPlaywrightインスペクターを開きます。インスペクター上部の「ステップオーバー」ボタンを使用して、テストをステップ実行できます。または、「再生」ボタンを押して、テストを最初から最後まで実行します。テストが完了すると、ブラウザウィンドウは閉じます。
1つのテストファイルをデバッグするには、デバッグしたいテストファイルの名前の後に`--debug`フラグを付けてPlaywrightテストコマンドを実行します。
npx playwright test example.spec.ts --debug
`test(..`が定義されている行番号から特定のテストをデバッグするには、テストファイル名の末尾にコロンと行番号を追加し、その後に`--debug`フラグを付けます。
npx playwright test example.spec.ts:10 --debug
デバッグ中に、「ロケーターを選択」ボタンを使用してページ上の要素を選択し、Playwrightがその要素を見つけるために使用するロケーターを確認できます。ロケーターを編集し、ブラウザウィンドウでリアルタイムにハイライト表示されるのを確認することもできます。「ロケーターをコピー」ボタンを使用してロケーターをクリップボードにコピーし、テストに貼り付けます。
デバッグガイドで、VS Codeデバッガー、UIモード、Playwrightインスペクターを使用したデバッグ、およびブラウザ開発者ツールを使用したデバッグについて詳しく学ぶことができます。
テストレポート
HTMLレポーターは、ブラウザ、合格したテスト、失敗したテスト、スキップされたテスト、不安定なテストでレポートをフィルタリングできる、テストの完全なレポートを表示します。デフォルトでは、一部のテストが失敗した場合にHTMLレポートは自動的に開かれますが、そうでない場合は次のコマンドで開くことができます。
npx playwright show-report
テストのフィルタリングや検索ができるほか、各テストをクリックしてテストのエラーを確認したり、テストの各ステップを探索したりできます。