こんにちは。エンジニアの川島です。

今回の記事は、webサイトのテストを行っている皆さまに宛ててお送りします。
とはいえ、一口にテストと言っても、自動化されているものから複雑なプログラムを要する大規模なものまで、様々なケースが存在します。現場によっては、手作業や目視でテストを行っているところもあるでしょう。
私の一番最初の職場が、そうでした。excelのチェックリストを片手に、リンクミスが無いかを手動で確認する日々は、いま思い返してもかなり大変でした。そして、テストの自動化に興味はあったものの、「専門知識が無いから無理だろう」と最初から諦めていたのです。

ですが——諦める必要はありませんでした。
本記事では、ブラウザ上の操作だけでテストを自動化できる「Selenium IDE」についてご紹介します。

Selenium IDEとは

Selenium IDEは、ブラウザ上の操作を記録して、テストの作成・編集・実行を行うことができる、Chromeおよびfirefoxのブラウザ拡張機能です。無料で提供されており、2018年9月現在も精力的に開発が行われています。
たとえばフォームの操作テスト（例：名前や住所、テストメッセージを入力して送信）の場合、一度記録すれば、以降はワンクリックで同じ操作を行えます。もう何度も同じ入力作業をする必要はありません。

以下は、単純なページ遷移テストの様子をGIF撮影したものです。Selenium IDEからテストを実行するだけで、ブラウザ上のページが自動で切り替わり、指定したリンク先に移動していることが分かります。

Selenium IDEのインストール

Selenium IDEを利用するには、Google Chromeかfirefoxが必要です。Internet ExplorerやMicrosoft Edge向けには提供されていないため、どちらかのブラウザを予めインストールしておきましょう。

Chrome版Selenium IDEは、以下のChromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/selenium-ide/mooikfkahbdckldjjndioackbalphokd?hl=ja

Firefox版は以下のFirefox Add-onsから提供されています。
https://addons.mozilla.org/ja/firefox/addon/selenium-ide/

ブラウザのツールバーに以下のようなSelenium IDEのアイコンが表示されれば、インストール成功です。こちらのアイコンをクリックすることで、Selenium IDEを起動することができます。

Selenium IDEでフォーム入力テストを自動化してみる

たとえばフォーム改修を行った後の送信テストなど、一連の操作をルーチンで繰り返すテストケースは、Selenium IDEで自動化しやすいものです。フォーム入力のテストを実際に作成してみましょう。
まず、自動化したい操作を行うwebサイトのページを開き、Selenium IDEを起動します。
以下がSelenium IDEの画面です。

右上の「●（Start Recording）」アイコンをクリックすると、ブラウザ操作の記録が開始されます。
たとえば、フォーム画面で入力を行うと、以下キャプチャのように、Selenium IDE上に操作内容が自動で記録されてゆきます。

操作が終わったら、「■（Stop Recording）」アイコンで記録を止め、「▷（Run current test）」アイコンからテストを実行してみましょう。
記録したとおりの操作が繰り返され、Selenium IDE下部のログ画面にはテストの実行結果が表示されてゆきます。リンク先の誤りや、フォーム側の記述ミスなど、何らかのエラーが起きていた場合は該当箇所でテストがストップし、エラーメッセージが表示されます。
「completed successfully」が表示されれば、テスト工程にエラーが起きていないことを確認できます。

最後に、右上の保存アイコンからテストファイルをダウンロードしておきましょう。再度テストを行いたい場合は、保存アイコンの隣にある「open project」アイコンからテストファイルを読み込み、実行することができます。

Selenium IDEで作成したテストのアレンジ

Selenium IDEは、記録したテスト内容を編集することもできます。
以下の入力欄からは、操作内容（Command）、対象（Target）、値（Value）が変更可能です。

Targetは、対象要素のid・class・name属性、またはXPathを用いたSeleniumコマンドで指定します。Selenium IDE録画中にTargetのプルダウンを選択することで、現在表示されている構文以外の書き方を確認できます。
XPath Helperのような、選択要素をXPathで表示してくれる拡張機能を併用すると便利です。

テストのアレンジには、HTML/CSSの知識やSelenium IDEのドキュメントを読む姿勢が少々必要になりますが、既存のテストにコマンドを一つ追加するなど、ぜひ簡単なものから試してみてください。

もっと詳しく知るために

Selenium IDEには、2017年夏以降利用できなくなった旧版と、旧版の停止を受けて2017年12月にリリースされた新版が存在します。web上では新旧の情報が入り混じっているため、操作方法を調べる際は、情報の公開時期にご注意ください。

公式から提供されているドキュメントはこちらです。

• Selenium IDE — Selenium Documentation
• Selenium IDE wiki（GitHub）

また、現在のSelenium IDEは精力的に開発が進められており、今後新たな機能が追加されていくことが予想されます。開発状況や、報告されているバグの内容は、Selenium IDEのGitHubから確認できます。

おわりに

webサイトのテストは、会社によっては専門の部署が存在するほど、複雑で大変なものです。
ですが、手動で行うようなテストもまた、多くの現場で行われていることと思います。一つひとつのテスト工程はシンプルだったとしても、日々繰り返すことで重なってゆく工数は決して小さなものではありません。
もしかしたら自動化できるかもしれない、という工程があれば、ぜひSelenium IDEを試してみてください。

謝辞：テスト作成にあたって、参考にさせていただいたサイト

ブラウザ拡張Selenium IDEでユーザー操作を記録・再現できる！UIテストの自動化に活用しよう
[2018年時点] SeleniumIDE についてまとめてみた