この記事ではPlaywrightの実行方法についてまとめました。
Playwrightの実行は3種類あります。
- UIモード
- CLI
- VS Codeの拡張機能
1. UIモード
UIモードは、テストが失敗した場所を見て問題の原因を探すのに便利です。
UIモードは下記のコマンドで起動します。
npx playwright test --uiデスクトップアプリケーションが立ち上がります。
UIモードはChromiumベースのテスト実行できるようになっています。
左上（①内）の「Projects」をクリックすると他のブラウザも選択可能です。
なお、デバッガーをと統合したテストデバッグ実行は「VS Codeの拡張機能」で行います。
UIモードは左右の「ペイン」に分かれます。
左側のペイン（①）は主に「テスト実行」と「テストケースの選択」を行います。
右側のペイン（②〜⑤）は「テスト中のレポート」です。
なお、UIモードはしばらく操作しないと「つながらない」というメッセージを表示します。
下記で復帰可能です。
- Windows：Ctrl + R
- Mac：comamand + R
2. CLI
CLIとは「コマンドラインインターフェース」
全ての操作をキーボード操作だけで行うことです。
複数のブラウザで実行し、結果をまとめて報告可能です。
npx playwright test [テストオプション][テストフィルタ][テストオプション]は次のようなものがあります。
- –reporter=プロジェクト名
- プロジェクトを指定して実行します。
複数のブラウザテストは、ブラウザ毎にプロジェクトを作成して実施します
- プロジェクトを指定して実行します。
- –headed
- ウインドウを表示した状態でテスト実行します
[テストフィルタ]には次のようなオプションがあります。
- 何も設定しない
- 全てのテストケースを実行します
- フォルダの指定
- そのフォルダに含まれるテストを実行します
- -g “テストケース名”
- テストケース名を指定します。部分一致でも選択されます
- ファイルに含まれる文字列の指定
- その文字列がファイル名に含まれるテストを実行します
- テストコード：行番号
- その行のテストケースのみ実行します
ブラウザ（プロジェクト）毎の成功/失敗の情報や、アクション情報、実行時間は
「playwright-report」フォルダ内の「index.html」に出力します。
下記コマンドで閲覧可能です。
npx playwright show-report3. VS Codeの拡張機能
VS Codeの拡張機能はUIモードに近い操作でテスト実行可能です。
左側の[テスト]タブの▷を押すことでテスト実行可能です。
UIモードと異なるメリットとデメリット、デメリットに対する対応方法は下記になります。
メリット
- テスト実行するプロジェクト（ブラウザ）を選択可能
- デバッグ実行可能
デメリット
- デフォルトでは詳細なテストレポートの閲覧不可
「成功か失敗」「失敗時の詳細情報」「処理時間」ぐらいの結果しか見れません。
UIモードで詳細レポートを見られるようにしたい場合は
「PLAYWRIGHT」ペインの「SETTINGS > Show trace viewer」にチェックを入れましょう。
なお、VS Codeの拡張機能の拡張機能はこちらになります。
まとめ
Playwrightの実行方法について紹介しました。
- UIモード
- CLI
- VS Codeの拡張機能
Playwrightをめて触る場合はUIモードが視覚的にわかりやすいと思います。
他の方法もテストに合わせて試してみてください。
