入門 - 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
「Test: Install Playwright」を選択し、テストを実行したいブラウザを選択します。これらは後で playwright.config ファイルで設定できます。また、CI でテストを実行するための GitHub Actions セットアップ を行うかどうかを選択することもできます。
テストサイドバーを開く
テストサイドバーは、アクティビティバーのテストアイコンをクリックすると開きます。これにより、テストエクスプローラーにアクセスできるようになり、プロジェクト内のすべてのテストと、プロジェクト、設定、ツール、およびセットアップを含む Playwright サイドバーが表示されます。
テストの実行
テストブロックの横にある緑色の三角形をクリックして、単一のテストを実行できます。Playwright はテストの各行を実行し、完了すると、テストブロックの横に緑色のチェックマークと、テストの実行にかかった時間が表示されます。
テストを実行してブラウザを表示する
テストサイドバーで「Show Browsers」オプションを選択して、テストを実行し、ブラウザを表示することもできます。次に、緑色の三角形をクリックしてテストを実行すると、ブラウザが開き、テストが実行される様子を視覚的に確認できます。すべてのテストでブラウザを開いたままにする場合はこれをオンのままにし、ブラウザを開かずにヘッドレスモードでテストを実行する場合はオフにしてください。
「Close all browsers」ボタンを使用して、すべてのブラウザを閉じます。
すべてのテストを表示および実行する
テストサイドバーですべてのテストを表示し、各テストをクリックしてテストを展開します。実行されていないテストには、緑色のチェックマークが付いていません。テストサイドバーでテストにカーソルを合わせると表示される白い三角形をクリックして、すべてのテストを実行します。
複数のブラウザでテストを実行する
Playwright サイドバーの最初のセクションは、プロジェクトセクションです。ここでは、Playwright 設定ファイルで定義されているすべてのプロジェクトを確認できます。Playwright をインストールするときのデフォルト設定では、Chromium、Firefox、WebKit の 3 つのプロジェクトが提供されます。最初のプロジェクトはデフォルトで選択されています。
複数のプロジェクトでテストを実行するには、プロジェクト名の横にあるチェックボックスをオンにして、各プロジェクトを選択します。次に、サイドバーからテストを実行するか、テスト名の横にある再生ボタンを押すと、選択したすべてのプロジェクトでテストが実行されます。
テストのプロジェクト名の横にある灰色の再生ボタンをクリックして、特定のプロジェクトでテストを個別に実行することもできます。
トレースビューアーでテストを実行する
より良い開発者エクスペリエンスのために、「Show Trace Viewer」オプションを使用してテストを実行できます。
これにより、テストの完全なトレースが開き、テストの各アクションをステップスルーしたり、タイムライン、ソースコードなどを調べたりできます。
トレースビューアーの詳細については、トレースビューアーガイドを参照してください。
テストのデバッグ
VS Code 拡張機能を使用すると、VS Code でテストをデバッグし、エラーメッセージを表示したり、ブレークポイントを作成したり、テストをライブデバッグしたりできます。
エラーメッセージ
テストが失敗した場合、VS Code はエディターにエラーメッセージを表示し、何が期待されていたか、何が受信されたか、および完全なコールログを示します。
ライブデバッグ
VS Code でテストをライブデバッグできます。「Show Browser」オプションをオンにしてテストを実行した後、VS Code のロケーターのいずれかをクリックすると、ブラウザウィンドウで強調表示されます。Playwright は、存在する場合はそれを強調表示し、複数の結果があるかどうかを示します
VS Code でロケーターを編集することもでき、Playwright はブラウザウィンドウで変更をライブで表示します。
デバッグモードで実行
ブレークポイントを設定するには、ブレークポイントを設定したい行番号の横をクリックして、赤い点が表示されるまで待ちます。実行したいテストの横の行を右クリックして、デバッグモードでテストを実行します。
ブラウザウィンドウが開き、テストが実行され、ブレークポイントが設定された場所で一時停止します。VS Code のメニューからテストをステップ実行したり、テストを一時停止したり、テストを再実行したりできます。
デバッグの詳細については、Visual Studio Code でのデバッグを参照してください。
トレースビューアーでデバッグ
より良い開発者エクスペリエンスのために、「Show Trace Viewer」オプションを使用してテストをデバッグできます。
これにより、テストの完全なトレースが開き、各アクションをステップスルーして、アクションの前後に何が起こったかを確認できます。DOM スナップショットを調べたり、コンソールログ、ネットワークリクエスト、ソースコードなどを確認したりすることもできます。
トレースビューアーの詳細については、トレースビューアーガイドを参照してください。
テストの生成
CodeGen は、ブラウザでアクションを実行すると自動的にテストを生成し、迅速に開始するのに最適な方法です。ブラウザウィンドウのビューポートは、特定の幅と高さに設定されています。ビューポートを変更したり、さまざまな環境をエミュレートしたりするには、構成ガイドを参照してください。
新しいテストを記録する
テストを記録するには、テストサイドバーの「Record new」ボタンをクリックします。これにより、test-1.spec.ts ファイルが作成され、ブラウザウィンドウが開きます。ブラウザでテストしたい URL に移動し、クリックを開始します。Playwright はアクションを記録し、VS Code に直接テストコードを生成します。ツールバーのアイコンの 1 つを選択し、ページ上の要素をクリックしてアサートすることにより、アサーションを生成することもできます。次のアサーションを生成できます
'assert visibility'要素が表示されていることをアサートする'assert text'要素に特定のテキストが含まれていることをアサートする'assert value'要素が特定の値を持っていることをアサートする
記録が完了したら、「cancel」ボタンをクリックするか、ブラウザウィンドウを閉じます。その後、test-1.spec.ts ファイルを調べて、生成されたテストを確認できます。
カーソル位置で記録
テストファイル内の特定のポイントから記録するには、テストサイドバーの「Record at cursor」ボタンをクリックします。これにより、現在カーソル位置にある既存のテストにアクションが生成されます。テストを実行し、カーソルをテストの最後に配置して、テストの生成を続けることができます。
ロケーターを選択する
ロケーターを選択し、「Pick locator」ボタンをテストサイドバーからクリックして、テストファイルにコピーします。次に、ブラウザで必要な要素をクリックすると、VS Code の「Pick locator」ボックスに表示されます。キーボードの「Enter」キーを押してロケーターをクリップボードにコピーし、コード内の任意の場所に貼り付けます。キャンセルする場合は「Escape」キーを押します。
Playwright はページを見て、最適なロケーターを判断し、role、text、test id ロケーターを優先します。ジェネレーターがロケーターに一致する複数の要素を見つけた場合、ロケーターを改善して回復力を持たせ、ターゲット要素を一意に識別するため、ロケーターが原因でテストが失敗することを心配する必要はありません。
プロジェクトの依存関係
プロジェクトの依存関係を使用して、他のテストに依存するテストを実行できます。これは、ウェブサイトへのログインなどのセットアップテストに役立ちます。
セットアップテストの実行
セットアップテストを実行するには、Playwright サイドバーのプロジェクトセクションから、構成ファイルで定義されているセットアッププロジェクトを選択します。これにより、テストエクスプローラーでセットアップテストにアクセスできるようになります。
セットアップテストに依存するテストを実行すると、最初にセットアップテストが実行されます。テストを実行するたびに、セットアップテストが再び実行されます。
セットアップテストを一度だけ実行する
セットアップテストを一度だけ実行するには、Playwright サイドバーのプロジェクトセクションから選択を解除します。これで、セットアップテストがテストエクスプローラーから削除されました。セットアップテストに依存するテストを実行すると、セットアップテストは実行されなくなり、はるかに高速になり、開発者エクスペリエンスが大幅に向上します。
グローバルセットアップ
グローバルセットアップは、最初のテストを実行するときに実行されます。これは一度だけ実行され、データベースのセットアップやサーバーの起動に役立ちます。Playwright サイドバーのSetupセクションから「Run global setup」オプションをクリックして、グローバルセットアップを手動で実行できます。グローバルティアダウンはデフォルトでは実行されません。「Run global teardown」オプションをクリックして手動で開始する必要があります。
グローバルセットアップは、テストをデバッグするときに再実行されます。これにより、隔離された環境とテスト専用のセットアップが保証されるためです。
複数の構成
プロジェクトに複数の Playwright 構成ファイルが含まれている場合は、最初に Playwright サイドバーの右上隅にある歯車アイコンをクリックして、構成ファイルを切り替えることができます。これにより、プロジェクト内のすべての構成ファイルが表示されます。使用する構成ファイルを選択するには、各ファイルの横にあるチェックボックスをオンにして、「ok」ボタンをクリックします。
これで、テストエクスプローラー内のすべてのテストにアクセスできるようになります。テストを実行するには、ファイルまたはプロジェクト名の横にある灰色の三角形をクリックします。
すべての構成からすべてのテストを実行するには、テストエクスプローラーの上部にある灰色の三角形をクリックします。
操作する構成ファイルを選択するには、Playwright サイドバーで構成ファイル名をクリックして、それらを切り替えるだけです。ツール (Record a test など) を使用すると、選択した構成ファイルのテストが記録されます。
Playwright サイドバーで構成ファイル名をクリックすると、構成間を簡単に切り替えることができます。