Seleniumでラクラク、クロスブラウザ自動テスト！（その１）

こんにちは、中村です。

突然ですがみなさん、Webアプリケーションのテストやってますか？中村は主にJavaScriptやFlashといった画面アプリの開発を主にやっているわけですが、昨今のブラウザ状況もありクロスブラウザなテストは大変です。やれIEだ、やれFirefoxだ、やれSafariだ、やれIE6だ、IE6だ、IE6だぁぁぁぁーーーー

そんなわけで自動テストツール「Selenium」について調べてみたわけですが、これがなかなかイイ感じで使えそうなので紹介してみたいと思います。

Seleniumとは？

オープンソースで開発されているWebアプリケーション用自動テスティングフレームワークです。ブラウザの操作を擬似的にシミュレートすることができ、テストケースを作成することで回帰試験（リグレッションテスト）を効率良く行うことができます。SeleniumプロジェクトはSelenium Core、Selenium IDE、Selenium RCといくつかのプロダクトに分かれています。

Selenium Core

HTMLによるテストケース記述＋JavaScriptによるブラウザ操作シミュレートで自動テスト実行を行うSeleniumのコアコンポーネントです。他のSelenium IDEやSelenium RCにおけるブラウザ操作はこのSelenium Coreによって実現されています。

Selenese

Selenium Coreに対する操作コマンドで、ブラウザ操作や値の検証などをHTMLのテーブルで記述します。以下例で、１行３カラムで表されます。「コマンド　引数１　引数２」みたいなイメージですね（引数を１つだけ、もしくは取らないコマンドもあります）。

open	http://www.mapion.co.jp/
pause	1000
type	q0	神保町 カレー
clickAndWait	btn_search1
verifyText	//div[@id='mainAREA']/p/span[1]	神保町 カレー

Selenium IDE

Seleneseによるテストケース記述＆実行が可能なFirefox拡張です。実際のブラウザ操作記録によるSelenese自動生成やテスト実行のコントロール、Seleneseリファレンスの参照など、効率的にテストケースを記述＆実行するには欠かせないツールです。

ただFirefox拡張なわけですので、もちろんFirefox限定です。

Selenium RC

各ブラウザをリモートで操作するJavaのサーバーアプリ＋各言語（Java, Ruby, Python, Perl, PHP, .NET）にてテストケースを記述するクライアントライブラリです。RCはRemote Controlってことですね。おおよその構成としては本家のページにある図をご参照。ちなみにSelenium RCではSeleneseは登場せず、各言語のAPIでテストケースを記述することになります。「JavaとかRubyなんて書いたことなーい！」という方もご安心、前述のSelenium IDEが各言語のソースコードも（おおよそ）自動生成することが出来ますのでSelenium IDEで作成したテストケースを利用することが可能です。

で、実際クロスブラウザ自動テストどうやるの？

とそろそろツッコミが来そうなので実際の設定や操作をば。察している方も多いと思いますが、紹介する方法は、

1. Selenium IDEのSelenese自動生成でテストケースもりもり作る
2. Selenium IDEにてSeleneseからJavaのテストクラス自動生成
3. Selenium RCでクロスブラウザ実行＼(^o^)／

みたいなノリで極力Seleneseやプログラムを書かずにテストを行う方法です。全てを説明すると少し長くなってしまうので、今回はSelenium IDEを主に使う1.2.を、次回にSelenium RCでクロスブラウザテストを行う3.を、２エントリーに分けて紹介しようかと思います。

前提条件

この記事では以下を前提条件としますが、JavaのVersionさえ満たしていればMacや他OSでつまづくことはないと思います。

• Windows XP
• JRE or JDK 1.5 以上がインストール済み
• Firefoxがインストール済み
• Eclipseがインストール済み（Selenium RCでのテストプロジェクト作成、必須ではない）
• Selenium IDE 1.0.2
• Selenium RC 1.0.1

Selenium IDEのインストール＆Selenium RCのダウンロード

まずSeleniumのダウンロードページよりSelenium IDEのインストールおよびSelenium RCのダウンロードを行います。

Selenium IDEはxpi形式なのでリンククリック→インストールの許可とすれば拡張のインストールが開始されます。Selenium RCは各種jarファイルがzip圧縮されているだけ（特段のインストールは不要）ですので適当なフォルダへ展開しておきます。

Selenium IDEでSelenese自動生成

まずSelenium IDEを開きます。Firefoxメニュー→ツール→Selenium IDEを選択します。

Selenium IDEの操作パネルが開きます。この右上にある赤丸をONにし、メインのブラウザで操作を行うことでSeleneseが自動生成されます（なお開いた直後はONです）。

ではSeleneseを生成するための操作を行います。

マピオンのTOPページを開きーの、

「電話帳」リンククリックしーの、

「ラーメン・餃子」リンククリックしーの、

「東京都」リンククリックしーの、

「足立区」リンククリックしーので、マピオンTOPページからリンクを辿るSeleneseが出来あがります。

ここでページ内のデータ項目値を検証するSeleneseを追加しましょう。Webページ内の検証したい文字列を選択→右クリック→利用可能な全てのコマンド→verifyText～ を選択します。

Selenium IDE側に検証するコマンド、要素を特定する式、検証する値が自動的に生成されます。ここで要素を特定する式をデータ項目値に依存せずHTML文書の構造で特定されるようxpath:positionに変更しておきましょう。

検証する要素の位置を特定するのが結構煩雑だったりするのですが、Selenium IDEなら簡単な操作で検証を追加できることが分かると思います。おまけでいくつかの検証を追加し、最終的に出来上がったSeleneseは以下となります。

open	/
clickAndWait	link=電話帳
clickAndWait	link=ラーメン・餃子
clickAndWait	link=東京都
clickAndWait	link=足立区
verifyText	//td[1]/a	ラーメン専科
verifyText	//tr[2]/td[1]/a	夢屋
verifyText	//tr[3]/td[1]/a	梅華

テスト実行

せっかくテストケースを作成したのでSelenium IDEで実行してみましょう。上部にある緑三角の実行ボタン押下することでテスト実行を行えます。

どうでしょうか？メインのブラウザで勝手にピコピコ画面遷移したはずです。

Javaテストコードの作成

では今回の最後に、作成したSeleneseを元にSelenium RCにて利用するJavaのテストコードを作成します。といってもSelenium IDEで自動生成できるのでこれも簡単です。Selenium IDEのメニューからオプション→フォーマット→Java (JUnit) - Selenium RC を選択します。

Seleneseが表示されていたグリッド部にJavaのテストコードが表示されますので、これをコピー＆ペーストすればOKです。

package com.example.tests;

import com.thoughtworks.selenium.*;
import java.util.regex.Pattern;

public class Untitled extends SeleneseTestCase {
	public void setUp() throws Exception {
		setUp("http://change-this-to-the-site-you-are-testing/", "*chrome");
	}
	public void testUntitled() throws Exception {
		selenium.open("/");
		selenium.click("link=電話帳");
		selenium.waitForPageToLoad("30000");
		selenium.click("link=ラーメン・餃子");
		selenium.waitForPageToLoad("30000");
		selenium.click("link=東京都");
		selenium.waitForPageToLoad("30000");
		selenium.click("link=足立区");
		selenium.waitForPageToLoad("30000");
		verifyEquals("ラーメン専科", selenium.getText("//td[1]/a"));
		verifyEquals("夢屋", selenium.getText("//tr[2]/td[1]/a"));
		verifyEquals("梅華", selenium.getText("//tr[3]/td[1]/a"));
	}
}

今回はここまで！

ちょっと長くなってしまったので今回はここまでです。次回は作成したJavaのテストクラスを利用してクロスブラウザで自動テストを行う方法を紹介します。