JsTestDriverを使って複数のブラウザでのユニットテストをします。JsTestDriverはgoogleが作ったJavaScriptユニットテスト用のjar(JsTestDriver.jar)です。このJsTestDriverを使って面倒なマルチブラウザテストを行いましょうというのが今回の趣旨です。JsTestDriverのサイトはここです。googleでJsTestDriverと検索すると多くの情報が出てきますので、利用するためのハードルは低いと覆います。
JsTestDriverを使うまで
JsTestDriverを使うために必要な手順は次の通りです。
- JsTestDriverのダウンロード
- 各ブラウザのパス
- JsTestDriverの設定ファイル定義
- テストモジュールの作成
- 実際に実行する
です。では実際に利用してみます。サンプルモジュールについては http://blog.asial.co.jp/1051 を流用させて頂きました。
JsTestDriverのダウンロード
JsTestDriver.jarは https://code.google.com/p/js-test-driver/downloads/list からダウンロードできます。ここからjarファイルをダウンロードします。使用するファイルの配置は次の通りです。
jsTestSample + app | + sample.js + test | + sample.js + JsTestDriver-1.3.5.jar + JsTestDriver.conf
各ブラウザのパスを調べる
JsTestDriverを動かしテストモジュールを実行するとき、ブラウザを起動します。そのためテスト対象のブラウザをテスト端末にインストールする必要があります。今回テスト対象をFirefoxおよびGoogle Chrome Canaryとしてますのでそれぞれ次の通りです。
/Applications/Firefox.app/Contents/MacOS/firefox /Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary
JsTestDriverは複数のブラウザでテストが可能です。--browser引数にカンマ区切りで利用するブラウザを指定します。
JsTestDriverの設定ファイル定義
JsTestDriverの設定ファイル(JsTestDriver.conf)には使用するブラウザのURLとテスト対象のモジュールとテストモジュールを指定します。
server: http://localhost:4224 load: - src/*.js - test/*.js
テストモジュールの作成
いま簡単のためテスト対象モジュールを次のようにします。
var Sample = { say: function() { return 'Hello world'; }, set: function(elem) { elem.innerHTML = this.say(); } };
このテストモジュールを記述しますがテストケースの書き方については https://code.google.com/p/js-test-driver/wiki/TestCase を見るようにしてください。サンプルを示します。
TestCase('SampleTest', { setUp: function() { this.sample = Object.create(Sample); }, 'test should return greeting': function() { assertEquals('Hello world', this.sample.say()); }, 'test should check innerHtml of DOMElement': function() { /*:DOC += <div id="sample"></div> */ var elem = document.getElementById('sample'); this.sample.set(elem); assertEquals('Hello world', elem.innerHTML); } });
JsTestDriverを使ってみる
あとは実行するだけです。コマンドラインは次のようになります。
$ pwd
~/Project/jsTestSample
$ java -jar JsTestDriver-1.3.5.jar --port 4224 --browser /Applications/Firefox.app/Contents/MacOS/firefox,"/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary" --tests all --testOutput ~/Projects/jsTestSample/
これを実際に実行するとブラウザが起動し下記メッセージが表示されます。起動したブラウザは閉じられます。
$ setting runnermode QUIET
....
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (7.00 ms)
Firefox 27.0 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (2.00 ms)
Chrome 35.0.1858.0 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (7.00 ms)
$
テスト結果をファイルに出力してますので
TEST-Chrome_35018580_Mac_OS.SampleTest.xml TEST-Firefox_270_Mac_OS.SampleTest.xml
というファイルも生成されています。内容はEST-Chrome_35018580_Mac_OS.SampleTest.xmlの場合
<?xml version="1.0" encoding="UTF-8"?><testsuite name="Chrome_35018580_Mac_OS.SampleTest" errors="0" failures="0" tests="2" time="0.006"> <testcase classname="Chrome_35018580_Mac_OS.SampleTest" name="test should return greeting" time="0.003"/> <testcase classname="Chrome_35018580_Mac_OS.SampleTest" name="test should check innerHtml of DOMElement" time="0.003"/> </testsuite>
この結果をCIに取り込みます。
最後に
CIではXvfb(仮想フレームバッファサーバ)を利用します。その例が https://code.google.com/p/js-test-driver/wiki/ContinuousBuild に記載されています。OSによってはそもそもIEなどのブラウザがインストールできない等ありますので選定にはOSを考慮しておく必要があります。
多くのサイトがブラウザをあらかじめ立ち上げておき、設定してからテストを実行しているケースが見受けられましたが、そういった事前設定は必要ありません。
$ java -jar JsTestDriver-1.3.5.jar ...
実行すれば良いということになります。実行時にエラーが発生した場合は --runnerMode DEBUG で実行すると詳細が確認できます。
参考までにJsTestDriverのパラメータは次の通りです。
--browser VAR : The path to the browser executable --browserTimeout VAR : The ms before a browser is declared dead. --captureAddress VAL : The address to capture the browser. --captureConsole : Capture the console (if possible) from the browser --config VAL : Loads the configuration file --dryRunFor VAR : Outputs the number of tests that are going to be run as well as their names for a set of expressions or all to see all the tests --help : Help --port N : The port on which to start the JsTestDriver server --preloadFiles : Preload the js files --raiseOnFailure VAL : Whether jstd will throw an exception when a test failure. --requiredBrowsers VAR : Browsers that all actions must be run on. --reset : Resets the runner --server VAL : The server to which to send the command --serverHandlerPrefix VAL : Whether the handlers will be prefixed with jstd --sslPort N : The SSL port on which to start the JsTestDriver server --testOutput VAL : A directory to which serialize the results of the tests as XML --tests VAR : Run the tests specified in the form testCase.testNa me --verbose : Displays more information during a run --plugins VAL[,VAL] : Comma separated list of paths to plugin jars. --config VAL : Path to configuration file. --basePath VAL[,VAL] : Override the base path(s) in the configuration file. Defaults to the parent directory of the configuration file. --runnerMode VAL : The configuration of the logging and frequency that the runner reports actions: DEBUG, DEBUG_NO_TRACE, DEBUG_OBSERVE, PROFILE, QUIET (default), INFO