はじめに - VS Code
はじめに
Playwright Testは、エンドツーエンドテストのニーズに対応するために特別に作成されました。Playwrightは、Chromium、WebKit、Firefoxを含むすべての最新レンダリングエンジンをサポートしています。Windows、Linux、macOS、ローカルまたはCIで、ヘッドレスまたはヘッダー付きで、Android用Google ChromeおよびMobile Safariのネイティブモバイルエミュレーションを使用してテストを実行できます。
Playwrightをインストールし、テストを生成して動作を確認することから始めましょう。または、CLIを使用してテストを開始し、実行することもできます。
インストール
PlaywrightにはVS Code拡張機能があり、Node.jsでテストする際に利用できます。VS Code marketplaceまたはVS Codeの拡張機能タブからインストールしてください。
インストール後、コマンドパネルを開いて入力します。
Install Playwright
「テスト: Playwrightをインストール」を選択し、テストを実行したいブラウザを選択します。これらは後でplaywright.configファイルで設定できます。また、CIでテストを実行するためのGitHub Actionsセットアップを希望するかどうかも選択できます。
テストサイドバーを開く
テストサイドバーは、アクティビティバーのテストアイコンをクリックして開くことができます。これにより、プロジェクト内のすべてのテストを表示するテストエクスプローラーと、プロジェクト、設定、ツール、セットアップを含むPlaywrightサイドバーにアクセスできます。
テストの実行
テストブロックの隣にある緑色の三角形をクリックすると、単一のテストを実行できます。Playwrightはテストの各行を実行し、完了するとテストブロックの隣に緑色のチェックマークとテストの実行にかかった時間が表示されます。
テストを実行し、ブラウザを表示する
テストサイドバーで「ブラウザを表示」オプションを選択すると、テストを実行してブラウザを表示することもできます。緑色の三角形をクリックしてテストを実行すると、ブラウザが開き、テストが実行されるのを視覚的に確認できます。すべてのテストでブラウザを開いたままにしたい場合はこれをオンにし、ブラウザを開かずにヘッドレスモードでテストを実行したい場合はオフにしてください。
「すべてのブラウザを閉じる」ボタンを使用して、すべてのブラウザを閉じます。
すべてのテストを表示して実行する
テストサイドバーですべてのテストを表示し、各テストをクリックしてテストを展開します。実行されていないテストには緑色のチェックマークは表示されません。テストサイドバーでテストにカーソルを合わせると表示される白い三角形をクリックして、すべてのテストを実行します。
複数のブラウザでテストを実行する
Playwrightサイドバーの最初のセクションはプロジェクトセクションです。ここでは、Playwright設定ファイルで定義されているすべてのプロジェクトを確認できます。Playwrightをインストールした際のデフォルト設定では、Chromium、Firefox、WebKitの3つのプロジェクトが提供されます。最初のプロジェクトはデフォルトで選択されています。
複数のプロジェクトでテストを実行するには、プロジェクト名の横にあるチェックボックスをオンにして、各プロジェクトを選択します。その後、サイドバーからテストを実行するか、テスト名の横にある再生ボタンを押すと、選択したすべてのプロジェクトでテストが実行されます。
テストのプロジェクト名の横にある灰色の再生ボタンをクリックすると、特定のプロジェクトで個別にテストを実行することもできます。
トレースビューアーでテストを実行する
より良い開発者エクスペリエンスのために、「トレースビューアーを表示」オプションを使用してテストを実行できます。
これにより、テストの完全なトレースが開かれ、テストの各アクションをステップ実行したり、タイムライン、ソースコードなどを探索したりできます。
トレースビューアーの詳細については、トレースビューアーガイドを参照してください。
テストのデバッグ
VS Code拡張機能を使用すると、VS Code内で直接テストをデバッグし、エラーメッセージを確認し、ブレークポイントを作成し、ライブでテストをデバッグできます。
エラーメッセージ
テストが失敗した場合、VS Codeはエディターに直接エラーメッセージを表示し、期待されたもの、受け取ったもの、および完全な呼び出しログを示します。
ライブデバッグ
VS Codeでテストをライブデバッグできます。「Show Browser」オプションをオンにしてテストを実行した後、VS Code内の任意のロケーターをクリックすると、ブラウザウィンドウでハイライト表示されます。Playwrightは存在する場合にそれをハイライト表示し、結果が複数ある場合はそれも表示します。
VS Codeでロケーターを編集すると、Playwrightはブラウザウィンドウで変更をライブ表示します。
デバッグモードで実行
ブレークポイントを設定するには、ブレークポイントを設定したい行番号の横をクリックし、赤い点が表示されるまで続けます。実行したいテストの行の横を右クリックして、デバッグモードでテストを実行します。
ブラウザウィンドウが開き、テストが実行され、ブレークポイントが設定されている場所で一時停止します。VS Codeのメニューから、テストをステップ実行したり、テストを一時停止したり、再実行したりできます。
デバッグの詳細については、「Visual Studio Code でのデバッグ」を参照してください。
トレースビューアーでデバッグ
より良い開発者エクスペリエンスのために、「トレースビューアーを表示」オプションを使用してテストをデバッグできます。
これにより、テストの完全なトレースが開かれ、各アクションをステップ実行して、アクションの前後で何が起こったかを確認できます。DOMスナップショットの検査、コンソールログ、ネットワークリクエスト、ソースコードなども確認できます。
トレースビューアーの詳細については、トレースビューアーガイドを参照してください。
テストの生成
CodeGenは、ブラウザでのアクションを自動的にテストとして生成するため、迅速に開始するのに最適な方法です。ブラウザウィンドウのビューポートは特定の幅と高さに設定されています。ビューポートを変更したり、異なる環境をエミュレートしたりするには、設定ガイドを参照してください。
新しいテストを記録する
テストを記録するには、テストサイドバーの「新規記録」ボタンをクリックします。これにより、`test-1.spec.ts`ファイルが作成され、ブラウザウィンドウが開きます。ブラウザでテストしたいURLにアクセスし、クリック操作を開始します。Playwrightはあなたのアクションを記録し、テストコードをVS Codeに直接生成します。また、ツールバーのアイコンのいずれかを選択し、ページ上の要素をクリックしてアサートすることで、アサーションを生成することもできます。以下の種類のアサーションを生成できます。
- `'assert visibility'` (要素が可視であることをアサートする)
- `'assert text'` (要素が特定のテキストを含むことをアサートする)
- `'assert value'` (要素が特定の値を持つことをアサートする)
記録が完了したら、「キャンセル」ボタンをクリックするか、ブラウザウィンドウを閉じます。その後、`test-1.spec.ts`ファイルを確認し、生成されたテストを見ることができます。
カーソル位置で記録
テストファイルの特定の時点から記録するには、テストサイドバーの「カーソル位置で記録」ボタンをクリックします。これにより、既存のテストの現在のカーソル位置にアクションが生成されます。テストを実行し、テストの最後にカーソルを配置して、テストの生成を続行できます。
ロケーターを選択する
ロケーターを選択し、テストサイドバーの「ロケーターを選択」ボタンをクリックしてテストファイルにコピーします。次に、ブラウザで必要な要素をクリックすると、VS Codeの「ロケーターを選択」ボックスに表示されます。キーボードの「Enter」を押してロケーターをクリップボードにコピーし、コードの任意の場所に貼り付けます。キャンセルしたい場合は「Escape」を押してください。
Playwrightはページを分析し、ロール、テキスト、テストIDのロケーターを優先して最適なロケーターを特定します。ジェネレーターがロケーターに一致する複数の要素を見つけた場合でも、ロケーターを改善して堅牢にし、ターゲット要素を一意に識別するようにします。そのため、ロケーターが原因でテストが失敗する心配はありません。
プロジェクトの依存関係
プロジェクトの依存関係を使用して、他のテストに依存するテストを実行できます。これは、ウェブサイトへのログインなどの「セットアップ」テストに役立ちます。
セットアップテストの実行
セットアップテストを実行するには、Playwrightサイドバーのプロジェクトセクションから、構成ファイルで定義されている「セットアップ」プロジェクトを選択します。これにより、テストエクスプローラーで「セットアップ」テストにアクセスできます。
「セットアップ」テストに依存するテストを実行すると、まず「セットアップ」テストが実行されます。テストを実行するたびに、「セットアップ」テストが再度実行されます。
セットアップテストを一度だけ実行する
「セットアップ」テストを一度だけ実行するには、Playwrightサイドバーのプロジェクトセクションからその選択を解除します。これにより、「セットアップ」テストはテストエクスプローラーから削除されます。「セットアップ」テストに依存するテストを実行しても、「セットアップ」テストは実行されなくなり、はるかに高速になるため、より良い開発者エクスペリエンスが得られます。
グローバルセットアップ
「グローバルセットアップ」は、最初のテストを実行したときに実行されます。一度だけ実行され、データベースのセットアップやサーバーの起動に役立ちます。Playwrightサイドバーの「セットアップ」セクションから「グローバルセットアップを実行」オプションをクリックすることで、「グローバルセットアップ」を手動で実行できます。「グローバルティアダウン」はデフォルトでは実行されません。「グローバルティアダウンを実行」オプションをクリックして手動で開始する必要があります。
グローバルセットアップは、テストをデバッグする際に再実行されます。これは、分離された環境とテスト専用のセットアップを保証するためです。
複数の構成
プロジェクトに複数のPlaywright設定ファイルが含まれている場合、Playwrightサイドバーの右上隅にある歯車アイコンを最初にクリックすることで、それらを切り替えることができます。これにより、プロジェクト内のすべての設定ファイルが表示されます。使用したい設定ファイルの横にあるチェックボックスをオンにし、「OK」ボタンをクリックして選択します。
これで、テストエクスプローラー内のすべてのテストにアクセスできます。テストを実行するには、ファイル名またはプロジェクト名の横にある灰色の三角形をクリックします。
すべての構成のすべてのテストを実行するには、テストエクスプローラーの上部にある灰色の三角形をクリックします。
作業する設定ファイルを選択するには、Playwrightサイドバーの設定ファイル名をクリックして切り替えるだけです。これで、テストの記録などのツールを使用すると、選択した設定ファイルに対してテストが記録されます。
Playwrightサイドバーの設定ファイル名をクリックすることで、設定間を簡単に行き来できます。