JSTAPdを使ってJavaScriptのクロスブラウザテストしてみた(IE含)

JSTAPd テスト

YAPCにてYappoさんの「Ajax Application Testing」を聴き興味をそそられました。
今回はクロスブラウザでのテスト自動化を実現したかったのでその辺りも試してみました。
http://yappo.github.com/talks/20101016-yapcasia2010-jstapd/

インストール

cpanm JSTAPd

スケルトン作成(hoge という名前のプロジェクトの場合)

jstapd -n hoge

テスト用デーモン起動

jstapd -d hoge

http://127.0.0.1:1978/____jstapd/ にアクセスして
「make test」ボタン押すとテスト動きます！
超簡単！

テストをどう書くか

自分の場合はAjaxではなく生JSをテストしました。
いろいろ自由に書けますが、基本的には以下のように書けばOK。

  • ????.t ファイルにテスト数とか、テストしたいJSをインクルードしたりとか書く。
  • ????.js ファイルにテストJS書く。

egにサンプルたくさんあるので
Ajaxのテストしたいときはそちらを参考にするのが良いでしょう。

デバッグをどうするか

基本、何かエラーがあっても表示上わかりません。
なのでFireBugなどで普通にJSデバッグする感じにするのがよいでしょう。
テスト用のjsは以下のようなURLになっていますのでここにブレークポイントを仕込んだり。

http://127.0.0.1:1978/____jstapd/contents/(テストファイル名)?session=xxxxxxxxxxxxxxx

CLIテスト

まずは以下の環境変数を設定します。

export JSTAP_AUTO_OPEN_COMMAND='open -a Safari %s'

で、あとは普通にproveすると自動でブラウザが立ち上がりCLIからテスト出来ます。

prove hoge

おおー


自動で複数ブラウザテスト(for Mac)

上記のようなことをするスクリプト書けばいいですね。
Macだと以下のような感じになりますかね。

use strict;

my $dir=$ARGV[0];
my @browser = (
    'open -a Safari %s',
    'open -a Firefox %s',
    'open -a "Google Chrome" %s',
);
for (@browser) {
    $ENV{JSTAP_AUTO_OPEN_COMMAND} = $_;
    system("prove $dir");
}

ぽこぽこ複数ブラウザが立ち上がって自動テストするさまがおもしろいｗ

自動で複数ブラウザテスト(for Windows XP)

IEでもテストしたいですよね！*1
つまりWindows上で環境構築する必要があります。
まずActivePerlだとJSTAPdをインストールするのが大変なので
Strawberry Perl で普通にcpanmインストールしてしまいましょう。


あと自分のサービスだと要件的にIE6,IE7,IE8でのテストも行う必要があるので
これも自動でテストしたいところです。
今回は IE Tester を使ってみます*2。
IE Testerはどこにインストールしてもいいです。
パスにスペースがある場合は
コマンドプロントの「dir -x」コマンドで表示される短縮ディレクトリを指定しましょう。


自分の環境だと以下のような感じになりました。

use strict;

my $dir=$ARGV[0];
my @browser = (
    'D:/PROGRA~1/CORESE~1/IETester/IETester.exe -ie6 %s',
    'D:/PROGRA~1/CORESE~1/IETester/IETester.exe -ie7 %s',
    'D:/PROGRA~1/CORESE~1/IETester/IETester.exe -ie8 %s',
);
for (@browser) {
    $ENV{JSTAP_AUTO_OPEN_COMMAND} = $_;
    system("prove $dir");
}


これでバッチリ！といいたいところですが、
proveが一つ終わるたびに「ウィンドウを閉じますか？」といちいち聞かれたり、
Runtime error が発生したりするのでCLIテストはいまいち...*3
IEはだまってデーモン立ち上げてブラウザ上でテストするのがいいかもしれませんね。


また一つ注意点がありまして、
IETesterの場合はオプションの「マルチプロセスモードで起動」というのを無効にしないと
CLIのテスト時に変なプロセスが残ってしまいますのでOFFにしておきましょう

*1:IE爆発しろ

*2:本当はSpoon Browserでやりたかった

*3:一応、テスト自体はうまくいきます