こちらの記事で、Playwrightのインストール方法について記載した。
今回は、VS CodeにPlaywrightの拡張機能をインストールし、PlaywrightをVisual Studio Code（VS Code）に統合する方法を説明する。
インストールするPlaywrightの拡張機能のバージョンは、v1.1.7（2024/10/05時点で最新）
環境
- Windows 11 Home 23H2
- Visual Studio Code 1.92
- Node.js v20.12.2
インストール方法
手順１．VS CodeにPlaywrightの拡張機能をインストール
VS Codeの拡張機能ビュー（Ctrl+Shift+X）から、「Playwright Test for VSCode」をインストールする。
手順２．VS CodeプロジェクトにPlaywrightをインストール
コマンドパレット（Ctrl+Shift+P）で、以下のコマンドを実行する。
Test: Install Playwright
使用するブラウザを選択し、[OK]ボタンをクリックする。
Playwrightの構成が自動作成される。
手順３．テストビューの確認
VS Codeのアクティビティバーで[テスト]を選択し、以下が表示されていることを確認する。
- [テスト エクスプローラー]セクション…プロジェクト内のすべてのテストコード
- [PLAYWRIGHT]セクション…PROJECTS（プロジェクト）、SETTINGS（設定）、TOOLS（ツール）、SETUP（セットアップ）※各項目の概要については、メモ: [PLAYWRIGHT]セクションの項目概要に記述。
メモ: [PLAYWRIGHT]セクションの項目概要
上記、手順３で表示されるテストビューの[PLAYWRIGHT]セクションの項目について、概要を下表にまとめる。
| 項目 | 説明 |
| PROJECTS | |
| ┗ ＜プロジェクト＞ | playwright.config.tsに定義したプロジェクト。チェックしたプロジェクトに対し、テストを実行する。 |
| SETTINGS | |
| ┣ Show browser | チェックすると、テスト実行時にブラウザを起動する。 |
| ┗ Show trace viewer | チェックすると、テスト実行時にトレースビューアを起動する。 |
| TOOLS | |
| ┣ Pick locator | ブラウザ操作を通して指定した要素のLocatorをコピーする。 |
| ┣ Record new | ブラウザ操作に基づき、新規ファイルにテストを記録する。 |
| ┣ Record at cursor | ブラウザ操作に基づき、VS Codeで開いているファイルのカーソル行からテストを記録する。 |
| ┣ Reveal test output | テスト結果を出力する。 |
| ┗ Close all browsers | テストで起動したすべてのブラウザを閉じる。 |
| SETUP | |
| ┣ Run global setup | グローバル設定を実行する（データベース設定やサーバー起動などの初回のみ実行する設定） |
| ┣ Run global teardown | グローバル設定を破棄する（テストの後始末を実行する） |
| ┗ Clear cache | キャッシュをクリアする。 |
参考
Getting started - VS Code | Playwright
Introduction
playwright.dev
