【E2Eテスト】Selenium, Playwright, Cypress, Puppeteer フレームワーク比較
はじめに
E2E テストを行うにあたりフレームワークの選定を行いました。2024 年 11 月時点の情報であり、数年後には再調査が必要になると思います。
どれを使えばいいか迷っている人はぜひ参考にしてください。
今回の比較対象 E2E テストフレームワーク
E2E テストで広く利用される主要な 4 つのフレームワークを選びました。
-
オープンソースのフレームワークで歴史と実績がある。
-
Microsoft が開発したモダンなフレームワークで、複雑な操作をサポート。
-
学習コストが低く、直感的な UI。シングルブラウザ環境でのテストがメイン。
-
Google が開発した、軽量でシンプルな API を持つフレームワーク。
【比較】npm ダウンロード数
2024 年 11 月時点の npm ダウンロード数を比較しました。
グラフを見るとPlaywrightが最も人気であることがわかります。
また、5 年前に一番人気だったSeleniumはダウンロード数が増えない一方で、他のフレームワークがシェアを広げてきたようです。
2024 年までの過去 5 年間における主要 E2E テストフレームワーク（Cypress、Playwright、Puppeteer、Selenium WebDriver）の npm ダウンロード数推移
【比較】対応ブラウザ
サポートされているブラウザを表にしました。
クロスブラウザテストを重視するプロジェクトでは対応するブラウザに注意することが必要です。もし Safari 対応が必須であれば Selenium か Playwright が適切です。
| ブラウザ | Selenium | Playwright | Cypress | Puppeteer |
|---|---|---|---|---|
| Chrome | ✔️ | ✔️ | ✔️ | ✔️ |
| Safari | ✔️ | ✔️ | ❌ | ❌ |
| Firefox | ✔️ | ✔️ | ✔️ | ✔️ |
| Edge (Chromium) | ✔️ | ✔️ | ✔️ | ✔️ |
ドキュメント: Selenium | Playwright | Cypress | Puppeteer
【比較】機能
各フレームワークの主要機能を以下に比較しました。
Playwrightは、多くの機能が標準で提供されており、自前での実装を省くことができる点が人気の理由の一つといえます。
| 機能 | Selenium | Playwright | Cypress | Puppeteer |
|---|---|---|---|---|
| 1. 自動待機 | ✔️ | ✔️ | ✔️ | ❌ |
| 2. マルチタブサポート | ✔️ | ✔️ | ▲ | ✔️（一部手動） |
| 3. ネットワーク操作・モック | ▲ | ✔️ | ✔️ | ✔️ |
| 4. スクリーンショット | ✔️ | ✔️ | ✔️ | ✔️ |
| 4. ビデオキャプチャ | ❌ | ✔️ | ✔️ | ❌ |
| 5.テストの並列実行 | ▲ | ✔️ | ✔️ | ❌ |
| 6. デバッグモード | ❌ | ✔️ | ✔️ | ✔️ |
| 7. タグフィルター機能 | ▲ | ✔️ | ▲ | ▲ |
| 8. トレース機能 | ❌ | ✔️ | ❌ | ❌ |
▲: 外部ライブラリが必要（Selenium は webdriver 以外が必要）
各機能の詳細とドキュメント
-
1. 自動待機:
ページがロードされるまでの待機や、要素が表示されるまでの時間を自動的に調整する機能
Selenium | Playwright | Cypress -
2. マルチタブサポート:
複数のタブやウィンドウを開いて操作する機能
Selenium | Playwright | Puppeteer
Cypress はマルチタブをサポートしていない代わりに回避策を提示している。（Cypress FAQ） -
3. ネットワーク操作・モック:
外部 API 呼び出しのレスポンスをカスタマイズしたり、特定のリクエストをブロックしたりできる機能
Playwright | Cypress | Puppeteer
Selenium は外部サービスをモックする方法のページはあるものの詳細な記載はない。（Selenium の推奨ページ） -
4. スクリーンショット, ビデオキャプチャ:
テストの進行状況を視覚的に記録できる機能
Selenium | Playwright | Cypress | Puppeteer -
5.テストの並列実行:
複数のテストを同時に実行して時間を短縮する機能
Selenium Grid | Playwright | Cypress -
6. デバッグモード:
テスト実行中にインタラクティブにデバッグできる機能
Selenium | Playwright | Cypress | Puppeteer
Selenium には専用のインタラクティブなデバッグモードはなく、ログ出力とブレークポイントによるデバッグになる。 -
7. タグフィルター機能:
テストケースにタグを付与し、特定のタグをもつテストのみを実行する機能
Playwright | Cypress Tags GitHub
Selenium と Puppeteer は Mocha や Jest などのフレームワークと組み合わせる必要がある。 -
8. トレース機能:
テストの各ステップを詳細に記録して再現する機能
Playwright
※ 見落としがあるかもしれません。間違いがあったらコメントで教えてください 🙇
【比較】Page Object Model (POM)
Selenium と Playwrightは公式ドキュメントに解説ページがありました。
Cypressは 公式ドキュメントで POM の代わりに App Actions の使用を推奨していました。
Puppeteerは 非公式のガイドで構築方法が解説されていました。
| ブラウザ | Selenium | Playwright | Cypress | Puppeteer |
|---|---|---|---|---|
| POM | ✔️ | ✔️ | ❌ | ▲ |
ドキュメント: Selenium | Playwright | Cypress
※ Puppeteer: 公式のドキュメントは見つけられませんでした。
Page Object Model (POM)とは
E2E テストの保守性を高めるために一般的に用いられるデザインパターンの 1 つが、Page Object Modelです。POM はテスト対象ページごとにクラス（オブジェクト）を作成し、そのページ内での操作や要素の情報をまとめる方法です。
POM のメリット
-
保守性の向上
UI が変更されても対応するクラスのみを修正すればよいので、テストコード全体への影響が少ない。 -
コードの再利用性
テストごとに同じページの操作を何度も記述する必要がなく、一つのクラスにまとめることで再利用できる。 -
テストの可読性向上
テストケースの中で、ページ内操作のコードが Page Object に集約されるため、テストコード自体が読みやすい。
まとめ
- Selenium: Selenium に慣れているチーム向け
- Playwright: 最新 Web アプリ向けで、効率と安定性を求めるチームに推奨
- Cypress: 学習コストの低いフレームワークが求められる場面に
- Puppeteer: シンプルさを重視する場合に
それぞれのドキュメントを読んだ感想
-
Selenium
WebDriver と外部ライブラリの設定や接続方法についての情報を調べるのが少し煩雑に感じられ、初学者には少しハードルが高いと感じました。 -
Playwright
画像や動画で解説されていて視覚的にわかりやすいと感じました。また、メニューも機能ごとに整理されているため、目的の情報にすぐたどり着ける点が良かったです。 -
Cypress
FAQ が充実しておりあまり迷わずに実装を進められそうだと思いました。画像での解説も多くて理解しやすかったです。 -
Puppeteer
ページがステップごとに分かれており導入しやすそうだと思いました。
参考文献
Discussion