私が2019年ごろフロントエンドのE2Eテストを作ろうとして調べたところ、Seleniumというツール以外の選択肢がありませんでした。当時はSeleniumが使いづらくE2Eテストの自動化を断念した覚えがあります。
最近Reactのアプリを作る様になってPlaywrightを目にする機会が増えました。気になって調べたところ、UIモードでのデバッグ、UIモードでテストの生成、マルチブラウザ対応、スクリーンショットの取得など非常に便利な機能が多く使いやすそうでした。
興味が湧いて「[入門]WebフロントエンドE2Eテスト -PlaywrightによるWebアプリの自動テストから良いテストの書き方まで」を読んだので、今回は本書のレビューをします。
基本情報と対象読者
本書は243ページ、全11章で構成されています。
本書は以下のような考えや悩みを持っている読者におすすめです。
- WebアプリケーションのE2Eテストを導入しようとしている
- WebアプリケーションのE2Eテストを手動から自動化したい
- E2Eテストはあるがコストが高い、保守性で課題を感じている
各章の紹介と感想
第1章 Playwrightハンズオン
Playwrightのハンズオンを通して基本的な使い方を学ぶことがでます。
特に、UIモードを使ってテストを実行する項目、VS Code拡張機能を使ったテスト実行する項目、テスト生成ツールを使ってテストを作る項目はPlaywrightの凄さを実感する内容でした。
第2章 E2Eテストツールの紹介
E2Eツールの歴史や、PlaywrightとCypress、Puppeteerを比較した内容が載っています。Playwrightの導入検討に役立ちます。
第3章〜第5章
第3章 Playwrightおテスト用ツールセット(1)ロケーター
第4章 Playwrightおテスト用ツールセット(2)ロケーター ナビゲーション、アクション、マッチャー
第5章 テストコードの組み立て方
第3章から第5章はPlaywrightでよく使われるテストAPIセットが紹介されています。Playwrightでテストを書くときに非常に役立つ内容になっています。
壊れにくいテストを書く方法も載っていますが、私は、読んですぐに理解できたというよりは、何度もテストを書いて、壊れにくいテストを書くコツを学んでいけたと思います。
第6章 実践的なテクニック
第6章は実践的なテクニックとして、スクリーンショットを撮影する機能、録画機能、認証が必要なページのテスト方法、ネットワークの監視方法などが紹介されています。
私は様々なプロジェクトに参画しましたが、多くのプロジェクトのE2Eテストは手順書に従って手動でブラウザを操作して目視による確認とスクリーンショットを撮っていました。
Playwrightのスクリーンショット機能は、クリックボタンを赤丸で印をつけたり、チェックしたいテキストには青い枠を囲ってくれます。手動テストとほぼ同等のことができるため、今後はPlaywrightを採用するプロジェクトが増えると実感しました。
第7章 ソフトウェアテストに向き合う心構え
第7章はソフトウェアテストに対する考え方や、E2Eテストと他のユニットテストやコンポーネントテストなどとの関係について書かれています。
ReactやVue.jsの登場によりフロントエンドのテストは多様化しました。コスト面や開発期間によってはユニットテスト〜E2Eテストの全てのテストを作るのは難しいでしょう。そのような時にどのテストを優先すべきかを判断する助けになる内容になっていると思います。
総評
PlaywrightはE2Eテストの常識を覆すような素晴らしいソフトウェアだと思いました。特にスクリーンショットを撮る機能は画期的です。CIでテストの自動実行をすれば、バグの早期発見ができ納期ギリギリでバグ回収に追われる機会が減るでしょう。
Playwrightに関する情報は公式サイト（英語）以外はまだまだ少ないなと思います。本書は日本語で書かれており内容も充実しているので初めて学ぶには最適な一冊だと思います。
