Node.js
Selenium
mocha
e2e
WebdriverIO

E2Eテストのboilerplateを書きました(SeleniumとZalenium)

このエントリはSelenium/Appium Advent Calendar 2017の10日目です。

:point_up: はじめに

社内でE2Eテストを導入する流れになったので、他プロジェクトでも汎用的に使えるようにboilerplateを書いてみました。
いちおう社内で使ってるやつですが、運用し始めてからそんなに経っていないので、ベストプラクティスかどうかはあやしいところ。
また巷で話題のZaleniumも試しています。

:star: リポジトリ

https://github.com/re-fort/e2e-boilerplate

:eyes: 技術選定

  • Selenium
  • WebdriverIO
  • mocha
  • power-assert

ブラウザだけだったら、TestCafeなんかもよさそうでしたが、アプリ周りのことを考えるとSeleniumにしといたほうが良いのではとなりました。
Seleniumは準備が大変そうなイメージがありましたが、公式でdockerイメージを配布してくれていたので環境構築が一瞬だったのも大きかったです。

他の3つに関しては、私がNode.jsに慣れているという理由です。

:whale: docker-compose.yml

今回、公式のSelenium以外にもZaleniumを利用してテスト出来るようにdocker-compose.ymlを2つ用意しています。

:question: Zaleniumとは

公式に書いてあったことをまとめると、

  • ZaleniumはSelenium Gridの拡張
  • 公式のdocker-seleniumではなく、カスタマイズされたdocker-seleniumイメージを使用している
  • カスタマイズされたdocker-seleniumイメージはChrome&FireFoxを内蔵しており、テストのビデオ録画機能などを提供している
  • テストのリクエストを受けるとdocker-seleniumイメージを使ってノードを作り、 テストが終わると破棄される
  • docker-seleniumが捌けないリクエストはSauceLabsとかに投げることが出来る

ということみたいです。

:dark_sunglasses: どんな感じなの

テスト実行前
Screen Shot 2017-12-10 at 6.00.00.png

テスト実行中(ノードが増えてる)
Screen Shot 2017-12-10 at 6.00.21.png

テスト実行中(VNCでテストの様子を見ることが出来る)
Screen Shot 2017-12-10 at 5.44.59.png

テスト実行後(ノードが消えてる)
Screen Shot 2017-12-10 at 6.14.47.png

テスト実行後(実行結果のビデオ&ログを残しておいてくれてる)
Screen Shot 2017-12-10 at 6.01.25.png

めっちゃ便利ですね:sparkles:

:skull: ハマったポイント

:scream: たまにブラウザを開こうとして固まる

原因の切り分けができてないけど、テストケースごとにブラウザを開こうとしていたので、テストケースを収集して1個の大きなテストとして実行するように変えました。
確実に良くないので、なんとかしたい...。

:scream: chromeOptionsが渡されない

ChromeDriver 2.3.2からgoog:chromeOptionsという名前に変わったみたいです。
真っ先にChromeDriverのページをみて、結果的にはちゃんと書いてあったんですけど、W3Cの新仕様にあわせたくらいしか書いてなくて、見逃してしまいました。
Seleniumの通信ログをみてたら、なんか新しいやつある〜となって気付きました。
W3Cの新仕様といっているのはここだと思います。

以上となります。
このあとには、Zaleniumをk8sで動かしてみる話もあるみたいです。
楽しみですね:blush: