テストの実行とデバッグ
はじめに
Playwright を使うと、単一のテスト、テストのセット、またはすべてのテストを実行できます。--project フラグを使用すると、1つのブラウザまたは複数のブラウザでテストを実行できます。テストはデフォルトで並行してヘッドレスモードで実行されます。つまり、テストの実行中にブラウザウィンドウは開かず、結果はターミナルに表示されます。--headed CLI 引数を使用してヘッドモードでテストを実行したり、--ui フラグを使用してUI モードでテストを実行して、テストの完全なトレースを確認したりできます。
学習内容
テストの実行
コマンドライン
playwright test コマンドでテストを実行できます。これにより、playwright.config ファイルで構成されたすべてのブラウザでテストが実行され、結果はターミナルに表示されます。テストはデフォルトでヘッドレスモードで実行されます。つまり、テストの実行中にブラウザウィンドウは開きません。
npx playwright test
UI モードでテストを実行する
UI モードでテストを実行することを強くお勧めします。これにより、テストの各ステップを簡単に順を追って確認し、各ステップの前、最中、後に何が起こっていたかを視覚的に確認できるため、開発者エクスペリエンスが向上します。UI モードには、ロケーターピッカー、ウォッチモードなど、他にも多くの機能が付属しています。
npx playwright test --ui
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 Inspectorを使用すると、Playwright API 呼び出しをステップ実行したり、デバッグログを確認したり、ロケーターを探索したりできます。
UI モードでテストをデバッグする
UI モードでテストをデバッグすることを強くお勧めします。これにより、テストの各ステップを簡単に順を追って確認し、各ステップの前、最中、後に何が起こっていたかを視覚的に確認できるため、開発者エクスペリエンスが向上します。UI モードには、ロケーターピッカー、ウォッチモードなど、他にも多くの機能が付属しています。
npx playwright test --ui
デバッグ中は、ロケーターピッカーボタンを使用してページ上の要素を選択し、Playwright がその要素を見つけるために使用するロケーターを確認できます。ロケータープレイグラウンドでロケーターを編集し、ブラウザウィンドウでリアルタイムに強調表示されるのを確認することもできます。ロケーターコピーボタンを使用してロケーターをクリップボードにコピーし、テストに貼り付けます。
UI モードの機能の詳細については、UI モードの詳細ガイドをご覧ください。
Playwright Inspector でテストをデバッグする
すべてのテストをデバッグするには、Playwright テストコマンドの後に --debug フラグを付けて実行します。
npx playwright test --debug
このコマンドは、ブラウザウィンドウと Playwright Inspector を開きます。インスペクターの上部にあるステップオーバーボタンを使用してテストをステップ実行できます。または、再生ボタンを押してテストを最初から最後まで実行します。テストが完了すると、ブラウザウィンドウが閉じます。
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 Inspectorを使用したデバッグ、およびブラウザ開発者ツールを使用したデバッグの詳細については、デバッグガイドをご覧ください。
テストレポート
HTML レポーターは、テストの完全なレポートを表示し、ブラウザ、合格したテスト、失敗したテスト、スキップされたテスト、不安定なテストでレポートをフィルタリングできます。デフォルトでは、いくつかのテストが失敗した場合に HTML レポートが自動的に開きます。それ以外の場合は、次のコマンドで開くことができます。
npx playwright show-report
テストをフィルタリングして検索したり、各テストをクリックしてテストエラーを確認し、テストの各ステップを探索したりできます。
