皆さんこんにちは。アイフラッグの品質管理チームKです。
今日はSelenium IDEを使ったAjaxのテストについて、ご説明したいと思います。
最近のWEBサービスは、どんなものであれAjaxを使用したページが非常に多くなってきていると思います。当社のサービスにおいても、Ajaxの処理を多数使用しています。
Ajaxの代表的な使い方としては、ページを更新することなくデータをサーバーへ送信し、サーバーからのレスポンスをそのまま現在表示されているページへ反映するような処理が多いですね。
ページ遷移が入っていないため、使用するSeleniumコマンドによってはエラーとなってしまうものが出てくると思います。
このようなページをSelenium IDEでテストするにはどうしたらいいのでしょうか。
Selenium IDEのコマンドにはAjax処理されたエレメントをテストする便利なコマンドが用意されています。
代表的なものが、「WaitFor○○」という、WaitForから始まるコマンドです。
といったコマンドをよく使用しています。
WaitForTextPresent | ステータスを「発送済み」に変更しました。 |
waitForTextPresentは、ページのどこかに2列目で指定するテキストが現れるまで待つコマンドです。ページ遷移がないけれど何らかのテキストが表示されることによって、処理が正常に終了したと判断できる際に使用しています。
WaitForElementPresent | id=errorMsg |
WaitForElementPresentは、2列目で指定するエレメントがページに現れるまで待つコマンドです。先ほどのWaitForTextPresentでは、評価するテキスト文字列が一定のものしか使えません。
テキスト文字列が違っても表示される場所が一定であれば、WaitForElementPresentを使用する場合があります。
waitForPageToLoad | 10000 |
waitForPageToLoadは、ページがロードされるまで2列目に指定した時間中待つコマンドです。2列目の指定する時間は1/1000秒単位で指定します。ここでは10秒待つ、ということですね。
waitForSelectOptions | id=level2 | target |
waitForSelectOptionsは、いわゆるドリルダウンメニューなどのテストをする際に使用します。
例えば住所を指定する3つのプルダウンメニュー(1.都道府県 2.市区町村 3.番地)が並んでいて、
都道府県を選択すると市区町村のプルダウンにデータがロードされ、市区町村を選択すると番地のプルダウンにデータがロードされる、といったAjax処理のテストが出来ます。
2列目にテスト対象の場所、3列目に対象文字列等を指定します。
WaitFor○○コマンドはまだまだ沢山ありますので、Selenium IDE画面内のコマンドリファレンスなどを参考に使えるコマンドを増やしていくとよろしいかと思います。
WaitForによく似たコマンドとして「○○AndWait」があります。
まず何らかのアクションを実行し、その後ページがロードされるのを待つ、といった場合に使用します(私はほとんどclickAndWaitしか使っていません)
clickAndWait | link=次へ |
もうお分かりかと思いますが、「次へ」というテキストリンクをクリックし、次のページがロードされるまで待つ、といった処理をします。
Ajax処理と一言でくくっても、いろいろな実装があると思います。おそらくSelenium IDEが準備しているコマンドだけでは全てのテストには対応できません。
が、Selenium IDEではjavascript コードをテストの中に含める事が出来ますので、Selenium IDEコマンドとjavascript をうまく使用して、サービスに見合ったテストケースを構築していく場合が非常に多いと思います(ほとんどそうなります)。
テストケースの「記録」ボタンからケースを作成できるようになる
↓
豊富なSelenium コマンドを使用して、複雑なテストケースを作れるようになる
↓
Selenium コマンドとJavascriptを組み合わせて、望みどおりのテストケースを作れるようになる
といった順番で、Selenium IDEを使いこなせるようになると素晴らしいと思います。
ありがとうございました。
2013/04/25
皆さんこんにちは。アイフラッグの品質管理チームKです。
今回はSeleniumコマンドとjavascriptを組み合わせて、少々複雑なテストケースを作る方法をご紹介します。
私自身はプログラマーではないので、プログラムは書きません。ただjavascriptの基本的な処理を少し使うだけで、Selenium IDEのテストケースをより緻密に効果的に作成する事が可能になります。
早速使ってみる前に、Selenium独特の注意点があります。
仕様として覚えていただければと思います。テストの中でjavascriptを実行すると、そのままではselenium領域の中で実行されてしまいます。
それを避けるために、テスト対象のページ領域を指定する必要があります。
テスト対象のページにある
などです。いくつか書き方があります。
Selenium IDE でjavascriptを実行したい場合は、○○Evalコマンドを使用します。
などです。単純に実行するだけであれば、getEvalやstoreEvalでも大丈夫です。
storeEvalはjavascript実行時の結果を、変数として保存する事が可能です。
storeEval | selenium.page().getCurrentWindow().document.getElementById('foo').innerHTML | fooContents |
${fooContents} として、次のテストに実行後の結果を引き継ぐ事が出来ます。
assertEval、verifyEvalは、javascript実行後に返ってきた値を元にテストの評価を行います。
assertEval | selenium.page().getCurrentWindow().document.getElementsByTagName('h1').innerHTML=='ページタイトル' | true |
2列目のjavascriptで、h1タグの中身が「ページタイトル」だとtrueが返りますので、3列目のtrueと比較して一致していればテストOK。一致していなければエラーとなります。
javascript実行時にはそのままではページ内エレメントにアクセスできない、と書きましたが、runScriptコマンドを使用すればjavascriptを通常の書き方で実行可能です。
runScriptコマンドは、当該ページの
runScript | CKEDITOR.instances["foo"].setData('WYSIWYGエディターにテキスト投入。'); |
以上です。皆様のお役に立てば幸いです。
ありがとうございました。
2013-05-16
皆さんこんにちは。アイフラッグの品質管理チーム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」コマンドでポップアップウィンドウを選択する事が可能です。
click | link=ポップアップウィンドウ | |
selectWindow | title=Google |
selectWindowコマンドの2列目は、ポップアップウィンドウのウィンドウタイトル(<title></title>の中身)を指定します。
window.openメソッドの第二引数(ウィンドウ名)でも選択できるとリファレンスには書かれていますが、(Selenium IDEでは)うまく選択できた事がありません・・・
タイトルタグが同じポップアップを複数開くと、コントロールできないと思われます。。
window.open メソッドではない方法でポップアップを呼び出している場合があります。
window.showModalDialog()
いわゆるモーダルウィンドウ、と呼ばれています。ポップアップが呼ばれたら、ポップアップ以外のページを選択できなくなるメソッドです。
この場合、Selenium IDEが動作している親ウィンドウ自体も動作しなくなりますので、モーダルウィンドウで呼ばれているページはテストできません。
アイフラッグでは、モーダルウィンドウで呼び出される実装のページに関して、「window.open」メソッドに書き換えてテストしています。
その際に本来引き渡すべきだった引数が渡せなかったり、モーダルウィンドウを閉じるときに親ウィンドウに値を戻せなかったりしますので、結構厄介ですね。
考え方としては、window.openメソッドで引き渡すURLにパラメータをつけてデータを渡し、ポップアップウィンドウを閉じてから親ウィンドウに戻って、モーダルウィンドウで戻すはずのデータを渡す、といった事になっています。
厳密に画面操作をトレースできていないので、Selenium IDEに頼らず人力でテストすべき箇所と認識しています。
次回はドラッグアンドドロップについてご説明します。
ありがとうございました。
2013/05/27
皆さんこんにちは。アイフラッグの品質管理チームKです。
今回はSelenium IDE とjavascriptの組み合わせでちょっと難しいことをやってみる、の第3弾です。
javascriptを使用したUIやAjaxが一般的に使用されるようになってから、ドラッグアンドドロップのUIも非常に多くなってきたことと思います。
例えばリスト項目の順番を、ドラッグアンドドロップで入れ替えるようなUIはかなり一般的に普及しています。タッチパネル系の端末で操作するのはまだちょっと難しいかもしれませんが、すぐに優れたライブラリが普及するものと思われます。
このドラッグアンドドロップ操作をテストするのは非常に難しいですね。まずはSeleniumコマンドからご説明します。
Selenium IDEにもドラッグアンドドロップをサポートするコマンドがいくつかあります。
早速これらのコマンドを使用してテストケースを作っていきましょう。まずは基本的なコマンドの動きを確認したいので、jQuery Draggableデモサイトでテストしてみます。
ドラッグアンドドロップのテスト | ||
open | http://jqueryui.com/draggable/ | |
dragAndDrop | id=draggable | 200,200 |
dragAndDrop | id=draggable | -100,-60 |
スピードつまみを一番遅い状態にして上記のテストを実行すると、動きがよくわかると思います。
Selenium IDEのコマンド「dragAndDrop」は、2列目にドラッグする対象を指定し、3列目には対象をどのくらい動かすか指定します。
画面のX軸(横方向)、Y軸(縦方向)に対して、それぞれピクセル単位で数値を入力します。
例えば以下のテストは、右に200px、下に200px動かしています。
dragAndDrop | id=draggable | 200,200 |
対して下のテストは、左方向に100px、上方向に60px動かしています。
dragAndDrop | id=draggable | -100,-60 |
数値がプラスの場合、右/下へそれぞれ動き、数値がマイナスの場合は左/上へ動く感じですね。
続いて別のテストです。
ドラッグアンドドロップのテスト2 | ||
open | http://www.w3schools.com/html/html5_draganddrop.asp | |
dragAndDropToObject | id=drag1 | id=div2 |
「dragAndDropToObject」コマンドを使用しています。2列目対象のエレメントを指定し、3列目はピクセルではなくドロップする場所のエレメントを指定していますが、ちゃんと動作していませんね・・コマンドはエラーなく行きますが、結果はドラッグアンドドロップされていません。
先ほどのjQueryサイトで動作したコマンドはどうでしょうか。
dragAndDrop | id=drag1 | 200,1 |
こちらもおそらく動かないのではないかと思います。当社のシステムでもdragAndDrop系コマンドは動作しませんでした。。
原因は定かではありませんが、html5のdraggable属性をまだseleniumがサポートしていないのではないか、、と推測しています(すみません間違っているかも知れません)。
ちなみにdragAndDropコマンド以外でも、下のコマンドを使用してドラッグアンドドロップに似た動作をさせることも出来ます。
テストケースはこのような感じです。マウス(の左ボタン)をクリック⇒動かす⇒離すという動作を一つ一つ指定します。
mouseDownAt | id=test | 1,1 |
mouseMoveAt | id=test | 100,190 |
mouseUpAt | id=test | 1,1 |
コマンドの動作としては、以上のような感じで動きます。
ただ実際のテストケースでは、「ドラッグアンドドロップが出来る」という事を確認するよりも、
「ページ内の任意のエレメントの場所をチェックし、そこではない場所に動かして結果を確認する」
といったことをするはずです。ここからが本番なのですが、、、また次回とさせていただきます。
ありがとうございました。
2013/06/05
アイフラッグラボとは、アイフラッグが提供する技術情報サイトです。アイフラッグが提供するスモールビジネス向けのITサービスの開発実績から培った技術ノウハウを公開していきます。技術情報が皆さまのサポートになれば幸いです。