こんにちは、ウィルゲートのコンテンツ開発チームに所属するエンジニアの清水(@takaaki_w)です。
今回は、私たちのチームがE2E（エンドツーエンド）テストツールとしてPlaywrightを導入した背景から選定理由、所感をお届けします。
E2Eテストツール導入の背景
昔々、弊プロダクトで、Puppeteer(E2Eテストツールの一種)で自動テストを作成していましたが、次第に保守されなくなっていきました。
時が経ち2023年夏、そのプロダクトはより多くの方に使ってもらえることになり、多くの機能追加と品質の担保が求められるようになりました。
当初は手動テストで品質を担保しようとしましたが、時間が無限に足りなくなってしまうため、下記の順番で自動テストを増やすことになりました。
- E2Eテストでカバレッジを増やす
- リファクタリングを進めてユニットテストを書きやすくする
- ユニットテストの比率を増やしていく
なぜ上記の順番かを簡単にご説明します。
そもそも自動テストがなく(当然)カバレッジが低い状態のため、ユニットテストを実装するためのリファクタリングをしたくても障害のリスクが大きくなってしまいます。
そのためにまずはテストカバレッジを上げる必要がありますが、E2Eテストは様々な自動テストの中でもより包括的なテストなので、テストカバレッジを比較的容易に稼ぐことができます。
以上の経緯から、以前使っていたPuppeteerを含めE2Eテストツールを選定することになりました。
選ばれたのはPlaywrightでした
結論、Playwrightが選ばれました。以下に他のE2Eテストツールとの比較と、その理由を記載します。
他のE2Eテストツールとの比較
下記は業務委託で入っていただいている篠田さん(@pinkumohikan)にまとめていただいたものになります。 とてもわかりやすいですね。
| 観点＼ツール | Laravel Http Tests | Puppeteer | Cypress | Playwright |
|---|---|---|---|---|
| 学習コスト | 低 | 中 | 高 | 高 |
| 弊社採用実績 | × | ◯ | × | × |
| Google Trend | - | 3位 | 1位 | 2位 |
| GitHub Star※ | - | 86.8k | 46.1k | 61.7k |
| HTTP Test | ◯ | × | × | ◯ |
| Visual Regression Test | × | △(Jestとプラグインを組み合わせれば出来る) | △(プラグインで可能) | ◯ |
| UI Component Test | × | × | ◯ | △(実験的) |
| テスト並列実行 | △(paratestやmake -jなどで力技は可能) | × | △(Cypress Cloudへ課金 or 3rd-partyプラグインで可能) | ◯ |
| ビデオ録画 | × | △(プラグインを使えばできそう) | ◯ | ◯ |
| 開発主体 | Laravel Community | Google社 | Cypress社 | Microsoft社 |
| その他特筆事項 | Laravel組み込み | - | auto-waiting | auto-waiting、ファイルダウンロードサポート、ブラウザ操作からのテスト自動生成 |
※2024年4月時点
Playwrightが選ばれた理由
デメリットもありますが、他E2Eに比べて大きくメリットがあったためPlaywrightに決まりました。
メリット
- サポートされているブラウザが一番多い(Chrome, Firefox, MS Edge Chromium ver, Safari)
- 当プロダクトはスマホ上のブラウザで操作されることもあるため、カバーしてくれる部分が多い
- 今後の保守のしやすさ
- チームメンバーは全員Playwright未経験だが、書き方がJestに似ているのでキャッチアップしやすそう
- Puppeteerの上位互換と呼ばれ、人気も急上昇しているのでしばらくはサポートが続きそうな点が高評価
- 並列実行ができる
- E2Eテストは育ってくると実行時間がかかりがちになる問題が起きるので、デフォルトで並列実行ができるのは高評価
- その他
- アプリのコア機能の1つである、ファイルのアップロードやダウンロード操作も可能ということも安心材料
デメリット
- UIコンポーネントテストは試験サポート
- OSSだが、開発主体が私企業なので「開発やめる」の一声で開発が終わる可能性あり
Playwrightを導入してみて
メンバーが皆初めて触るので、モブプロをしながらテスト作成を進めていますが、ドキュメントも豊富にありキャッチアップがしやすい印象です。
一方、2段階認証のテストについてはトークン取得やメールサービスへの依存などを考慮する必要があるため、工夫が必要そうです。
これから/おわりに
現状はまだPlaywrightを選んだ理由の「並列実行」や「ファイルアップロード・ダウンロード操作」などの恩恵は受けられていないので、今後テストを増やしていく中で気づいたことを「実践編」としてブログをお届けする予定です。
E2Eテストツール導入を検討している皆様にとって、私たちの経験が参考になれば幸いです。
