E2E テストの自動化に挑戦するためにツールを調べた結果をまとめました。
「Selenium、Puppeteer くらいは聞いたことがあるけど、他にも良さそうなものがないか調べておこう」という軽い気持ちで調べ始めたところ、想像していた以上に色々ありました。。。
※ Web フロントエンドの E2E テストが主な対象です。それ以外は、調べて出てきたことだけまとめています。モバイルは調査対象外です
※ E2E テストに詳しくなく、いろいろ間違いがあるかもしれません。お気付きの方はご指摘お願いします。
ざっくりググると ...
Selenium, Geb, Concordion, WebdriverIO, Nightwatch.js, Testium, Protractor, Puppeteer, jsdom, Nightmare ,Cypress.io, TestCafe, Intern, Postman, Karate, Pact, Ghost Inspector, etc ...
と、とにかくたくさん出てきました。
分類してみた
何がなんだか全然分からないので、まずは頑張って分類してみました。
「ブラウザ自動化ツール カオスマップ風 - STAC2018 LT」というスライドを参考にしつつ、独自に分類しています。
- Web フロントエンドの E2E テスト系
- WebDriver 系
- Selenium (Geb, Selenium WebDriver with Concordion), WebdriverIO, Nightwatch.js, Testium, Protractor
- (ヘッドレス) ブラウザ自動化系
- Puppeteer, jsdom, Nightmare
- (ヘッドレス) ブラウザ自動化 + テスト系
- Cypress.io, TestCafe, Intern
- Chrome 拡張
- Ghost Inspector
- WebDriver 系
- API テスト系
- Postman, Karate, Pact
上記の「Web フロントエンドの E2E テスト系」のうち、代表的 (と思われる) ものだけざっくり紹介していきます。
WebDriver 系
Selenium
E2E テストでもっとも有名なのは Selenium だと思います。
ただ、最近はフロントエンドの非同期処理や SPA には強くないらしく、Selenium から他のツールに乗り換える話が結構あるようです。
Selenium WebDriver with Concordion
Concordion は『リーン開発の現場 カンバンによる大規模プロジェクトの運営』に書かれていたため調べてみましたが、そもそも GUI のテストツールではなく仕様整理の補助ツールのような位置付けのようでした。
ただし、FAQ によると Selenium と連携すれば E2E テストも可能なようです。
(ヘッドレス) ブラウザ自動化系
Puppeteer
Puppeteer も E2E テストのツールとしてかなり有名だと思います。
ヘッドレスで Chrome や Chromium を操作でき、画面キャプチャも簡単に取得できるようです。
参考: https://developers.google.com/web/tools/puppeteer/
(ヘッドレス) ブラウザ自動化 + テスト
Puppeteer のようなブラウザ自動化系のツールで E2E テストを行うには、Jest、Mocha、AVA といったテストツールも導入することになります。
一方で、別途テストツールを導入する必要がないものあり、その一例が Cypress.io です。
Cypress.io
調査前は Puppeteer を使っておけば大丈夫かなと思っていましたが、「E2EテストをSelenium Webdriver からCypress.io に移行した話」や、「Cypress: The future of end-to-end testing for web applications」といった、Cypress.io を押す記事も結構ありました。
また、「cypressを触ってみた」という記事によると
しかし、このcypressのすごいところは、操作のたびに（xhrリクエストがあるたびに）DOMのスナップショットをとってくれているということです。
とのことです。これはすごすぎる。。
Chrome 拡張
Ghost Inspector
「Ghost Inspectorを使ってコードを書かずにE2Eテストを自動化する」の通り、Ghost Inspector は、コードを書かずにテストできるようです。
Chrome 拡張だと CI で使えないのでは ... ? と思いましたが、「Ghost Inspector を使って E2E テストしてみる」によれば CI でも使えるようです。
感想
Puppeteer でいいんじゃないかと思っていましたが、調べた結果、Cypress.io に魅力を感じました。
操作のたびにスナップショットをとってくれるのは衝撃です。まずはさわってみようと思います。