Playwrightでテスト作成、実行する上で便利なのが
VS CodeのExtention（拡張機能）である”Playwright Test for VSCode”。
公式ドキュメントもあります。
公式ドキュメントを参考にインストールしてみると、VS Codeのメニューにフラスコマークが出てきます。
ここまでは公式ドキュメントを読むと何となくわかるのですが、
ここからが「で？どう使うの？」という感じで困りました。
英語だし、翻訳してもいまいちピンとこない。
この記事では、フラスコマークをクリックした後の各メニューについてまとめます。
フラスコマークをクリックすると「テスト エクスプローラー」と「PLAYWRIGHT」に分かれています。
- エクスプローラー
- 今あるテストを表示
- テストの横に再生ボタンが表示され、再生できる
- PLAYWRIGHT
- PLAYWRIGHTの設定
エクスプローラー
テストとして認識されるのはPlaywrightの設定である
“playwright.config.ts”の”testDir: ‘./tests’,”にマッチした場所がテストと認識されます。
PLAYWRIGHT
PLAYWRIGHTの下は4つのブロックに分かれています
- TOOLS
- PROJECTS
- SETUP
- SETTINGS
TOOLS
Playwrightでテストを作るための補助ツールです。
Pick locator
クリックした後ブラウザ画面に戻ると、ロケーターを教えてくれます。
VS Code側に戻るとロケーターをコピーすることができます。
Record new
クリックすると “test-1.spec.ts” が作成され、画面操作することでテストの録画ができます。
録画方法等はCLIから自動生成ツール「codegen」を起動した時と同じです。
こちらの記事を参考にしてください。
Record at cursor
クリックすると、カーソルの位置からテストの録画ができます。
Reveal test output
テスト実行結果のログを表示する機能です。
Close all browsers
SETTINGS > Show browser にチェックを入れると、テスト実行時ブラウザを表示します。
Close all browsersをクリックすると、表示したブラウザを閉じます。
PROJECTS
複数ブラウザでテスト実行するための設定です。
- chromium
- firefox
- webkit
チェックを入れたブラウザでテスト実行します。複数チェック可能です。
Playwrightの設定である “playwright.config.ts” の “projects: []” に設定しているブラウザを表示します。
SETUP
テスト前の設定やテスト後の後処理を行います。
Run global setup
クリックすると、手動でglobal setupだけ実行します。
テストの事前準備だけ先にやりたいときに使います。
Run global teardown
クリックすると、手動でglobal teardownだけ実行します。
テストの後処理だけしたいときに使います。
Clear cache
キャッシュ削除です。
SETTINGS
Playwrightの設定です。
Show browser
チェックを入れてテスト実行すると、テスト実行時ブラウザを表示します。
Show trace viewer
チェックを入れてテスト実行すると、”playwright. trace viewer”
playwright.がテスト中の状態を記録しており、それをtrace (追跡) することができます。
Run global setup on each run
チェックを入れると、テストを実行するたびに自動でglobal setupを実行します。
ログイン状態を毎回作り直したい時などにチェックを入れます。
まとめ
VSCodeのExtention（拡張機能）である”Playwright Test for VSCode”でできることを解説しました。
- エクスプローラー
- 今あるテストを表示してテスト再生操作ができる
- PLAYWRIGHT
- TOOLS：テスト作成のための補助ツール
- PROJECTS：複数ブラウザでテスト実行するための設定
- SETUP：テスト前後の処理
- SETTINGS：Playwrightの設定
Playwright でテスト作成するのにとても便利な拡張機能なのでぜひ活用してみてください。
