E2E テスト自動化ツールをざっと調べたまとめ

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
• 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 に魅力を感じました。
操作のたびにスナップショットをとってくれるのは衝撃です。まずはさわってみようと思います。