Playwright v1.32.0 で追加されたUI Modeを試してみた
はじめに
先日、Playwright v1.32.0 がリリースされました🎉
追加された機能の中で特に気になった UI Mode を試してみたので、本記事では試したことや試した感想などをまとめようと思います。
環境
- Playwright v1.32.1
UI Modeとは
UI Mode ではテストを実行したり、デバッグするための機能が実装されています。
特にユニークな機能だと感じたのは下記の2点です。
- Watch mode（テストファイルが変更されたら自動でテストを実行してくれる）
- アクション（ボタンクリックなど）ごとのスナップショット
ヘッドレス版 Watch mode
これはまだ公式からアナウンスされていない機能ですが、実はヘッドレスモード版 Watch mode もあるみたいです。
試しに PWTEST_WATCH=1 をつけてテストを実行してみたところ、確かにヘッドレスな Watch mode が起動しました。
単純に Watch mode だけ使いたい場合はこちらを使うのもありかなと思いました。（公式でアナウンスされている機能ではないので今後も使えるかは不明）
$ PWTEST_WATCH=1 npx playwright test
UI Modeを試してみる
Playwright が v1.32.0 以上であれば、下記のコマンドを実行することで UI Mode を立ち上げることができます。
npx playwright test --ui
上記のコマンドを実行すると添付のような画面が表示されます。
UI Mode でテストを実行する
赤枠で囲っているアイコンを押すことでテストを実行できます。
UI Mode では下記の単位でテストを実行できます。
- 全テストファイル
- 単一のテストファイル
- 単一のテストグループ
- 単一のテスト
全テストファイルのテストを実行
Watch mode を試す
赤枠で囲っているアイコンを押すことで Watch mode になります。
Watch mode で指定できる単位はテストを実行する時と同様です。
- 全テストファイル
- 単一のテストファイル
- 単一のテストグループ
- 単一のテスト
全テストファイルを watch 対象にした後、テストファイルを変更
アクション（ボタンクリックなど）ごとのスナップショット
アクションごとのスナップショットだけでなく、アクション前後のスナップショットも確認できます。こけたテストを直す時に直前のアクションを見たりできると便利かもしれないです。
アクションごと & アクション前後のスナップショット
その他細かい機能
説明は省略しますが、他にも便利そうな機能がいくつか実装されています。
- 失敗したテストをフィルタリングしてテストを流せる
- 各アクション後のコンソールやネットワークのログの閲覧が可能
- etc...
試してみた感想
UI Mode は機能が豊富だったので使いこなせれば便利に使えそうだと感じました。
特に Watch mode は積極的に使っていきたいと思っています。
ただ1点、筆者が Playwright のテストを書く時によく使う、ステップ実行をする方法がないところは少し残念です。そのため、しばらくは UI Mode と Playwright Inspector を併用していくことになりそうかなと思っています。
とはいえ、UI Mode はまだプレビュー段階なので今後も便利な機能が追加されることを期待したいです！
Discussion