複数のブラウザで一度にJavaScriptのテストを行う

JavaScriptでテストを書こう！ 第5回

　本連載は、テストコードをこれから書こうと考えているJavaScript技術者を対象に、テストコードの意義からテスト駆動開発、JavaScriptでのテストコードの書き方、継続的インテグレーションなど、テスト全般にわたって解説します。また、原理原則だけでなくWhyから説明し、チームメンバーを巻き込みながら開発現場に活かせる考え方を総合的に解説します。第5回目の本稿は、JavaScriptのクロスブラウザのテスト方法をjs-test-driverを使って説明します。

対象読者

• JavaScriptの基本をある程度理解している方
• テストコードをこれから書こうと考えている方

複数のブラウザでのJavaScriptのテスト

　前回までは、主にテストコードの書き方について説明してきました。今回からは、テストの実行環境についての説明をします。

　JavaScriptの実行環境は、クライアントサイドはブラウザ、サーバサイドは例えばnode.jsです。サーバサイドは実行環境を決めてしまえばその環境だけで動作しますが、クライアントサイドは多くのブラウザそしてバージョンが存在し、ユーザに選択権があります。また、それぞれの環境でJavaScriptの実行結果に差異があることもあり、ユーザが選択しうる環境それぞれで可能な限りテストを行う必要が出てきます。

　そこで、js-test-driverを使用すると、JavaScriptのテストコードを複数のブラウザで一気に実行できる環境を作ることができます。js-test-driverは、図1のとおり、サーバを立ち上げ各ブラウザから接続し、サーバ側でテスト実行コマンドを実行することで、接続したすべてのブラウザでテストが実行され、その結果をサーバ側で取得できます。処理の流れを要素ごとに見ていきましょう。

1）Sources

　JavaScriptのプロダクトコードとテストコードです。

2）Config

　js-test-driverの設定ファイルです。読み込むJavaScriptファイル、テストコード、サーバ情報などを設定できます。

3）Client

　コマンドラインでの実行を示しています。サーバの立ち上げとテストコードの実行はコマンドラインから行います。

4）Server

　js-test-driverのサーバです。テストを動作させるブラウザを接続し、テストを実行します。

5）Browsers Slaves

　テストを実行させるブラウザです。js-test-driverのサーバにURLを入力して接続し、処理画面を表示させておきます。表示させておくだけで、コマンドラインからテスト実行の指示が出されると、接続しているブラウザでテストを実行します。

図1　js-test-driverの実行構成図（公式サイト）

　通常ブラウザでのテスト実行は、テスト実行ページにアクセスし、実行結果を確認するというプロセスですが、js-test-driverを使用することにより、一度に複数のブラウザで実行でき、コマンドで実行結果を確認することができます。Jenkinsのようなツールと組み合わせ、継続的インテグレーション（CI）を行うことも可能になります。継続的インテグレーションとは、継続的にビルド（統合）を行っている状態をいい、コンパイルやサーバデプロイと共に自動テストも組み合わせて行います。また、js-test-driverにはカバレッジ取得など、プラグインで機能を追加できる仕組みも提供されています。