E2Eテストフレームワークの比較・ちょっと試した結果

概要

既存の人気のE2Eテストのフレームワークを調査を行って、コードを書いてみました。

内容

	Selenium	Puppeteer	Playwright	Cypress
サポート 言語	Java Python C# Ruby JavaScript Kotlin	JavaScript/TypeScript	JavaScript/TypeScript Python	JavaScript/TypeScript
ブラウザー	Chrome Firefox IE Safari	Chrome Firefox	Chrome Edge webkit(Safari) Firefox	Chrome Firefox Edge Electron
環境構築	Driverを更新する必要	テストケースを書くために、他のテストフレームワークと組み合わせてインストールが必要	基本的にPlaywrightだけのインストールで十分	基本的にCypressのインストールだけで十分
スピード	★☆☆	★★★	★★★	★★☆
参考資料多くさ	★★★	★★☆	★☆☆	★★☆
勉強しやすさ (個人の感じ)	★☆☆	★★☆	★★☆	★★★
メリット	参考資料が多い 複数な言語・ブラウザーをサポート	環境構築が簡単 ドキュメントが完備 screenshot取ることが可能 テストする時に、jsを簡単に動く HTTPリクエストの結果を取ることができる	環境構築が簡単 ドキュメントが凄く完備 動画を取ることができる Puppeteerのコピーみたいですが、Puppeteerより機能が豊富	環境構築が簡単 ドキュメントが凄く完備 UI画面がある 動画が取る可能 レポート出力可能 ロード完了まで自動的に待つ
デメリット	driverを更新する必要 書きにくいところが多い：例えば、Screenshotを取るなどの機能を実現する場合は、自分で書くか・別のモジュールを利用する必要がある 動くが遅い	ChromeとFirefoxだけをサポート テストケースを書くため、他のテストフレームワークと組み合わせてインストール必要	IEサポートしてない 出る時間が遅いので、比較的に資料が少ない	複数タブがサポートしてない IE、Safariがサポートしてない CI連携が有料（月500個のテストケースまでは無料）
自分で試して作ったサンプル	https://github.com/Doris927/selenium-js-example	https://github.com/Doris927/puppeteer-example	https://github.com/Doris927/playwright-example	https://github.com/Doris927/cypress-example
ドキュメント	https://www.selenium.dev/ja/documentation/	https://github.com/puppeteer/puppeteer	https://playwright.dev/	https://www.cypress.io/

まとめ

試しに書いてみた感じだと、Puppeteer・Playwrightはエンジニア用のE2Eテストフレームワークで、Cypress・SeleniumはQA（Quality Assurance|品質保証）の方に向いている印象でした。

参考資料

• Seleniumブラウザー自動化プロジェクト
• puppeteer/puppeteer: Node.js API for Chrome
• JavaScript Component Testing and E2E Testing Framework
• Cypressしか勝たん！～テスト担当者ファーストなE2Eテストツール～
• 2021年12月現在、PlaywrightとPuppeteerのどっちを使うべき？
• Puppeteer使いがPlaywrightを使ってみて感じた利点