水曜日, 1月 10, 2007

[Testing]Selenium RCとSelenium IDEでWEBアプリのUIテストを簡単自動化

WEB+DB PressでSelenium特集が掲載されていたので試してみました。



Seleniumとはブラウザからのテストを自動化するツールです。テストケースをHTMLのtableタグで記述するため、比較的簡単にテストケースを作成できます。Selenium-Coreのみではテストケースをテスト対象アプリケーションがあるサーバと同じ場所に置かなければならない為若干面倒ですが、Selenium RCを使うとアップロードが不要になる為非常に便利です。

インストール
Selenium Remote Control
現時点での最新バージョンは0.90ですが-htmlSuiteオプションが使えないとのことなのでバージョン0.81を使用します。解凍して適当なところに置いてください。

Selenium IDE
Firefoxエクステンションです。バージョン0.86を使用しました。

テストに必要なファイル
作成するファイルは以下のとおりになります。
TestCase.html ・・・ 個々のテストケース
TestSuite.html ・・・ テストケース一式をまとめたファイル。個々のテストケースへのリンクを貼る

少量のテストであればテキストエディタでも作成できますが、Selenium IDEを使うとブラウザの操作を記録してテストケースとなるhtmlファイルを作成してくれます。使い方はIDEを起動して記録ボタンを押した後、テスト対象となるアプリケーションを操作するだけです。

サンプル動画(Flash)
のように操作すると以下のようなhtmlファイルが生成できます。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TestCase1</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">TestCase1</td></tr>
</thead><tbody>
<tr>
    <td>open</td>
    <td>/</td>
    <td></td>
</tr>
<tr>
    <td>type</td>
    <td>q</td>
    <td>Perl</td>
</tr>
<tr>
    <td>clickAndWait</td>
    <td>btnG</td>
    <td></td>
</tr>
<tr>
    <td>assertTextPresent</td>
    <td>Perl の検索結果</td>
    <td></td>
</tr>

</tbody></table>
</body>
</html>



続いてTestSuiteファイルを作成します。こちらはテストケースを一覧したhtmlとなります。

<html>
<head><title>Test Suite</title></head>
<body>
  <table cellpadding="1" cellspacing="1" border="1">
    <tbody>
      <tr><td><b>Test Suite</b></td></tr>
      <tr><td><a href="./TestCase1.html">TestCase1</a></td></tr>
    </tbody>
  </table>
</body>
</html>



テストの実行
Selenuim RCを起動してテストを実行します。
コマンドの構文は
java -jar selenium-server.jar -htmlSuite <ブラウザ> <テスト対象サイトURL> <テストスイートファイル> <テスト結果ファイル>

です。

上記TestSuiteの場合は以下のようにします。
java -jar selenium-server.jar -htmlSuite "*firefox" "http://www.google.co.jp" tests/TestSuite.html tests/result.html

とします。

以上で自動的にブラウザが起動してテストが実行され、結果がresult.htmlファイルに出力されます。

ただこのままですテストが終わると即ブラウザが終了してしまうため、いちいちresult.htmlを開いて見ないと結果がわからないのが面倒です。そこで
[Selenium]assertEvalの活用方法(ブレイクポイント、終了通知)
を参考にJavaScriptが使えることを利用してalertするテストケースを用意しておき、TestSuite.htmlの最後に追加してやると、テストの最後にalertが出るので即結果が確認できます。

テスト実行結果


Seleniumではブラウザを会してテストを行う為JavaScriptの実行結果もテストできます。Selenium RCを使うとコマンド一つでブラウザの起動からテスト結果の保存までが行えるので回帰テストが非常に楽になると思います。

参考URL
Selenium 0.7利用手順書(前編)
これはすごい! Web案件必須 Selenium - 人気急上昇中自動テストツール

1 件のコメント:

匿名 さんのコメント...

Selenium RCの使い方がわからなかったので大変参考になりました。