今から３分で selenium の使い方を身に付ける　(回帰テスト自動化)

seleniumは，Webアプリの回帰テストツール。

ブラウザ上での画面表示・入力・送信・値チェックなど，手動＋目視でいちいちカバーしきれない操作が，全て自動化できる。

このツールの初歩を今から３分で習得するための記事。

わずか３分と思って集中されたい。

(1) DL

下記サイトから Selenium Core を取得する。

Selenium-Core: Download
http://selenium-core.openqa.org/download.jsp

Downloads: Full release
をダウンロード。
サーバの htdocs 直下に置く。

(2) ページ

ダウンロード終了を待たずに，テスト対象のページを用意する。やはり htdocs 直下。

下記をコピペして a.php で保存

<form id="f1" action="a.php" method="post">
	x : <input type="text" id="t1" name="x"><br>
	y : <input type="text" id="t2" name="y"><br>

	<input type="submit">
</form>

<?php

$x = $_POST["x"];
$y = $_POST["y"];
$sum = $x + $y ;

?>

<div id="div_result"><?php echo $sum; ?></div>

(3) 解凍

ダウンロード終了したら解凍。（解凍時の若干のエラーは無視）

解凍してできたフォルダを「selenium」にリネーム。
インストール終了。

(4) サーバ起動

localhostを起動する。

(5) 入口作成

起動完了を待たずに，htdocs/selenium のフォルダを開く。

まず htdocs/selenium/index.html をテキストエディタで開く。

＜body＞〜＜/body＞の中に色々書いてあるが，全て削除。

かわりに，bodyの中身に下記をコピペ。

<body onload="fixUnitTestLinks();">

<!-- ここから -->


<h4>マイアプリのテスト</h4>
<ul>
	<li><a href="core/TestRunner.html?test=../tests/my_site/TestSuite.html" target=_new>計算機能</a>
</ul>


<!-- ここまでコピペ -->

</body>
</html>

このページがテストの入口になる。

(6) テスト一覧

htdocs/selenium/tests/ のフォルダを開く。（サンプルテストケースが並んでいる。）

ここに，my_site という名のフォルダを作成。(１つのWebアプリのために１フォルダを使う事にする。)

htdocs/selenium/tests/TestSuite.html というファイルを，
htdocs/selenium/tests/my_site の中にコピペ。

この
htdocs/selenium/tests/my_site/TestSuite.html
をエディタで開く。

＜body＞〜＜/body＞の中に色々書いてあるが，全て削除。

かわりに，bodyの中身に下記をコピペ。

<body onload="filterTestsForBrowser()">

<!-- ここから -->


<table id="suiteTable" cellpadding="1" cellspacing="1" border="1" class="selenium">
<tbody>
	<tr><td><b>Test Suite</b></td></tr>

	<tr><td><a href="./tashizanTest.html">足し算</a></td></tr>

</tbody>
</table>


<!-- ここまでコピペ -->

</body>
</html>

そして，ページ上部の

<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">

という部分を削除。

これがテスト一覧表になる。

(7) テストケース

htdocs/selenium/tests/my_site/ に，tashizanTest.html というファイルを作る。

内容は下記をコピペ。

<html>
<head><title>test</title></head>
<body>

<table cellpadding="1" cellspacing="1" border="1">
<thead>
	<tr><td rowspan="1" colspan="3">test</td></tr>
</thead>
<tbody>


<tr>
	<td>open</td>
	<td>http://localhost/a.php</td>
	<td></td>
</tr>
<tr>
	<td rowspan="1" colspan="3">足し算実行します</td>
</tr>
<tr>
	<td>type</td>
	<td>t1</td>
	<td>1</td>
</tr>
<tr>
	<td>type</td>
	<td>t2</td>
	<td>2</td>
</tr>
<tr>
	<td>submitAndWait</td>
	<td>f1</td>
	<td></td>
</tr>
<tr>
	<td>verifyText</td>
	<td>div_result</td>
	<td>3</td>
</tr>


</tbody></table>

</body></html>

これがテストケースになる。

(8) 実行

http://localhost/selenium/

にアクセス。seleniumへの入口が表示される。

テストしたい機能（「計算」）のリンクをクリック。

左上にテスト一覧，中央上にテストケース，右上に制御パネル
が表示される。

右上の制御パネルで，緑色の三角のボタン（４つある内いちばん左のボタン）をクリック。

一瞬でテストが実行される。オールグリーンで終了。

速すぎて何が起こったのかわからない場合は，制御パネルの速度スライダーを「Slow」に調節して，もう一度テスト実行してみる。

すると，・・・
画面下部で，テキストボックスに値が入力され，送信ボタンが押され，値のチェックと共にテストケースの色が緑色に変化していくのがわかる。

ダウンロード開始から，最後のオールグリーンの表示まで，私は3:34かかりました。

惜しくも３分を超えてしまいましたが，３分台だったので，「３分でできる」と述べる事にします。

目標

３分かけて，下記の２点がわかればOK。

画面構造

左上：テスト一覧
中央：テストケース
右上：制御パネル
下：Webアプリの実行画面

テストケースの書き方

HTMLのテーブル形式。
コマンド名，対象DOM要素のID，オプション　という３要素で１アクションになる。

解説

簡単なWebページとテストケースを作成し，ブラウザで実行した。

SeleniumのテストケースはHTMLのテーブル形式で記述するシンプルな構成である。

ブラウザはそのテストケースを直接開き，実行し，OKだったら１行ずつグリーンに変えていく。
エラー箇所は緑色ではなく赤色に彩色される。

前回の回帰テストでオールグリーンだったのに，今回は赤色のエラーが出たとする。
その場合，前回のテスト以降に加えられた何らかの変更のせいで，Webアプリケーションの機能面にバグが発生した事を検出できる。

この手順が自動化されていると，特に共通モジュールの変更があった時などに助かる。
細かな一か所を修正するたびにサイト全体を手作業＋目視でチェックし直すのは大きな手間だ。

テスト一覧もテストケースも，中身を増やすことにより，大量のテストをボタン一発で一度に実行することが可能になる。

Webアプリ側でデザインが変更されようが，内部の計算方法が変更されようが，何が起こっても，回帰テストをボタン一発で実行できる。

テストケースのテーブルには，１行に１アクションが書かれている。

上記のテストケースでは

openでURLを開き，
typeでinput要素に値を打ちこみ，
submitAndWaitでフォームを送信し，
verifyTextでテキストの検査を行なう

というアクションの流れだった。

テストケース中で１行丸々使って，コメントを挿入することもできる。

全部のテストを一斉に実行することもできるし，ステップ実行のボタンもある。

Tips1 : 自動生成

テストケースをExcelで自動生成する方法が紹介されている。
＜td＞の中に並べればいいだけなので，自作でもっと手軽に行えるはず。

Excelマクロによる、seleniumテストケースの自動生成（1）
http://codezine.jp/article/detail/2345?p=1

Tips2 : Selenium IDE

Firefoxのプラグインとして利用することもできる。

Selenium IDEの活用とSelenium利用時の注意点
http://www.thinkit.co.jp/free/article/0705/2/7/

Tips3 : Ajaxがある場合

ページ読み込みが非同期な場合，WaitではなくWaitForValueを使う。

SeleniumでAjaxアプリケーションをテストする
http://www.infoq.com/jp/articles/testing-ajax-selenium

公式サイトでは，利用可能な全コマンドが解説されている。

Selenium コマンドリファレンス
http://wiki.openqa.org/display/SEL/Command+Reference+ja

この中から，よく使うコマンドのみを次記事にまとめてある。

selenium　主なコマンド一覧
http://d.hatena.ne.jp/language_and_engineering/20081016/1224123118

一応下記URLが公式の「Selenium core の使い方」なのだが，未翻訳のようだ。

Usage ja
http://wiki.openqa.org/display/SEL/Usage+ja

かわりに，初心者にやさしい入門記事がCodeZineにある。

Selenium 0.7利用手順書（後編）
http://codezine.jp/article/detail/452?p=1