演習: Visual Studio Code での Playwright の使用

完了

前のセクションでは、Playwright テスト構成とプレイライト テスト仕様に関連する主要な概念について説明しましたが、テストの実行とレポートの表示には Playwright コマンド ライン (CLI) を使用しました。

Visual Studio Code 環境内でこれを行い、テストの作成、実行、デバッグのための視覚的な対話プロセスを用意できた場合はどうでしょうか。

Playwright Test for Visual Studio Code 拡張機能を使用すると、優れた開発者エクスペリエンスと、プレイライト テスト ランナーとやり取りする好みの方法となる独自のツール機能を利用できます。 早速、試してみましょう。

作業の開始

Playwright のドキュメントには、ビデオ チュートリアルを含む包括的なチュートリアルがあり、自分の時間で視聴することをお勧めします。 このレッスンでは、これらの演習のサブセットについて説明し、使用方法について理解を深めます。

Playwright 拡張機能をインストールする

Visual Studio Code Marketplace から拡張機能をインストールします。 インストールが完了すると、スクリーンショットに示すように、Visual Studio Code ウィンドウの左側に beaker アイコンが表示されます。 拡張機能がプロジェクト内のテスト仕様を "自動的に" 検出して収集する方法に注目してください。

テストの実行 (ヘッドレス)

ヘッドレス方式 (ブラウザー ウィンドウなし) でテストを実行するには、[ブラウザーの 表示 ] オプションと [ トレース ビューアーの表示 ] オプションがオフになっていることを確認します。 example.spec.ts ファイルの 3 行目にある緑色の再生ボタンを選択して、最初のテストを実行します。 [テスト エクスプローラー] サイドバーで灰色の 再生 ボタンを選択して、ファイル内のすべてのテストを実行したり、特定のテストを実行したりすることもできます。

テストを実行すると、[ テスト結果 ] タブに、テスト実行の履歴全体を表示できるウィンドウが開きます。 また、テストにドリルダウンし、[テストの 実行 ] を選択してその特定のテストを再実行することもできます。

ブラウザーの表示 (ヘッド)

ヘッド モード (ブラウザー ウィンドウを開いた状態でテストを実行する) で実行する場合は、テストを実行する前に [ブラウザーの表示] ボックスをオンにできます。

Playwright は非常に高速なユーザーであり、 Show ブラウザーを使用するときにテストで何が起こっているかを追跡するのが困難になる可能性があります。 デバッグの場合は、[ トレース ビューアーの表示 ] オプションを使用することをお勧めします。

トレース ビューアーの表示 (ヘッド)

[ トレース ビューアーの表示 ] ボックスをオンにし、2 番目のテストの緑色の 再生 ボタンを選択します。 これにより、トレース ビューアー ウィンドウが起動し、テスト実行の視覚的な表現が表示されます。

上部に、ブラウザーの状態を確認するためにマウス ポインターを合わせることができるテストのタイムラインが表示されます。 フォーカスする特定の時間範囲を選択するには、タイムラインを選択してドラッグします。

左側のサイド バーには、テスト実行中に実行されたアクションが表示されます。 locator.click アクションを選択すると、DOM スナップショットの [開始] ボタンに赤い点が表示されます。

次に、expect.toBeVisible アサーション を選択すると、DOM スナップショットがアサーションしている見出しが強調表示された [インストール] ページを表示するように変更されていることがわかります。 DOM スナップショットの上にある [ Before ] ボタンと [ After ] ボタンを選択すると、アクションが実行される前と後の DOM の状態を確認できます。

右上隅にあるポップ アウト アイコンを選択すると、DOM スナップショットを別のウィンドウに ポップ アウト できます。 これは、テストのデバッグ中に DOM を検査する場合に便利です。

デバッグと言えば、下部パネルの [ロケーターの選択] ボタンを選択して、DOM スナップショットから ロケーターを選択 することもできます。 次に、DOM スナップショット上の要素にカーソルを合わせると、その要素のロケーターが表示されます。 要素を選択すると、トレース ビューアーの下部にある [ロケーター ] ボックスに追加され、クリップボードにコピーする前に編集できます。

[呼び出し]、[コンソール]、[ネットワーク]、[ソース] タブなど、トレース ビューアーの残りの機能を自由に探索できます。

デバッグテスト

デバッグの場合は、[ トレース ビューアーの表示 ] オプションを使用してテストを実行し、テストのトレースを使用して、何が起こっているかを理解することをお勧めします。

ただし、Visual Studio Code 拡張機能を使用すると、Visual Studio Code でテストを直接デバッグしたり、エラー メッセージを表示したり、ブレークポイントを作成したり、テストをライブ デバッグしたりすることもできます。 ドキュメントの詳細を確認 するか、次のビデオを参照して、デバッグのサポートを理解してください。

テストの生成

CodeGen では、ブラウザーでアクションを実行するときにテストが生成されるため、複雑なワークフローのテストの作成を開始する最も簡単な方法になります。

テストを生成するには、Visual Studio Code のテスト サイドバーで [ 新しい レコード] ボタンを選択します。 これにより、記録されてテストに変わるアクションを実行できるブラウザー ウィンドウが開きます。 また、生成されたテストを使用して、 tests フォルダー内の新しいファイルが作成されていることにも注目してください。

ブラウザー ウィンドウに URL を入力し、ユーザーが行うようなアクションの実行を開始します。 VS Code のテスト ファイルにアクションが記録されているのがわかります。

Playwright Web サイトに移動し、[ 開始 ] ボタンを選択して、前に実行した簡単なテストを再作成してみましょう。 次に、Codegen ツール バーから [Assert Visibility] アイコンを選択し、[Installation]\ (インストール \) 見出しを選択して、表示されていることをアサートできます。

テストの生成の詳細については、次のビデオを参照してください。

次のステップ

このセクションでは、Visual Studio Code 拡張機能を使用してテストを検索して実行する方法と、トレース ビューアーを使用してテストをより視覚的にデバッグする方法について説明しました。

また、Visual Studio Code では、[新しいテストの記録]、[ロケーターの選択]、[カーソル位置の記録] 機能を使用してテストを生成するための豊富なツールが提供される方法についても説明しました。 次に、ガイド付きプロジェクトで Playwright Fundamentals の学習を 適用 し、サンプル アプリのエンド ツー エンドのテスト仕様を構築します。