JavaScript/TypeScriptでE2Eテストを書く際の選択肢について

ライブラリ・フレームワーク

Mocha/Chai/Sinon.jsベースで、これらを使ったことがあれば、比較的スムーズに利用できそう？

ElectronベースのGUIアプリが付属していて、対話的にテストを実行できる

個人的にはこのGUIアプリの体験が気に入っていて、ここについてはCypressがPlaywrightよりも勝っている点だとおもいます

@testing-library/cypressを使うと、Testing Libraryの作法に従ってテストが書ける

Cypress Cloudというクラウドサービスが提供されています

2024/05時点ではPlaywrightにおけるMicrosoft Playwright Testingはプレビュー版なので、この点ではCypressがやや有利なのかなと思います

Locators APIというものが提供されており、Testing Libraryと同じようなお作法で要素を問い合わせることができます

code:javascript

await page.getByRole('button', { name: 'Save' }).click();

Cypressでは@testing-library/cypressを別途導入する必要があり、この点ではPlaywrightの方が優位かと思います

Cypressと比べると、E2Eテスト以外にもスクレイピングやオートメーションなどの様々な用途でも利用しやすいのはメリットだと思いました (汎用性ではCypressよりもPlaywrightの方が勝っていると思います)

こちらもCypressと同様にMicrosoft Playwright Testingというクラウドサービスが存在するようです

ただし、2024/05時点ではまだプレビュー版

Playwrightを使ったテストの並列実行などをサポートしてくれるようです

APIがpuppeteerと類似しており、(あまり考えにくいですが) もし万が一Playwrightがメンテナンスが止まるようなことがあったとしても、puppeteerに移行しやすい可能性がある

Chrome DevToolsの開発チームによって開発・メンテナンスされています

そのため、対象ブラウザーをChromeに限定できる(例: Chrome拡張)のであれば、Playwrightよりもこちらのほうが最新機能などを利用しやすい可能性はありそう？ (実際のところどうなのかはちょっとわからないです...)

スクレイピングやオートメーションなどの用途ですでにプロジェクトでpuppeteerが採用されているのであれば、E2Eテストもそのままpuppeteerで書くと依存ライブラリが減らせてよさそう

Cypressとは異なり、JestやVitestでテストが書けるのはメリット (これはPlaywrightも同様)

リンク