React入れたらCasperJSのE2Eテスト壊れたのでPhantomJS2入れたらPhantomJSのユニットテスト壊れたのでwebdriverioでE2Eテスト書き直した話

これまで VanillaJS / jQuery で頑張ってたプロジェクトに React 入れて、Reactは最高!などと言っていたのだけど、E2Eテストが落ちている事に気づいた。
落ちたテストで画面キャプチャしたりして調べた結果、Reactコンポーネントを描画するところで落ちていた。
どうやらPhantomJS1系で見られる現象のようだった。

e2e - CasperJS で Reactjs のサイトをテスト - Qiita

E2EテストにはCasperJSを使っていた。
Casper の dependencies は "phantomjs": ">=1.8.2" となっている。

PhantomJS の謎な挙動にはユニットテストでも散々苦しめられていた。
既に polyfill 幾つか入れて対処していたのだけど、良い機会なので別の道を模索してみよう、という話になった。

頑張ってPhantomJS2を入れた話

npm に公開されている phantomjs は Medium がメンテしており、本家 phantomjs をダウンロードしてきてインストールするだけのスクリプトとなっている。
releases をみると https://github.com/Medium/phantomjs/releases/tag/v2.0.0-alpha が出ているが、issueを見ると結構たいへんそうな雰囲気だ。

"phantomjs2"で npm を検索すると幾つかのパッケージが見つかる。
これらは Medium/phantomjs と同じ要領でビルド済み phantomjs2 をインストールしてくれる。
野良ビルドも多そうだけど、とりあえず動かしてみる)

CasperJS では環境変数 PHANTOMJS_BIN で phantomjs のバイナリを指定できる。
早速 npm install -D phantomjs2 して、 PHANTOMJS_BIN=/xxx/xxx/phantomjs casperjs test foo.coffee を実行!


……


無事テストは通ったのだった!!!

PhantomJS2入れたらユニットテストが壊れた話

上手く行ったかのように見えた PhantomJS2 化計画だが、Jenkinsのテスト環境セットアップ時にエラ―が出ていた。
package.jsonには phantomjs, phantomjs2 双方が記録された状態なので、

  • phantomjs2がインストールされ、node_modules/.bin/phantomjs に phantomjs2 への symlink を張る。
  • phantomjsがインストールされる時、 node_modules/.bin/phantomjs が存在するのでエラーになる

という流れで npm i に失敗していたようだ。

手元で試した時は、phantomjs が既にインストールされた状態で phantomjs2 をインストールしたからエラーが出なかったのか?
詳しくは調べなかったが、ともかく npm i が落ちる状態になってしまった。

次に、ユニットテストで使っている PhantomJS を PhantomJS2 に移行してみることにした。
ユニットテストは Karma + PhantomJS で動いており、 karma-phantomjs-launcher を利用している。

ググってみると karma-phantomjs2-launcher が存在したので、不安になりつつも早速インストール。
手元の macnpm t を実行!!


……


無事テストは通ったのだった!!!


が!!!!!!



Jenkinsコケた!!!!!!!!!

……


PhantomJS2 の公式バイナリは mac/win でしか配布されていない。
karma-phantomjs2-launcher は一応 Linux でも動くということになっているけど、ソース見たら downloadUrl += 'u1404-x86_64.zip' となっており非常に迷いが無い。マジか……
https://github.com/gskachkov/phantomjs2/blob/master/install.js#L117

ってか良く見たら mac/win でも野良ビルド使ってるのか……

という訳で、我々の Jenkins の動作している CentOS サーバでは動くはずが無かったのだった。
どうしても PhantomJS2 使いたかったら自分でビルドする必要がある。

webdriverioでE2Eテスト書き直した話

ビルド面倒……そこまでして PhantomJS にこだわる必要は無いのだ。
幸いにして21世紀を生きる我々には他の選択肢が沢山用意されている!やった!!未来最高!!!!

最近の選択肢だとこんな感じ?

  • Selenium系 (Protractor, testium, webdriverio等)
  • Nightmare

Nightmare はシンプルにつかえて良いんだけど、

ということで見送った。

今回は、以前導入しようとして少し知見のあった webdriverio を選んだ。
Selenium系はいざとなったら他のSelenium系に逃げれば良いや、という気持ちで気楽に使えるのも利点。

webdriverio、久々に見たらドキュメントに「babelと併用する方法」の項目が増えてた。
試したら普通に使えて最高!

webdriver.io

既存のE2Eテストをガッと書き直した結果、半日で書き換え終わった!!!!

Jenkinsでも通った!!!!!!

webdriverio 最高!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

【PR】11/7(土)、東京Node学園祭2015に登壇します

nodefest.jp

来る11/7(土)、

にて開催される東京Node学園祭2015に登壇します。

このイベントは毎年秋に開催される Node.js / JavaScript の祭典です。
最先端の Node.js のコアな話からフロントエンド開発、果ては JS による IoT っぽい話まで、豪華キャストによる様々な話が聞けるおもしろイベントです。

(今年はもうチケット埋まってしまったのだった……)

僕は「フロントエンドに秩序を取り戻す方法 〜はてなブログ編集画面をリニューアルするためにやったこと〜」というタイトルで話します。
このトークでは、本エントリで書いたような汗と涙と筋力の混ざった話をお届けする予定なので、是非聞いてください!