albatrosary's blog

UI/UXとエンタープライズシステム

JsTestDriverを使ってマルチブラウザでのユニットテスト

JsTestDriverを使って複数のブラウザでのユニットテストをします。JsTestDriverはgoogleが作ったJavaScriptユニットテスト用のjar(JsTestDriver.jar)です。このJsTestDriverを使って面倒なマルチブラウザテストを行いましょうというのが今回の趣旨です。JsTestDriverのサイトはここです。googleでJsTestDriverと検索すると多くの情報が出てきますので、利用するためのハードルは低いと覆います。

 

JsTestDriverを使うまで

JsTestDriverを使うために必要な手順は次の通りです。

  1. JsTestDriverのダウンロード
  2. 各ブラウザのパス
  3. JsTestDriverの設定ファイル定義
  4. テストモジュールの作成
  5. 実際に実行する

です。では実際に利用してみます。サンプルモジュールについては 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