Hatena::ブログ(Diary)

お前の血は何色だ!! 4 このページをアンテナに追加 RSSフィード Twitter

2009-09-13 世界一わかりやすい Selenium IDE 入門

Webのテストツール selenium IDEの使い方を世界一わかりやすく説明します。

これよりわかりやすい説明を作った人は世界一の名前を譲るので教えてくださいwww

間違い等ありましたら、コメント欄にどうぞ。

インストール

ここのサイトからインストールできます。

https://addons.mozilla.org/ja/firefox/addon/2079

f:id:rti7743:20090914005137p:image


ちょい下にスクロールすると、 「Firefoxへ追加」ボタンがあるのでクリックします。

f:id:rti7743:20090914005138p:image


インストール確認ダイアログが出てくるので、「今すぐインストール」をクリックします。

f:id:rti7743:20090914005139p:image


インストール中。

f:id:rti7743:20090914005140p:image


Firefox再起動」ボタンでFirefox再起動させればインストールは完了です。

f:id:rti7743:20090914005141p:image

使い方

まずgoogleでも開きましょう。

Selenium IDE を起動したときのページがディフォルトのベースディレクトリ(基準位置)になるのでテストしたいページを最初に開いておくと便利です。

f:id:rti7743:20090914005142p:image


メニューのツール」から、「Selenium IDE」を選択し起動させます。

f:id:rti7743:20090914005143p:image


Selenium IDE が起動しました。

f:id:rti7743:20090914005144p:image


ヒント:

画面の簡単な説明はこんな感じです。

最初の状態でが押されているので記録状態になります。

f:id:rti7743:20090914010757p:image


早速テストケースを作ってみましょう。

googleでドーマンセーマンと検索してみます。

f:id:rti7743:20090914010758p:image


ドーマンセーマンで検索しました。

f:id:rti7743:20090914010759p:image


このとき、Selenium IDE を見ると操作が記録されているのがわかります。

f:id:rti7743:20090914010800p:image


検索結果の一番目に wikipedia が表示されているので、

「ドーマンセーマンで検索したら wikipediaが表示されていること」という条件を入れてみます。

wikipediaのリンクを右クリック」して 「verifyTextPresent セーマンドーマン - Wikipedia」を選択します。

f:id:rti7743:20090914010801p:image


Selenium IDE になにやら追加されました。

これが、このページのこの部分に 「セーマンドーマン」という文字列があるかどうかというチェックです。

f:id:rti7743:20090914010802p:image


さて、だいたいできたので、f:id:rti7743:20090914012554p:imageを押して、テストを実行してみます。

f:id:rti7743:20090914010803p:image


ブラウザSeleniumによってコントロールされて、テストが進行していきます。

テストが無事成功すると緑色になります。

f:id:rti7743:20090914010804p:image

ヒント:

通常の文字列を追加する場合は、「文字列を左クリックで選択してから」追加してください。

f:id:rti7743:20090914010805p:image


せっかく作ったので保存しましょう。

「ファイル」から、「テストケースの保存」をクリックするとテストを保存することができます。

f:id:rti7743:20090914010806p:image


わかりやすい名前をつけて保存しましょう。

f:id:rti7743:20090914010807p:image

テストを失敗させてみる。

テストはうまく行ったようですが、本当に動作したのでしょうか?

文字列を書き換えてわざとテストを失敗させて見ます。


verifyTextPresent の項目をダブルクリックすると、項目が編集できます。

f:id:rti7743:20090914010808p:image


わざと失敗させるため画面にない文字を入力します。

対象のところを「セーマンドーマン」から「セーマンドーマン22222」と書き換えてみます。

f:id:rti7743:20090914010809p:image


再びf:id:rti7743:20090914012554p:imageを押してテストを実行させると、テストに失敗します。

f:id:rti7743:20090914010810p:image

文字列がないことを確認したい。

エラーメッセージ等画面に表示されてほしくない文字列を指定するにはどうすればいいのでしょうか?

メニューから簡単に追加する方法がないので少し大変です。

まず、 いつもどおりに、画面に表示されていてほしいという意味の verifyTextPresent で追加します。

f:id:rti7743:20090914010801p:image


そして、 verifyTextPresent を verifyTextNotPresent に書き換えます。

verifyTextNotPresent は、このテキストがこの場所にあってはいけないという意味です。

f:id:rti7743:20090914010811p:image


書き換えたらf:id:rti7743:20090914012554p:imageを押してテストを実行してみましょう。

f:id:rti7743:20090914011359p:image


現在は、画面にこの項目が表示されているため、テストに失敗しました。

f:id:rti7743:20090914011400p:image


もちろん、画面にない文字にすればテストは成功します。

f:id:rti7743:20090914011401p:image


ヒント:

verifyTextNotPresent は、バグの記録に使えます。

バグがあれば、 verifyTextNotPresent でバグ表示を登録し開発者に送ってあげましょう。

バグがあれば、バグ文字列が画面に表示されるのでテストは失敗します。

バグがなくなれば、バグ文字列もなくなるのでテストは成功するはずです。

これによって、バグが直っているかの確認と恒久的なテストを得ることができます。

後に説明するテストスイートに登録すれば、2度と同じバグは発生しないはずです。

Selenium IDE のバグ

最新のバージョンでは修正されました!

Selenium IDE にはひとつ大きなバグがあります。

ClickAndWait が click として記録されてしまうことがあります。

f:id:rti7743:20090914011402p:image


簡単に説明すると clickAndWait は click によって画面遷移が発生した場合のイベントです。

click は、ボタン等がクリックされたときのイベントです。

clickAndWait は、クリック後に画面が再読み込みされるまで待ちます。

ところが、 click だと 待ちません。

clickで画面遷移をさせると、通信環境によって画面描画が遅れると、ページがまだ読み込み中なのに次のテストを実行してしまい、テストが失敗します。

もし、画面遷移が発生するクリックが、clickAndWaitではなく、 click と記録されてしまったら、それは間違いなので手で修正してあげてください。

f:id:rti7743:20090914011403p:image


早くこのバグが解決されることを希望します。

テストスイート

最初に googleでドーマンセーマンを検索したテストケースを作成したので、もうひとつぐらい追加してみましょう。

こんな感じにアグネスに目をつけられるような単語で検索してテストケースを作成しました。

f:id:rti7743:20090914011404p:image


作ったので保存します。

f:id:rti7743:20090914011405p:image


これで、「googleでドーマンセーマンを検索」と「googleで桜タンの得ろ画像を検索」という2つのテストケースを作成しました。

こいつらをまとめてひとつのテストスイートを作成しましょう。

f:id:rti7743:20090914011406p:image


Selenium IDE の「ファイル」から「テストスイートの新規作成」を選択します。

f:id:rti7743:20090914011407p:image


わかりづらいですが、ウィンドウの左端に開くボタンがあります。

f:id:rti7743:20090914011408p:image


開くと、こんな感じになります。

f:id:rti7743:20090914011409p:image


テストケースと書かれているの欄を「右クリック」し「テストケースの追加」を選択します。

f:id:rti7743:20090914011410p:image


先ほど作ったテストケースを追加します。

残念ながら一度に複数のテストケースを追加することはできません。一つずつ追加してください。

f:id:rti7743:20090914011411p:image


googleでドーマンセーマンを検索」と「googleで桜タンの得ろ画像を検索」の2つのテストケースを追加しました。

f:id:rti7743:20090914012553p:image


最初からあった Untitledは、もういらないので削除します。

Untitled の上で右クリック」を押して、メニューから「削除」を選択してください。テストケースを削除することができます。

f:id:rti7743:20090914011412p:image


最終的に、こんな感じになります。

f:id:rti7743:20090914011413p:image


ここで、f:id:rti7743:20090914012554p:imageを押して、テストを実行してみます。

f:id:rti7743:20090914011414p:image


すべてのテストケースが実行されました。

f:id:rti7743:20090914011415p:image


テストに失敗すると、このように失敗したテストケースが赤くなります。

また、失敗したテストケースの個数が Failures に表示されます。

f:id:rti7743:20090914011416p:image


テストスイートを保存します。

Selenium IDE のメニュー「ファイル」から「テストスイート」の保存をクリックします。

f:id:rti7743:20090914011417p:image


わかりやすい名前をつけて保存します。

f:id:rti7743:20090914011418p:image

ヒント:

テストスイートを作成しても テストケースを削除してはいけません。

テストスイートは、テストケースへのリンクという形で記録されるためです。

f:id:rti7743:20090914011419p:image


ヒント:

大きなテストケースを作るより、小さなテストケースをたくさん作って、テストスイートで結合するほうがテストを作成しやすいと思います。

Selenium IDEUIはそんなに使いやすくないwwので、大きなテストケースを作成するのは結構大変です。

よりよいテストケース作成のために

先ほど作ったテストケースを再度実行してください。

テストが成功したと思います。

f:id:rti7743:20090914011415p:image

もう一回実行してください。やはり、テストは成功したと思います。

f:id:rti7743:20090914011415p:image


実はこれすごく重要なことです。

テストは何度実行しても成功しないと意味がありません。

たとえば、Webアプリなどで一度登録すると同じ名前では再度登録できないケースがあります。

f:id:rti7743:20090914011420p:image

この手のアプリのテストを作成するのは少し大変です。

多分、次の2つの方法のいづれかを取る必要があると思います。

1.ユーザー登録を抹消する隠しプログラムを作って仕込んでおく。

テスト前にこのプログラムを実行しテストユーザーを削除するようにする。

2.データベースリストアするプログラムを作ってどこかに仕込んでおく。

テスト前にこのプログラムを実行しデータベース初期化してからテストを実行する。


どちらも危険なプログラムです。特に2の方法は本番サーバでは絶対に実行できません。

テストサーバ(VMWare 上で構築したテストサーバをお勧めします)を構築しその上でテストするようにしましょう。

ヒント:

Selenium IDE 経由でデータベースリストアしたい場合は、リストアするCGIを作成し open コマンドで実行するぐらいしか方法がないかと思います。

テストケース毎にクリアするのも時間がかかりますから、テストスイートの順番等を工夫してリストアするなどの工夫が必要になると思います。