こちらの記事でPlaywrightをご紹介しましたが、今回はPlaywrightをVSCodeの拡張機能で動かしてみました。
VSCodeの拡張機能「Playwright」 のインストール
①拡張機能「Playwright」のインストール
VSCodeの拡張機能インストーラを使用して Playwright Test for VSCode をインストールします。
②テスト実行環境のインストール
VSCodeのコマンドパレットを開いて（Ctrl + Shift + p） Test: Install Playwright を入力し、必要なブラウザを選んで「OK」を押下します。
ターミナルにインストールコマンドが表示され、最後に「Happy haking！」が表示されば完了です。
Playwright の実行
①Playwright のテスト用サイドバー
アイコンをクリックするとPlaywrightのテスト用サイドバーが開きます。
②テストの実行
緑色の三角形をクリックするとテストが実行されます。
テストごとに個別で実行したり、すべてのテストをまとめて実行することも可能です。
SETTINGS の Show browser にチェックを入れてテストを実行すると、ブラウザが開いてテストの実行が視覚的に表示されます。
SETTINGS の Show trace viewer にチェックをいれてテストを実行すると、 トレースビューワーが開いて、テストのアクションをステップ実行したり、タイムラインを確認したり、テストのソースコードや、DOMの状態も確認できます。
まとめ
npxコマンドをたたか（覚え）なくてもよい点で、コマンドラインから実行するよりも便利だと感じました。
ぜひ使ってみてください。
