JsonDriver - Webアプリケーションをテストする

はじめに

Webアプリケーションのテストといえば、WebDriverでしょう。が、WebDriverで対応していないプラットフォームのテストはお手上げになってしまいます。そういう場合は、かつてのSeleniumのようにHTML+JavaScriptのみで動かせる方が良い場合もあるでしょう。

そんな悩みの中、WebDriverにありそうでなかったWebDriverJsなるJavaScriptバインディングが正式に取り込まれたことを知りました。メインはnode.jsから呼び出して使う用途のようですが、ブラウザ上で動かすことも想定されています。つまり、QUnitやJasmineのような既存のJavaScriptのテスティング・フレームワークを使ってテストを駆動し、ビジュアルに結果を表示することができるということです。

ただ、WebDriverJsはJsonWireProtocolを介してWebDriver本体を制御するものであり、以前としてテスト対象となるプラットフォームは限られたものになってしまいます。

そこで考えました。JsonWireProtocolを話すWebDriver互換のJavaScriptアプリがあったらどうだろう？と。WebDriver互換で任意のプラットフォームでテストを駆動します。テスト対象のWebアプリケーションにJsonDriverを組み込み、node.jsによる中継サーバ(JsonServer)を介してWebDriverから制御するというものです。

使い方

STEP 1:JsonServerを起動する

% node jsonserver.js

STEP 2:JsonDriverをテスト対象プログラムに組み込む

<script type="text/javascript" src="http://localhost:4444/jsondriver.js"></script>

ここで、localhostはJsonServerを動かしているホストのIPアドレスを指定してください（つまり、リモートで実行できるということです。）。ソースコードに直接埋め込むのは憚られるという状況もあると思います。そんなときは、GreeceMonkeyなどを使ってユーザスクリプトとしてJsonDriverを組み込むなどの工夫により回避できるかと思います。

STEP 3:WebDriverJsでJsonDriverに繋ぐ

テスト対象プログラムを表示するブラウザとは別のブラウザ（もしくは別ウインドウやタブで）からWebDriverJsを使ったプログラムを実行し、JsonDriverに繋ぎます。

<script type="text/javascript" src="http://localhost:4444/webdriver.js"></script>
<script type="text/javascript">
<!--
var driver = new webdriver().
    .Builder()
    .usingServer('http://localhost:4444/wd/hub')
    .usingSession("0")
    .build();
driver.getTitle()
    .then(function(title) {
        alert(title);
    });
//-->
</script>

JsonServerを経由してJsonDriverに繋がると、テスト対象プログラムが表示しているHTMLのタイトルがアラート表示されるはずです。

ここまでできれば、後はdriverを使ってQUnitなりなんなりでバリバリとテストコードを書いていくだけです。QUnitを使ったテストプログラムがtestsの下に同梱されていますので、参考にしてください。