Selenium IDEを使ってAjax処理をテストしてみる

皆さんこんにちは。アイフラッグの品質管理チームKです。
今日はSelenium IDEを使ったAjaxのテストについて、ご説明したいと思います。
最近のWEBサービスは、どんなものであれAjaxを使用したページが非常に多くなってきていると思います。当社のサービスにおいても、Ajaxの処理を多数使用しています。
Ajaxの代表的な使い方としては、ページを更新することなくデータをサーバーへ送信し、サーバーからのレスポンスをそのまま現在表示されているページへ反映するような処理が多いですね。
ページ遷移が入っていないため、使用するSeleniumコマンドによってはエラーとなってしまうものが出てくると思います。
このようなページをSelenium IDEでテストするにはどうしたらいいのでしょうか。

WaitFor コマンド

Selenium IDEのコマンドにはAjax処理されたエレメントをテストする便利なコマンドが用意されています。
代表的なものが、「WaitFor○○」という、WaitForから始まるコマンドです。

• WaitForTextPresent
• WaitForElementPresent
• waitForPageToLoad
• waitForSelectOptions
• waitForVisible
• waitForValue

といったコマンドをよく使用しています。

waitForTextPresentは、ページのどこかに2列目で指定するテキストが現れるまで待つコマンドです。ページ遷移がないけれど何らかのテキストが表示されることによって、処理が正常に終了したと判断できる際に使用しています。

WaitForElementPresentは、2列目で指定するエレメントがページに現れるまで待つコマンドです。先ほどのWaitForTextPresentでは、評価するテキスト文字列が一定のものしか使えません。
テキスト文字列が違っても表示される場所が一定であれば、WaitForElementPresentを使用する場合があります。

waitForPageToLoadは、ページがロードされるまで2列目に指定した時間中待つコマンドです。2列目の指定する時間は1/1000秒単位で指定します。ここでは10秒待つ、ということですね。

waitForSelectOptionsは、いわゆるドリルダウンメニューなどのテストをする際に使用します。
例えば住所を指定する3つのプルダウンメニュー（１．都道府県　２．市区町村　３．番地）が並んでいて、
都道府県を選択すると市区町村のプルダウンにデータがロードされ、市区町村を選択すると番地のプルダウンにデータがロードされる、といったAjax処理のテストが出来ます。
2列目にテスト対象の場所、3列目に対象文字列等を指定します。

WaitFor○○コマンドはまだまだ沢山ありますので、Selenium IDE画面内のコマンドリファレンスなどを参考に使えるコマンドを増やしていくとよろしいかと思います。

AndWait コマンド

WaitForによく似たコマンドとして「○○AndWait」があります。
まず何らかのアクションを実行し、その後ページがロードされるのを待つ、といった場合に使用します（私はほとんどclickAndWaitしか使っていません）

• clickAndWait
• selectAndWait
• checkAndWait

もうお分かりかと思いますが、「次へ」というテキストリンクをクリックし、次のページがロードされるまで待つ、といった処理をします。

Ajax処理と一言でくくっても、いろいろな実装があると思います。おそらくSelenium IDEが準備しているコマンドだけでは全てのテストには対応できません。
が、Selenium IDEではjavascript コードをテストの中に含める事が出来ますので、Selenium IDEコマンドとjavascript をうまく使用して、サービスに見合ったテストケースを構築していく場合が非常に多いと思います（ほとんどそうなります）。

テストケースの「記録」ボタンからケースを作成できるようになる
↓
豊富なSelenium コマンドを使用して、複雑なテストケースを作れるようになる
↓
Selenium コマンドとJavascriptを組み合わせて、望みどおりのテストケースを作れるようになる
といった順番で、Selenium IDEを使いこなせるようになると素晴らしいと思います。

ありがとうございました。

2013/04/25

Selenium IDEとjavascript

皆さんこんにちは。アイフラッグの品質管理チームKです。

今回はSeleniumコマンドとjavascriptを組み合わせて、少々複雑なテストケースを作る方法をご紹介します。
私自身はプログラマーではないので、プログラムは書きません。ただjavascriptの基本的な処理を少し使うだけで、Selenium IDEのテストケースをより緻密に効果的に作成する事が可能になります。

早速使ってみる前に、Selenium独特の注意点があります。

Selenium IDE上でjavascriptを実行すると、そのままではページ内要素にアクセスできない

仕様として覚えていただければと思います。テストの中でjavascriptを実行すると、そのままではselenium領域の中で実行されてしまいます。
それを避けるために、テスト対象のページ領域を指定する必要があります。

テスト対象のページにある

Selenium IDEのテストにJavascriptを使用する -ポップアップ画面のテスト

皆さんこんにちは。アイフラッグの品質管理チームKです。

今回はSelenium IDE とjavascriptの組み合わせでちょっと難しいことをやってみる、の第2弾として、
・ポップアップ画面をテストする
・ドラッグアンドドロップをテストする
の2つについてご紹介します(今回はポップアップ画面のみ)。

ポップアップ画面のテスト

何らかのボタンをクリックした際に、別のブラウザウィンドウが立ち上がってくるポップアップウィンドウは非常にポピュラーな機能ですね。
一般的にポップアップウィンドウは、javascriptの「window.open」メソッドが使用されるケースが多いようです。例えば以下のようなソースです。

<script type="text/javascript">
    function popup1(){ window.open("http://www.google.co.jp","googleホームページ","width=500,height=500,scrollbars=yes,menubar=yes")}
</script>
<a href="#" onclick="popup1">ポップアップウィンドウ</a>

このようなポップアップウィンドウは、ポップアップを開いた後にselenium IDEの「selectWindow」コマンドでポップアップウィンドウを選択する事が可能です。

selectWindowコマンドの2列目は、ポップアップウィンドウのウィンドウタイトル（<title></title>の中身）を指定します。

window.openメソッドの第二引数（ウィンドウ名）でも選択できるとリファレンスには書かれていますが、（Selenium IDEでは）うまく選択できた事がありません・・・
タイトルタグが同じポップアップを複数開くと、コントロールできないと思われます。。

window.open メソッドではない方法でポップアップを呼び出している場合があります。
window.showModalDialog()
いわゆるモーダルウィンドウ、と呼ばれています。ポップアップが呼ばれたら、ポップアップ以外のページを選択できなくなるメソッドです。
この場合、Selenium IDEが動作している親ウィンドウ自体も動作しなくなりますので、モーダルウィンドウで呼ばれているページはテストできません。

アイフラッグでは、モーダルウィンドウで呼び出される実装のページに関して、「window.open」メソッドに書き換えてテストしています。
その際に本来引き渡すべきだった引数が渡せなかったり、モーダルウィンドウを閉じるときに親ウィンドウに値を戻せなかったりしますので、結構厄介ですね。
考え方としては、window.openメソッドで引き渡すURLにパラメータをつけてデータを渡し、ポップアップウィンドウを閉じてから親ウィンドウに戻って、モーダルウィンドウで戻すはずのデータを渡す、といった事になっています。
厳密に画面操作をトレースできていないので、Selenium IDEに頼らず人力でテストすべき箇所と認識しています。

次回はドラッグアンドドロップについてご説明します。
ありがとうございました。

2013/05/27

Selenium IDEのテストにJavascriptを使用する -ドラッグアンドドロップのテスト

皆さんこんにちは。アイフラッグの品質管理チームKです。
今回はSelenium IDE とjavascriptの組み合わせでちょっと難しいことをやってみる、の第3弾です。

javascriptを使用したUIやAjaxが一般的に使用されるようになってから、ドラッグアンドドロップのUIも非常に多くなってきたことと思います。
例えばリスト項目の順番を、ドラッグアンドドロップで入れ替えるようなUIはかなり一般的に普及しています。タッチパネル系の端末で操作するのはまだちょっと難しいかもしれませんが、すぐに優れたライブラリが普及するものと思われます。

このドラッグアンドドロップ操作をテストするのは非常に難しいですね。まずはSeleniumコマンドからご説明します。
Selenium IDEにもドラッグアンドドロップをサポートするコマンドがいくつかあります。

• dragAndDrop
• dragAndDropAndWait
• dragAndDropToObject
• dragdrop

早速これらのコマンドを使用してテストケースを作っていきましょう。まずは基本的なコマンドの動きを確認したいので、jQuery Draggableデモサイトでテストしてみます。

スピードつまみを一番遅い状態にして上記のテストを実行すると、動きがよくわかると思います。
Selenium IDEのコマンド「dragAndDrop」は、2列目にドラッグする対象を指定し、3列目には対象をどのくらい動かすか指定します。
画面のX軸（横方向）、Y軸（縦方向）に対して、それぞれピクセル単位で数値を入力します。

例えば以下のテストは、右に200px、下に200px動かしています。

対して下のテストは、左方向に100px、上方向に60px動かしています。

数値がプラスの場合、右/下へそれぞれ動き、数値がマイナスの場合は左/上へ動く感じですね。

続いて別のテストです。

「dragAndDropToObject」コマンドを使用しています。2列目対象のエレメントを指定し、3列目はピクセルではなくドロップする場所のエレメントを指定していますが、ちゃんと動作していませんね・・コマンドはエラーなく行きますが、結果はドラッグアンドドロップされていません。

先ほどのjQueryサイトで動作したコマンドはどうでしょうか。

こちらもおそらく動かないのではないかと思います。当社のシステムでもdragAndDrop系コマンドは動作しませんでした。。
原因は定かではありませんが、html5のdraggable属性をまだseleniumがサポートしていないのではないか、、と推測しています（すみません間違っているかも知れません）。

ちなみにdragAndDropコマンド以外でも、下のコマンドを使用してドラッグアンドドロップに似た動作をさせることも出来ます。

• mouseDownAt
• mouseMoveAt
• mouseUpAt

テストケースはこのような感じです。マウス（の左ボタン）をクリック⇒動かす⇒離すという動作を一つ一つ指定します。

コマンドの動作としては、以上のような感じで動きます。
ただ実際のテストケースでは、「ドラッグアンドドロップが出来る」という事を確認するよりも、

「ページ内の任意のエレメントの場所をチェックし、そこではない場所に動かして結果を確認する」

といったことをするはずです。ここからが本番なのですが、、、また次回とさせていただきます。
ありがとうございました。

2013/06/05

1. Seleniumとは（インストールと起動方法）（2013-03-07）
2. Selenium IDEの画面UI説明（2013-03-14）
3. テストケースとテストスイート（2013-03-14）
4. テストケースを書いてみる（2013-03-14）
5. テストスイートの作成、保存(2013-04-01)
6. 変更されるデータを使ってテストする(2013-04-01)
7. Selenium IDE でループ処理（n回ループ）を行う(2013-04-12)
8. Selenium IDE でAjaxページをテストする(2013-04-25)
9. Selenium IDE 2.0.0リリース（2013-05-08）
10. Selenium IDEとjavascript（2013-05-16）
11. ポップアップ画面のテスト(2013-05-27)
12. ドラッグアンドドロップのテスト(2013-06-05)
13. Selenium IDE Flow Controlを使用してforeachループを実行(2013-06-11)
14. Selenium IDE 2.1.0リリース -FireFox22での不具合対応(2013-07-03)
15. Selenium IDE 2.2.0リリース -2.1.0リリースの追記(2013-07-09)
16. 拡張スクリプト（user-extensions.js）の作り方(2013-07-29)
17. Selenium IDE 2.5.0リリース(2014-01-10)