JavaScript in Selenium Test (3): selenium-webdriverをCircleCIで動かす

概要

前回: JavaScript in Selenium Test (2): selenium-webdriverでhookとページオブジェクト

今回は、前回までに実装したテストをCircleCIに乗せてみようと思います。

CircleCI

これまでのテストが入ったリポジトリをCircleCIで有効化してみました。circle.ymlを置かなくても npm test が自動で実行されるのでそのまま動くかと思われましたが、次のようなエラーになりました。

npm test

> selenium-webdriver-samples@1.0.0 test /home/ubuntu/selenium-webdriver-samples
> mocha --require intelli-espower-loader --timeout 300000

SyntaxError: Unexpected token ...
    ...

npm install のログを見てみると、どうやらselenium-webdriverが最新のLTSのnodeのバージョンに依存しているようです。

npm install
WARN engine selenium-webdriver@3.0.1: wanted: {"node":">= 6.9.0"} (current: {"node":"4.2.6","npm":"2.14.12"})

というわけで、次のように circle.yml を記述してnodeのバージョンを指定します。CircleCIのドキュメントを見ると6.1.0までしか対応してなさそうなのですが、どうやら実際にはLTSまで対応しているらしいことがコミュニティに書かれていました。

machine:
  node:
    version: 6.9.1

これでグリーンになりました。CircleCIはデフォルトでchromedriverへのパスも通っているので、最小限の設定でSeleniumテストを動かすことができます。

しかし、Test Summaryを見てみるとまだなにも表示されていません。CircleCIにテスト結果を拾ってもらうためには、 $CIRCLE_TEST_REPORTS 環境変数で指定できるディレクトリ下にJUnit形式のXMLファイルを置かないといけません。このために、まず mocha-junit-reporter パッケージをインストールします。

npm install mocha-junit-reporter --save-dev

さらに、 package.json で npm test コマンドの内容を修正します。

  "scripts": {
    "test": "./node_modules/.bin/mocha --reporter mocha-junit-reporter --require intelli-espower-loader --timeout 300000"
  },

そして、 circle.yml で環境変数を設定してmochaのテスト結果出力先を設定します。

machine:
  node:
    version: 6.9.1
  environment:
    MOCHA_FILE: $CIRCLE_TEST_REPORTS/junit/test-result.xml

すると、無事にTest Summaryにテスト結果が表示されるようになりました。

Your build ran 1 tests in junit with 0 failures
Slowest test: should work Reserve App should work (took 1.66 seconds).

今回の変更のプルリクエストを作成したところ、ちゃんとCircleCIのチェックの結果がリポジトリ上で確認できました。

念のために失敗させたらちゃんと赤くなったので、今回はこれにて完成です。CircleCIの設定の簡単さを実感できました。

まとめ

今回は、selenium-webdriverで記述したSeleniumテストをCircleCI上で動かしてみました。CircleCIが優秀なので設定に困ることはほとんどありませんでした。

今回の修正もGitHubのサンプルリポジトリに取り込んであるので、ご自由にお使いください。

次回は、Seleniumテストで重要になりやすいテストの並列実行について書こうかと思います。