[Selenium]storeコマンドで効率的にテストを行う方法

inoue

2010.02.08

イメージ

こんにちは、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>