はじめに - VS Code
はじめに
Playwright VS Code拡張機能は、Playwright Testのパワーをエディタに直接もたらし、シームレスなUI主導のエクスペリエンスでテストの実行、デバッグ、生成を可能にします。このガイドでは、拡張機能の設定と、その主要機能を使用してエンドツーエンドのテストワークフローを強化する方法について説明します。
前提条件
開始する前に、以下がインストールされていることを確認してください
- Node.js (LTSバージョンの推奨)
- Visual Studio Code
はじめに
インストールとセットアップ
- 拡張機能をインストール: VS Codeの拡張機能ビューを開き（
Ctrl+Shift+XまたはCmd+Shift+X）、「Playwright」を検索します。Microsoftの公式拡張機能をインストールします。
- Playwrightをインストール: 拡張機能がインストールされたら、コマンドパレットを開き（
Ctrl+Shift+PまたはCmd+Shift+P）、テスト: Playwrightをインストールコマンドを実行します。
- ブラウザを選択: テストに使用するブラウザ（例: Chromium、Firefox、WebKit）を選択します。CIでテストを実行するためのGitHub Actionsワークフローを追加することもできます。これらの設定は、後で
playwright.config.tsファイルで変更できます。
テストサイドバーを開く
VS Codeアクティビティバーのテストアイコンをクリックして、テストエクスプローラーを開きます。ここでは、テストのほか、プロジェクト、ツール、設定を管理するためのPlaywrightサイドバーが見つかります。
コア機能
テストの実行
- 単一テストの実行: 任意のテストの横にある緑色の「再生」アイコンをクリックして実行します。テストがパスすると再生ボタンは緑色のチェックマークに変わり、失敗すると赤いXに変わります。テスト名の横にテストの実行にかかった時間が表示されます。さらに、VS Codeの下部にテスト結果パネルが自動的に開き、実行されたテストの数、パス、失敗、スキップされたテストの数、合計実行時間を含むテスト実行の概要が表示されます。
- すべてのテストの実行: さまざまなレベルですべてのテストを実行できます。特定のテストファイルの横にある再生アイコンをクリックすると、そのファイル内のすべてのテストが実行され、テストエクスプローラーの一番上にある再生アイコンをクリックすると、プロジェクト全体ですべてのテストが実行されます。
- 複数のブラウザでの実行: Playwrightサイドバーで、テスト対象のプロジェクト（ブラウザ）のチェックボックスをオンにします。Playwrightのプロジェクトは、異なるブラウザ設定を表します。各プロジェクトは通常、独自のビューポートサイズ、デバイスエミュレーション、またはその他のブラウザ固有のオプションを持つ特定のブラウザ（Chromium、Firefox、WebKitなど）に対応します。テストを実行すると、選択されたすべてのプロジェクトで実行され、異なるブラウザと設定でアプリケーションが一貫して動作することを確認できます。
- ブラウザを表示: ライブブラウザウィンドウでテストの実行を見るには、サイドバーのブラウザを表示オプションを有効にします。ヘッドレスモード（目に見えるブラウザウィンドウを開かずにバックグラウンドでテストを実行する）で実行するには、無効にします。
テストのデバッグ
VS Code拡張機能は、テスト内の問題を特定して修正するのに役立つ強力なデバッグツールを提供します。ブレークポイントの設定、変数の検査、詳細なエラーメッセージの表示、AIによるテスト失敗の解決提案の取得、包括的なトレースビューアを使用したテスト実行の段階的な分析が可能です。
- ブレークポイントの使用: 行番号の横のガターをクリックしてブレークポイントを設定します。テストを右クリックし、テストをデバッグを選択します。テストはブレークポイントで一時停止し、変数を確認したり、コードをステップ実行したりできます。
- ライブデバッグ: ブラウザを表示が有効になっている場合、コード内のロケーターをクリックします。Playwrightはブラウザ内の対応する要素を強調表示し、ロケーターの確認を容易にします。
- エラーメッセージの表示: テストが失敗した場合、拡張機能は、予期された値と受信した値、および完全なコールログを含む詳細なエラーメッセージをエディタに直接表示します。
- AIで修正: テストが失敗した場合、エラーの横にあるキラキラアイコンをクリックすると、CopilotからAIによる修正提案が得られます。Copilotはエラーを分析し、問題を解決するためのコード変更を提案します。
- トレースビューアでのデバッグ: 包括的なデバッグのために、Playwrightサイドバーのトレースビューアを表示オプションを有効にします。テストが完了すると、詳細なトレースが自動的に開き、テスト実行の完全なタイムラインが提供されます。トレースビューアは特に次の場合に役立ちます。
- 段階的な分析: 正確なタイムスタンプでテストが実行した各アクションをナビゲートします
- DOM検査: テスト実行中の任意の時点でDOMスナップショットを表示し、ページがどのように見えたかを正確に確認します
- ネットワーク監視: テスト中に発生したすべてのネットワークリクエストとレスポンスを調べます
- コンソールログ: ブラウザからのすべてのコンソールメッセージとエラーにアクセスします
- ソースマッピング: 各アクションを実行したソースコードに直接ジャンプします
- 視覚的デバッグ: スクリーンショットを確認し、各ステップでユーザーが見たであろうものを理解します
トレースビューアは、不安定なテストのデバッグや複雑なユーザーインタラクションの理解に特に価値があります。
詳細については、トレースビューアガイドをご覧ください。
CodeGenによるテストの生成
CodeGenは、Webページとのインタラクションを記録することでテストコードを自動的に生成する、Playwrightの強力なテスト生成ツールです。テストをゼロから書く代わりに、アプリケーションをナビゲートするだけで、CodeGenがアクションをキャプチャし、適切なロケーターとアサーションを含む信頼性の高いテストコードに変換します。
- 新しいテストを記録: サイドバーで新規記録をクリックします。ブラウザウィンドウが開きます。ページを操作すると、Playwrightが自動的にテストコードを生成します。記録ツールバーからアサーションを生成することもできます。
- カーソル位置で記録: 既存のテスト内にカーソルを置き、カーソル位置で記録をクリックすると、その特定の場所に新しいアクションを追加できます。
- ロケーターを選択: ロケーターを選択ツールを使用して、開いたブラウザの任意の要素をクリックします。Playwrightは最適なロケーターを決定し、クリップボードにコピーして、コードに貼り付ける準備ができます。
詳細については、CodeGenガイドをご覧ください。
高度な機能
プロジェクトの依存関係
プロジェクトの依存関係を使用して、他のテストの前に実行されるセットアップテストを定義します。たとえば、最初に実行されるログインテストを作成し、その認証された状態を複数のテストで再利用して、各テストで再度ログインする必要をなくすことができます。VS Codeでは、これらのセットアップテストをテストエクスプローラーで確認し、必要に応じて個別に実行できます。
詳細については、プロジェクトの依存関係ガイドをご覧ください。
グローバルセットアップ
すべてのテストの前に一度だけ実行する必要があるタスク（データベースのシードなど）には、グローバルセットアップを使用します。Playwrightサイドバーからグローバルセットアップとティアダウンを手動でトリガーできます。
複数の設定
複数のplaywright.config.tsファイルがある場合、Playwrightサイドバーの歯車アイコンを使用してそれらを切り替えることができます。これにより、異なるテストスイートや環境で簡単に作業できます。
クイックリファレンス
| アクション | VS Codeで実行する方法 |
|---|---|
| Playwright のインストール | コマンドパレット → テスト: Playwrightをインストール |
| テストの実行 | テストの横にある「再生」アイコンをクリック |
| テストのデバッグ | ブレークポイントを設定し、テストを右クリック → テストをデバッグ |
| ライブブラウザを表示 | Playwrightサイドバーでブラウザを表示を有効にする |
| 新しいテストを記録 | Playwrightサイドバーで新規記録をクリック |
| ロケーターを選択 | Playwrightサイドバーでロケーターを選択をクリック |
| テストトレースを表示 | Playwrightサイドバーでトレースビューアを表示を有効にする |