STAFF BLOG スタッフブログ

Selenium IDEでWebページのテストを自動化しよう!

big-logoリンク切れのチェックや、入力フィールドのバリデーションのチェックなど…Webページのテストって大変ですよね。そこでWebページのテストを自動化するツール、Selenium IDEを紹介します。今回はFirefoxでの使用方法を説明しますが、マルチブラウザ対応なのでChromeやIEでも利用できます。

インストール

公式サイトにアクセスして、ページ上部にある最新Verのリンクをクリックすると、Firefoxのアドオンとしてインストールできます。

http://docs.seleniumhq.org/download/

selenium3

Selenium IDE 画面

Firefoxのメニューより、[ツール] - [Selenium IDE]を選択すると、Seleniumのウィンドウが起動します。日本語にも対応しているので英語が苦手な方でも大丈夫です。(Selenium 日本語ドキュメント

selenium2

操作を記録する

新しいモノゴトを覚えるには、なにはともあれ、実際にやってみるのが一番ですが、いきなりテストケースをちくちく書くのは難しいと思うので、まずは操作を記録してみましょう。画面の右上にある赤丸のボタンを押すと、Webページ上のマウスやキーボードの操作を記録してテストケースを自動で作成してくれます。

selenium4

赤丸ボタンをクリック後、Webページにアクセスして、リンクをクリックしたり、テキストフィールドに入力したりすると…

selenium5

コマンドが記録されました!操作を記録してからコマンドを調整する流れだと、テストケースが簡単に作成できます。

テストケースをつくってみよう

では実際にテストケースを作成してみましょう。今回はyahooのログイン画面でログインに失敗した場合のテストケースを作成してみます。

テストケースを作成

操作: ①赤丸をクリックして、②Yahooのログイン画面にアクセスし、③IDを入力、④パスワードを入力して⑤ログインボタンを押す

だいたいこんなテストケースが作成されていると思います。

selenium6

ログイン失敗の確認

ログインに失敗した場合、「IDまたはパスワードが違います。」というメッセージが表示されます。このメッセージの有無を確認することでログイン失敗時の動作検証を行います。

selenium7

まずは、確実にログインに失敗するように、ID / パスワードに不正なテキストを入力します。次にテストケースの最後にメッセージを確認するコマンドを追加します。

コマンド:verifyTextPresent
対象:IDまたはパスワードが違います。
値:空(※入力しない)

では、テストケースを再度実行してみましょう。

selenium8

verifyTextPresentコマンドは、ページのどこかに対象のテキストが表示されていた場合にtrueを返却します。ログインに失敗し、Webページに「IDまたはパスワードが違います。」というメッセージが出現した事で、実行結果がOK(緑)になりました。

ちなみにログインに成功した場合は、メッセージが表示されないので、実行結果がNG(赤)になります。ログイン成功の確認を行う場合は、成功時に表示されるメッセージや要素などを検証してみてください。

selenium9

Seleniumのコマンド

よく利用するコマンドを一部紹介してみます。

assertXXX… 実行結果がNGとなった時点で処理が中止されます
verifyXXX… 実行結果がNGとなっても、以降のコマンドの実行を続けます
Notが含まれるコマンドは実行結果が逆になります

検証用コマンド

assertXXXコマンドverifyXXXコマンド説明
assertTextPresent
assertTextNotPresent
verifyTextPresent
verifyTextNotPresent
現在のWebページのどこかに表示されているテキストを検証
assertText
assertNotText
verifyText
verifyNotText
特定の要素のテキストを検証
assertTitle
assertNotTitle
verifyTitle
verifyNotTitle
現在のWebページのタイトルを検証
assertSelectedIndex
assertNotSelectedIndex
verifySelectedIndex
verifyNotSelectedIndex
セレクトボックスで選択中のインデックスを検証
assertSelectedLabel
assertNotSelectedLabel
verifySelectedLabel
verifyNotSelectedLabel
セレクトボックスで選択中のラベルを検証
assertChecked
assertNotChecked
verifyChecked
verifyNotChecked
チェックボックスの選択の有無を検証
assertValue
assertNotValue
verifyValue
verifyNotValue
要素のvalue属性の内容を検証
assertVisible
assertNotVisible
verifyVisible
verifyNotVisible
特定の要素が表示されているか検証
assertElementPresent
assertElementNotPresent
verifyElementPresent
verifyElementNotPresent
特定の要素の有無を検証

※検証用コマンドに誤りがあったので一部修正しました。

入力系のコマンド

コマンド説明
click リンクやチェックボックスの選択
select セレクトボックス選択
type テキスト入力
sendKeys テキスト入力(サジェストを表示させたい場合)

待機系のコマンド

コマンド説明
clickAndWait リンクをクリックしてページ遷移を待機
waitForVisible
waitForNotVisible
要素が表示されるまで待機(モーダルウィンドウの出現を待機する場合)
waitForAlert
waitForNotAlert
アラートが表示されるまで待機
pause 指定時間(ミリ秒)待機

他にもたくさんのコマンドが用意されているので、かなり詳細な検査も可能です。

最後に

Webサイト構築後、機能追加や修正の度に手動で確認していた作業も、一旦、自動化してしまえば何度でも簡単に確認することができてらくちんです。当然テストで確認できる範囲は限られますが、基本的な部分だけでも押さえておけば、デグレード防止になり、転ばぬ先の杖になることでしょう。納期が厳しい昨今の開発事情では、中々テストに多めの工数を割くことができませんが、保守で長期的にメンテナンスが続いていくサイトには導入してみるのも手かもしれませんね。

ではでは

INDEXブログ一覧へ
CONTACTお問い合わせはこちら