読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

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

n分 Selenium IEの自動操作 テスト


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

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


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





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


(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 という名のフォルダを作成。(1つのWebアプリのために1フォルダを使う事にする。)



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への入口が表示される。


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

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


右上の制御パネルで,緑色の三角のボタン(4つある内いちばん左のボタン)をクリック。


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


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

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





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

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

目標

3分かけて,下記の2点がわかればOK。


画面構造

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


テストケースの書き方

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

解説

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


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

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



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

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



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

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



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

上記のテストケースでは

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

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

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

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



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

関連する記事:

Selenium 中級者になろう (変数+XPath+JavaScriptを,テストケース中で利用する方法) - 主に言語とシステム開発に関して
http://d.hatena.ne.jp/language_and_engineering/20090818/p1


テストマネージャになったら,どうする? SEの視点での書評:「現場の仕事がバリバリ進む ソフトウェアテスト手法」 - 主に言語とシステム開発に関して
http://d.hatena.ne.jp/language_and_engineering/20110419/p1


日本人の氏名のテストデータを,Excel VBAでランダムに生成しよう (ひらがなを使った大量のダミーデータ) - 主に言語とシステム開発に関して
http://d.hatena.ne.jp/language_and_engineering/20120328/p1