Hatena::Groupmediaforcelabs

御手洗の開発記録

 | 

2010-04-28

第1回 はじめてのSelenium

| 15:14

お久しぶりです。

御手洗です。

今日はSeleniumについて書きたいと思います。

Seleniumについては、滝川さんのラボメールを引用します。

Selenium(セレニウム)とは、オープンソースで開発されたWebアプリケーションテストツールです。


SeleniumではWebアプリケーションの操作を事前に登録しておくことで、これらの煩雑な作業を全て自動化することが可能で、また遷移後の画面に表示された内容も、単体テストツール同様に自動的にチェック・可視化して確認することが可能です。


エビデンス(テスト実行証明)として画面のスクリーンショットを個別に取得することも可能で、テスト実行後の報告作業も省力化して行うことができます。


テストの合間にデータベースの値を変更することもでき、また、FlashSilverlightといったプラグイン型のRIAのテストも行うことが、JavaScript連携機能を利用することで可能です。

こんな感じです。

わかりやすいですね。

これからこのブログSeleniumを使ってみて便利だったこと、大変だったこと、こうしたほうがよかったことなどをまとめていきたいと思います。

第1回 はじめてのSelenium

まずは、Selenium IDEで作成した簡単なテストケースを紹介したいと思います。

自分が、作ったSeleniumのコードはHTML形式となっています。

こんな感じです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://localhost:8080/sa-struts-tutorial/" />
<title>AddSampleTestCase</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">AddSampleTestCase</td></tr>
</thead><tbody>
<tr>
	<td>open</td>
	<td>/sa-struts-tutorial/</td>
	<td></td>
</tr>
<tr>
	<td>clickAndWait</td>
	<td>link=足し算</td>
	<td></td>
</tr>
<tr>
	<td>type</td>
	<td>arg1</td>
	<td>20</td>
</tr>
<tr>
	<td>type</td>
	<td>arg2</td>
	<td>30</td>
</tr>
<tr>
	<td>clickAndWait</td>
	<td>submit</td>
	<td></td>
</tr>
<tr>
	<td>echo</td>
	<td>javascript{ this.getText(&quot;//form[@name='addActionForm']&quot;).substr(-2); }</td>
	<td></td>
</tr>
<tr>
	<td>verifyEval</td>
	<td>this.getText(&quot;//form[@name='addActionForm']&quot;).substr(-2);</td>
	<td>50</td>
</tr>

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

Webアプリケーションには、SAStrutsのサンプルアプリケーションを使用しました。

このSeleniumテストケースは、Selenium IDEブラウザの操作を記録していき、最後のechoとverifyEvalを追記し、HTML形式で保存しました。

Selenium IDEで実行するとこんな感じになります。

f:id:mitarai2009:20100428151401p:image

Selenium IDEを使用すると、HTML形式で保存したり、JUnit形式のソースコードなども出力できます。

それでは、簡単にソースの説明を行いたいと思います。


コンソール出力
<tr>
	<td>echo</td>
	<td>javascript{ this.getText(&quot;//form[@name='addActionForm']&quot;).substr(-2); }</td>
	<td></td>
</tr>

このコードは、画面の状態をコンソールや結果HTMLに出力する機能です。

Addアプリケーションでは、計算結果にタグが設定されていないので、addActionForm配下のテキストをすべて取得し、後ろから2文字を取得しています。

addActionForm配下という指定はXPathという記述方法です。

この記述は、ルート配下のformタグでname属性の値がaddActionFormとなっているタグを検索しています。

echoは、引数に指定された値を出力するだけのメソッドですが、javascript{}と書き、括弧の中にJavaScriptを追記すると、記述したJavaScriptの実行結果が出力されます。

あと、getTextメソッドですが、これはSeleniumAPIです。

Seleniumで実行したアプリケーションにはすべてSeleniumAPIが追加されます。

上記のようにどの画面からもSeleniumAPIを直接呼び出すことができます。


verifyチェック
<tr>
	<td>verifyEval</td>
	<td>this.getText(&quot;//form[@name='addActionForm']&quot;).substr(-2);</td>
	<td>50</td>
</tr>

次に、verifyチェックです。

Seleniumには、verifyメソッドとassertメソッドが用意されています。

verifyメソッドはチェックにエラーがあっても次の処理を実行しますが、assertメソッドはチェックにエラーがあるとその時点でテストが終了してしまいます。

なので、テスト検証のチェックにはverifyメソッドを利用し、失敗すると処理が継続できなそうなチェックはassertメソッドで実施するのが無難です。

では、中身を解説します。

verifyEvalメソッドは、対象として指定された文字列JavaScriptとして実行し、実行して返却された結果と値を比較します。

処理の内容は上記のechoと同じです。

ただし、これでは見難いし画面のレイアウトが変更されるといちいち変更しないといけません。

本来は、テストチェック対象の文字列をdivタグなどを使用してIDを振ると便利です。

<s:form>
<html:text property="arg1"/> +
<html:text property="arg2"/>
= <div id="result">${f:h(result)}</div><br />
<input type="submit" name="submit" value="サブミット"/>
</s:form>

こんな感じでコーディングしておくと、verifyEvalメソッドではなく、verifyTextメソッドを使用できるのでより簡単になります。

<tr>
	<td>verifyText</td>
	<td>result</td>
	<td>50</td>
</tr>

このようにテストチェック対象はすべてIDを振ったほうがレイアウト変更にも耐えられます。(当然、割り振ったIDが変更されないという前提ですが)

Seleniumを使ってテストの自動化を行いたいと思っている方は、コーディングの際になるべくIDを割り振るようにしてください。

本日は以上です。

それでは、また。

 |