こんにちは、inoueです。
この週末、自宅駐車場にiPodを落とし、3回車を出し入れした後そのことに気づきました。
それでも全く轢かなかった私の駐車テクってスバラシイ。
さて、そんな不注意な人間ですが、今回はテストの話。
使い易いテストツールSeleniumにて、HTML形式のSeleniumテストケースで効率的にテストを行う方法をご紹介します。
例として、「全国梅マップ」といったサイト（example.com）があったと仮定します。
47都道府県すべてのページが正しく表示されているか、の確認を「タイトル、meta要素、タグライン、h1見出し、パンくずリスト」の5つで行う場合を考えていきます。
サンプルサイトの仕様
トップページからは各都道府県ごとのページに進むことができ、 各都道府県ごとのページ（例は神奈川県で、URLは/kanagawa）は、次のようなHTMLだったとします。
<html> <head> <title>神奈川県の梅マップ ｜ 全国梅マップ</title> <meta name="description" content="全国梅マップでは、神奈川県の梅が見られる公園などをマップで紹介しています。" /> <meta name="keywords" content="梅,神奈川県,マップ,全国梅マップ" /> </head> <body> <div id="container"> <div id="header"> <p id="tagline">[全国梅マップ] 神奈川県の梅マップ</p> <h1>神奈川県の梅マップ</h1> <!-- /#header --></div> <div id="contents"> <div id="topicPath"> <ol> <li><a href="/">全国梅マップ</a></li> <li>神奈川県の梅マップ</li> </ol> <!-- /#topicPath --></div> (以下、略）
最も一般的なのが「目視」での確認です。これならば誰にも行えますが、47ページをひとつひとつ行うのは手間ですし、確認モレや「北海道と愛知と沖縄を確認してOKならいいか」という邪なきもちも生じがちな方法です。
Seleniumであれば以下のようなコマンドで確認が行えます。
表示確認を行うテストケースの例
<tr> <td>open</td> <td>/kanagawa</td> <td></td> </tr> <tr> <td>verifyTitle</td> <td>神奈川県の梅マップ ｜ 全国梅マップ</td> <td></td> </tr> <tr> <td>//html/head/meta[@name='description']</td> <td>全国梅マップでは、神奈川県の梅が見られる公園などをマップで紹介しています。</td> <td></td> </tr> <tr> <td>//html/head/meta[@name='keywords']</td> <td>梅,神奈川県,マップ,全国梅マップ</td> <td></td> </tr> <tr> <td>verifyText</td> <td>tagline</td> <td>[全国梅マップ] 神奈川県の梅マップ</td> </tr> <tr> <td>verifyText</td> <td>//div[@id='header']/h1</td> <td>神奈川県の梅マップ</td> </tr> <tr> <td>verifyText</td> <td>//div[@id='topicPath']/ol/li[1]</td> <td>全国梅マップ</td> </tr> <tr> <td>verifyText</td> <td>//div[@id='topicPath']/ol/li[2]</td> <td>神奈川県の梅マップ</td> </tr> ;
これらのSeleniumコマンドを47都道府県分用意すれば全ページのテストケースが作成できるのですが、 それでは全ページを目視するのと手間がかわらないですよね。
ここで活用したいのが、「store」コマンドです。
storeコマンドを使ってテストケースを作成する
<tr>
<td>store</td>
<td>kanagawa</td>
<td>pref_url</td>
</tr>
<tr>
<td>store</td>
<td>神奈川県</td>
<td>pref_name</td>
</tr>
<tr>
<th colspan="3"></th>
</tr>
<tr>
<td>open</td>
<td>/${pref_url}</td>
<td></td>
</tr>
<tr>
<th colspan="3"></th>
</tr>
<tr>
<td>verifyTitle</td>
<td>${pref_name}の梅マップ ｜ 全国梅マップ</td>
<td></td>
</tr>
<tr>
<th colspan="3"></th>
</tr>
<tr>
<td>//html/head/meta[@name='description']</td>
<td>全国梅マップでは、${pref_name}の梅が見られる公園などをマップで紹介しています。</td>
<td></td>
</tr>
<tr>
<td colspan="3">(…以下略)</td>
</tr>
storeコマンドを使って変数を作成し、その変数を以降のコマンドで使用することで冗長なテストケースを作成することなくテストが実施できます。
今回の場合も、次のように設定ファイルとテストケースをテストスイートとしてまとめることで、47都道府県を網羅することが可能になります。
全都道府県ページを網羅するテストスイートの作成
各都道府県別の設定ファイルを作成する
まず、1県ごとにstoreコマンドで変数を定義するテストケースを作成します。
お好みのツールで47都道府県分を自動生成すればなお効率的です。
<?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="" /> <title>conf_kanagawa</title> </head> <body> <table cellpadding="1" cellspacing="1" border="1"> <thead> <tr><td rowspan="1" colspan="3">conf_kanagawa</td></tr> </thead><tbody> <!-- 神奈川県のデータ設定 --> <!-- 都道府県のURLをstore --> <tr> <td>store</td> <td>kanagawa</td> <td>pref_url</td> </tr> <!-- 都道府県名をstore --> <tr> <td>store</td> <td>神奈川県</td> <td>pref_name</td> </tr> </tbody></table> </body> </html>
テストケースを変数を使って作成する
共通で使用するテストケース case_sample.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="" />
<title>conf_kanagawa</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">conf_kanagawa</td></tr>
</thead><tbody>
<!-- ページを開く -->
<tr>
<td>open</td>
<td>/${pref_url}</td>
<td></td>
</tr>
<!-- 1. タイトルの確認 -->
<tr>
<td>verifyTitle</td>
<td>${pref_name}の梅マップ ｜ 全国梅マップ</td>
<td></td>
</tr>
<!-- 2. meta description の確認 -->
<tr>
<td>//html/head/meta[@name='description']</td>
<td>全国梅マップでは、${pref_name}の梅が見られる公園などをマップで紹介しています。</td>
<td></td>
</tr>
<!-- 3. meta keywords の確認 -->
<tr>
<td>//html/head/meta[@name='keywords']</td>
<td>梅,${pref_name},マップ,全国梅マップ</td>
<td></td>
</tr>
<!-- 4. タグラインの確認 -->
<tr>
<td>verifyText</td>
<td>tagline</td>
<td>[全国梅マップ] ${pref_name}の梅マップ</td>
</tr>
<!-- 5. h1見出しの確認 -->
<tr>
<td>verifyText</td>
<td>//div[@id='header']/h1</td>
<td>${pref_name}の梅マップ</td>
</tr>
<!-- 6. パンくずリスト（先頭）の確認 -->
<tr>
<td>verifyText</td>
<td>//div[@id='topicPath']/ol/li[1]</td>
<td>全国梅マップ</td>
</tr>
<!-- 7. パンくずリスト（2番目）の確認 -->
<tr>
<td>verifyText</td>
<td>//div[@id='topicPath']/ol/li[2]</td>
<td>${pref_name}の梅マップ</td>
</tr>
</tbody></table>
</body>
</html>
</pre>
テストスイート作成する
都道府県別ページすべてを網羅するよう、テストスイートを作成します。
<?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> <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <title>都道府県別ページの表示確認</title> </head> <body> <table id="suiteTable" cellpadding="1" cellspacing="1" border="1" class="selenium"><tbody> <tr><td><b>都道府県別ページの表示確認</b></td></tr> <tr><td><a href="./conf_hokkaido.html">北海道の定義</a></td></tr> <tr><td><a href="./case_sample.html">表示確認の実行</a></td></tr> … <tr><td><a href="./conf_kanagawa.html">神奈川県の定義</a></td></tr> <tr><td><a href="./case_sample.html">表示確認の実行</a></td></tr> … <tr><td><a href="./conf_okinawa.html">沖縄県の定義</a></td></tr> <tr><td><a href="./case_sample.html">表示確認の実行</a></td></tr> </tbody></table> </body> </html>
テストを実行する
作成したテストスイートを指定して、テストを実行します。
最後に
HTML形式のSeleniumテストケースで効率的にテストする方法をご紹介しました。
Seleniumコマンドは種類が多く、便利なものもいろいろありますので、リファレンス等を参考に実際に試していただくことをおすすめします。
