はじめに
本投稿はソフトウェアテストの小ネタ Advent Calendar 2017の最終日、25日目の記事です。
小ネタといいつつ、空気読まずにテストモデリングエディタの開発、的なくっそ重いネタを投稿しようと思っていたのですが、案の定まったく間に合わずな感じでして、とりあえず場つなぎのために本当に軽いネタをひとつ。
エディタネタは間に合えば別途年内にでも。。。
Selenium と SeleniumIDE
Seleniumは、いまやWebアプリのテスト自動化ツール界において、デファクトと言って過言ではないでしょう。すったもんだあった後、ブラウザ操作のためのAPIも無事W3C規格としての統合が進んでおり、当面は盤石なツールかと思います。
そんなSeleniumの普及に大きく一役かったのがSelenium IDEでしょう。日本人の笠谷真也さん（実は当時学生だった筆者のバイト先のベンチャー企業のCTOでした）が開発し、その後公式ツールとして移管された、Selenium RC/WebDrvierを簡易的に使えるようにしたFirefox拡張です。しかし、Firefoxは近年、そのアーキテクチャを大きく方針転換し、結果としてFirefox55以降では今公開されているSelenium IDEは動作しなくなりました。
新SeleniumIDEの開発
では、公式はもうSeleniumIDEの提供を諦めたのか、というとそうではなく、現在再出発するべく、Githubリポジトリで、喧々諤々と新Selenium IDEの開発が進行中です。一時期"Selenium IDE 2"というキーワードをよく見かけましたが、リポジトリ上では"2"というナンバリングは明示的にはされていないようです。（余談ですが、package.json上のナバリングは今現在"0.0.0"です）
この新Selenium IDEですが、一からスクラッチで書き直しているわけではなく、ベースとしてSideeXという、中国の方が開発をはじめたSelenium IDEライクなキャプチャ＆リプレイツールを採用しています。SideeX自体もOSSとして開発が進んでおり、Githubにリポジトリが公開されています。
SideeX
SideeXのもっとも大きな特徴のひとつは、現行のSeleniumIDEとは異なり、WebExtensions APIを利用した拡張機能として開発されていることです。つまり、Google ChromeとFirefoxの両方で（今後はきっとMicorsoft Edgeなどでも）動作します。現状のSideeXは、Google Chrome向け拡張はストアでインストールできる一方、Firefox向け拡張はまだストアには登録されておらず自力でインストールしないといけないため、ちょっと利用のハードルが高い状況です。
SideeXの特徴
WebExtentions APIで開発されていることに加え、SideeXは現行のSelenium IDEと比較して、主に以下の点において優位であると公式サイトでは述べられています。
- ひとつのマシン上で並行して複数のSideeXインスタンスを起動してテスト実行ができる。
- ひとつの画面上で、複数のテストスイートが管理できる。
- ページやページの要素ロード待ちを空気を読んでよろしくやってくれる
- ポップアップやiFrameなども空気を読んで対応してくれる
本格的なテスト自動化に取り組む場合は、最終的にはこういったキャプチャ＆リプレイツールに頼るよりは、Selenium Webdriverのコードを書いたほうがコスパがいいと筆者は考えますが、一方で、ちょっとした動作確認や、数本の主要ルートをさくっと自動的に流すには悪くない選択だと思います。そんなときに、Waitやポップアップ等の対応で苦しめられるのはツールコンセプト的に本末転倒なので、このへんの気がきくのは、ツール利用のハードルがだいぶ下がってとてもよいことですね。
SideeXを使ってみる
SideeXの画面はこんな感じです。実際に、1)Qiitaのトップ画面を開く 2)"もっと詳しく"リンクをポチっとなする 3)"ソフトウェアテスト"でキーワード検索する、の3ステップを記録／実行してみた結果です。画面左部分のテストスイート管理のところのUIが少し癖があるように感じますが、使用感はほぼ現行のSelenium IDEと同等かと思います。Google Chromeが入っているみなさんはぜひ試してみてください。
なお、テストスイートは保存すると、現行のSelenium IDEと似たHTML形式で保存されます。上記の3ステップの実行コードは以下のように保存されます。本コードを名前をつけてお手元に保存して、SideeXから開いて実行することも可能です。
<?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>Untitled Test Suite</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">Untitled Test Case</td></tr>
</thead>
<tbody>
<tr><td>open</td><td>https://qiita.com/<datalist><option>https://qiita.com/</option></datalist></td><td></td>
</tr>
<tr><td>clickAt</td><td>link=もっと詳しく<datalist><option>link=もっと詳しく</option><option>//a[contains(text(),'もっと詳しく')]</option><option>//a[contains(@href, '/about')]</option><option>//a</option></datalist></td><td>61,4</td>
</tr>
<tr><td>clickAt</td><td>name=q<datalist><option>name=q</option><option>//input[@name='q']</option><option>//div[@id='GlobalHeaderContainer-react-component-99c72167-0090-44ee-b364-59a07f33f6d9']/div/div/div/form/input</option><option>//input</option></datalist></td><td>50,11</td>
</tr>
<tr><td>type</td><td>name=q<datalist><option>name=q</option><option>//input[@name='q']</option><option>//div[@id='GlobalHeaderContainer-react-component-99c72167-0090-44ee-b364-59a07f33f6d9']/div/div/div/form/input</option><option>//input</option></datalist></td><td>ソフトウェアテスト</td>
</tr>
<tr><td>sendKeys</td><td>name=q<datalist><option>name=q</option><option>//input[@name='q']</option><option>//div[@id='GlobalHeaderContainer-react-component-99c72167-0090-44ee-b364-59a07f33f6d9']/div/div/div/form/input</option><option>//input</option></datalist></td><td>${KEY_ENTER}</td>
</tr>
</tbody></table>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">Untitled Test Case2</td></tr>
</thead>
<tbody>
</tbody></table>
</body>
</html>
エクスポート機能はまだない
一方、筆者的にSelenium IDEの一番使っていた機能である"各種プログラミング言語によるSelenium Webdriverコードのエクスポート"機能は、まだSideeXには実装されていません。前述のとおり、本格的なテスト自動化の際はSelenium Webdriverを使うのがよいと思っているのですが、ベースとなるコードを一から書くというのはわりとやってられない作業です。。。そこで、さくっとSelenium IDEを使って操作を記録して、それを好きな言語にエクスポートしたコードを利用するというアプローチが効率がよいです。SideeXと新Selenium IDE、どちらに先のこの機能が乗るのかはわかりませんが、実装が待ち遠しいですね。
新Selenium IDEとSideeXの差分
で、そんなSideeXをベースとした新Selenium IDEですが、こちらもGoogle Chrome向けにはすでにストア登録されており、またFirefox向けにもGithubのリリースページにてビルド済みxpiが公開されているため、簡単にインストールできるようになっています。
Google Chrome版でSideeXと同じステップを試した結果の画面は以下のとおりです。画面左部分のテストスイート管理のところの使い勝手が少しSideeXと違いますが、機能的にできることはSideeXと同じかな、といったところです。
また、保存形式はSideeXがHTML形式だったのに対して、新Selenium IDEでは".side"拡張子で中身はJSON形式での保存となっていました。こちらも、.side拡張子でお手元に保存して、新Selenium IDEから開いて実行することも可能です。
{
"id": "1a0e498f-caaa-46ae-b8f6-4f4f80498df1",
"name": "Untitled Project",
"url": "https://qiita.com",
"tests": [
{
"id": "0e9ef1e8-35ef-4999-bf2e-4464a40ffabf",
"name": "Untitled",
"commands": [
{
"id": "02e9ffed-fb3f-40c2-82d8-99276d078efd",
"command": "open",
"target": "/",
"value": ""
},
{
"id": "bc66432d-cc69-4cbd-b63e-b4e0d779fcf4",
"command": "clickAt",
"target": "link=もっと詳しく",
"value": "58,7"
},
{
"id": "cc286b8c-75e9-4992-90ef-dece8a9bee9e",
"command": "clickAt",
"target": "name=q",
"value": "53,17"
},
{
"id": "31a0ffaf-eabf-4c06-aee9-254ee7411d7e",
"command": "type",
"target": "name=q",
"value": "ソフトウェアテスト"
},
{
"id": "eec0491c-45a2-4dc8-9f08-b17241835926",
"command": "sendKeys",
"target": "name=q",
"value": "${KEY_ENTER}"
}
]
}
],
"suites": [
{
"id": "a0154cb7-fc7f-44dc-b8c8-d1b5db0f1a0f",
"name": "Untitled Test Suite",
"tests": [
"0e9ef1e8-35ef-4999-bf2e-4464a40ffabf"
]
}
],
"urls": [
"https://qiita.com"
]
}
おわりに
というわけで、新Selenium IDE、および、そのベースとなっているSideeXの簡単な紹介をしました。ともに、まだまだ機能は発展途上といったところですが、開発も活発なようですので月に1回ぐらいは状況をウオッチしておきたいですね。
また、腕に覚えのある方は、ぜひとも開発に貢献してみるのもまたよいでしょう。
それでは、本日はこのへんで。メリークリスマス！