2008年11月13日木曜日

Web Application Frontend Testing by Selenium for the site using Google Maps

Google Maps を利用したウェブアプリケーションのテスト、どう書いていますか??
僕は最近まで、どのように書いて良いかよく分からなかったのですが、色々調査したり、試行錯誤してみたところ、Selenium-Core を利用した良いプラクティスができたので、ここで紹介します。

まずは、今回、実際 Web アプリケーションをテストするデモを以下から確認できますので、見てみてください。
以下のページの右上の方にある、緑色の再生ボタンを押すと、テストが動き出すのが確認できます (今回は初めてデモを用意してみました) 。

Selenium-Core Testing Demo

テスト環境の構築

今回は、サンプルとして、Rails で Google Maps を利用したアプリケーションを作成し、自動テストツール Selenium Core を利用し、実際にアプリケーションのテストをしています。

まずは、Rails を利用して、Google Maps を利用した簡単なアプリケーションを作成しましょう。まずは準備から。
# Create Application
$ rails sand-selenium-core

# Import to your subversion
$ svn import -m "initial commit." sand-selenium-core {YOUR_SVN_SERVER}/sand-selenium-core/trunk

# Clear your source
$ rm -rf sand-selenium-core

# Check out from subversion
$ svn co {YOUR_SVN_SERVER}sand-selenium-core/trunk/ sand-selenium-core
これでアプリケーションの準備が整いました。

次に、Selenium Core をダウンロードして、Selenium Core の環境構築します。今回は Google Maps を利用したアプリケーションをテストするため、Selenium-Core のソースコードを Maps API Selenium Tests の Subversion レポジトリから以下のようにインポートします。
# Make your test directory and move selenium core under to it.
$ mkdir {RAILS_ROOT}/public/tests

# set svn:externals for selenium-core extentions.
$ svn propset svn:externals "selenium-core http://gmaps-api-issues.googlecode.com/svn/trunk/selenium/" .

# Download extentions from external repositories.
$ svn update
$ svn propdel svn:externals
自作アプリケーションのテストをする場合、Google Maps の基本機能をテストする必要はありませんので、余計なファイルを削除しておきます。
$ cd {RAILS_ROOT}/public/tests/selenium-core/tests/
$ rm -rf general examples
$ rm general*.html example*.html test_tags.txt
テスト環境構築完了です。

アプリケーションの作成

まずは、Google Maps を利用した以下のようなアプリケーションを作成してみます。

地図を表示し、中心にマーカーを表示します。
また、地図上をクリックすると、その地点にドラッグ & ドロップ可能なマーカーを表示加える。

このサンプルアプリケーションとそのソースコードは以下に作成しましたので見てください。
Google Maps Application Sample

テストスイートの生成

テストは Selenium IDE などを利用して書きます。このファイルを selenium-core/tests/ 以下に作成したディレクトリ (今回は archives ディレクトリとしました) に保存します。
(テストファイルのサンプルは、こちら: 2008-11-13_test.html)
$ mkdir  {RAILS_ROOT}/public/tests/selenium-core/tests/archives
さて、ここまで来たら、後は、テストの準備。

1. {RAILS_ROOT}/public/tests/selenium-core/tests/test_tags.txt に自分の生成したテストファイルを書きます。

archives/2008-11-13.html
2.ツールを利用して、テストスイートを生成します。 以下のコマンドを順に実行します。
$ {RAILS_ROOT}/public/tests/selenium-core/tools/create_suites.rb 
$ {RAILS_ROOT}/public/tests/selenium-core/tools/parse_suites.rb
$ {RAILS_ROOT}/public/tests/selenium-core/tools/create_test_index.rb
以上!

Rails アプリケーションを起動し、ブラウザから、/test/selenium-core/index.html にアクセスすることで、本記事の最初で取り上げたテストが完成です。

大規模なアプリケーションを構築していると、テスト無しだと、開発の後半でどんどん、デグレードが発生し、とても手に負えなくなってきます。
今回紹介した手法は、本格的なウェブアプリケーションの構築を助けてくれる、最強のツールと言えるでしょう。