Fusic Developers Weblog

Archive for the ‘Selenium’ Category

{ 2012.6.16 }

Selenium IDEで連番をjavascriptでつける

category：Selenium, ソフトウェアテスト｜author：fukuda｜tag：｜comment：non

こんにちは。フクダリナです。
連投になりますが、今回は以前からずっとやりたくてもいまいちやり方を分かっていなかったSeleniumでの連番での登録方法です。

Selenium IDEで連番をふるには

Selenium IDEだけで連番を振ろうと思うと、手でせこせこ番号を入れる方法しか思いつきませんでした。
どうにかして動的に番号を振れるはずだとは思っていましたが、録音でできるものではなく。
Javascriptを使って登録します。

今回使うコマンドはコチラ
『getEval』

前回のinnerHTMLを操作するときと同じコマンドですね。

getEvalでJavascriptの操作が可能になります。

<tr>
	<td>getEval</td>
	<td>i=1;</td>
	<td></td>
</tr>

これで変数iに1をセットすることになります。いたってシンプル。

変数の保持期間ですが、Seleniumオブジェクトに保持されるようです。
ですので、test caseをまたごして使用することも可能ですし、初期値セットを通さなければ1回目のテストの続きの番号を2回目のテストで使用することが可能になります。

連番を振りながら登録してみる

実践してみます。
いつもはページネーションのデータ作るときに使っているのですが、公開できる画面がありませんので、前々回書いたSelenium IDEでスクリーンショットをとりながらテストするを改良して、連番のファイル名でスクリーンショットを保存します。

改良点は以下
・storeしていたファイルパスをjavascriptの変数に変更

<tr>
	<td>getEval</td>
	<td>file_path="C:\\test\\";</td>
	<td></td>
</tr>

・固定値だったファイル名をjavascriptでインクリメントした変数を2桁ゼロパディングした名称に変更

<tr>
	<td>captureEntirePageScreenshot</td>
	<td>javascript{file_path+ ( "0"+i).slice(-2) + ".jpg";}</td>
	<td>background=#FFFFFF</td>
</tr>

スクリーンショットを以下の3回撮るようにします。
１．ZENPREのTOPページを開いたとき
２．ログイン画面ページを開いたとき
３．エラー画面表示時

完成したものがコチラ。

<table border="1" cellspacing="1" cellpadding="1">
<thead>
<tr>
<td colspan="3">New Test</td>
</tr>
</thead>
<tbody>
<!--==ZENPRE使ってテスト==-->
<!-- 変数セット-->
<tr>
	<td>getEval</td>
	<td>i=1;</td>
	<td></td>
</tr>
<!-- 画像保存パスをJavascript側で指定-->
<tr>
	<td>getEval</td>
	<td>file_path="C:\\test\\";</td>
	<td></td>
</tr>
<!-- Zenpreのページを開きます-->
<tr>
	<td>open</td>
	<td>http://zenpre.net/</td>
	<td></td>
</tr>
<!--1回目：スクリーンショットを撮ります-->
<tr>
	<td>captureEntirePageScreenshot</td>
	<td>javascript{file_path+ ( "0"+i).slice(-4) + ".jpg";}</td>
	<td>background=#FFFFFF</td>
</tr>
<!--インクリメント-->
<tr>
	<td>getEval</td>
	<td>i=i+1;</td>
	<td></td>
</tr>
<!-- ログインをクリック-->
<tr>
	<td>clickAndWait</td>
	<td>css=#no_logined_header > a > img.fright</td>
	<td></td>
</tr>
<!--2回目：スクリーンショットを撮ります-->
<tr>
	<td>captureEntirePageScreenshot</td>
	<td>javascript{file_path+ ( "0"+i).slice(-4) + ".jpg";}</td>
	<td>background=#FFFFFF</td>
</tr>
<!--インクリメント-->
<tr>
	<td>getEval</td>
	<td>i=i+1;</td>
	<td></td>
</tr>
<!-- test/testでログイン-->
<tr>
	<td>type</td>
	<td>login</td>
	<td>test</td>
</tr>
<tr>
	<td>type</td>
	<td>password</td>
	<td>test</td>
</tr>
<tr>
	<td>clickAndWait</td>
	<td>//input[@type=&#039;image&#039;]</td>
	<td></td>
</tr>
<!-- エラーメッセージが正しく表示されているか確認-->
<tr>
	<td>verifyTextPresent</td>
	<td>ログインID、または、パスワードが違います</td>
	<td></td>
</tr>
<!--3回目：スクリーンショットを撮ります-->
<tr>
	<td>captureEntirePageScreenshot</td>
	<td>javascript{file_path+ ( "0"+i).slice(-4) + ".jpg";}</td>
	<td>background=#FFFFFF</td>
</tr>
</tbody>
</table>

実行すると、C:\testに3つの画像ファイルが保存されます。

連番がふれるというだけで、だいぶテストケースを作る手間がかからなくなりますので、ぜひご活用ください。

{ Page Top }

{ 2012.6.9 }

Selenium IDEでinnerHTMLを操作する

category：Selenium, ソフトウェアテスト｜author：fukuda｜tag：｜comment：non

こんにちは。フクダリナです。久しぶりすぎて、いろいろ忘れてしまいました。
Fusicでは、テスターと、時々マニュアル作成、趣味とまでいきませんが、Fusic内の写真を撮っています。
先日行った上海社員研修では、2200枚超の写真を撮りましたが、面白いと思う写真がとれなくて、写真の難しさを痛感しています。

Selenium IDEでテスト

もうだいぶ前になりますが、Selenium IDEでスクリーンショットをとりながらテストするというのを書かせていただきました。

今回もSelenium IDEについてです。

Selenium IDEで録音できることの限界

Selenium IDEの録音機能を使えば、HTMLやJavascriptの知識がなくても、テストケースを簡単に作ることが可能です。
しかし、録音にも限界というものがあり、innerHTMLや、Flashプレーヤーの操作などはできません。

Selenium IDEでinnerHTMLを操作したい

録音機能を使っては操作できませんが、Seleniumの「getEval」コマンドを使えば、innerHTMLの操作は可能です。
innerHTMLのテキストエリアの要素をとるには
this.page().getDocument().getElementById(“content_ifr”).
contentWindow.document.getElementById('tinymce').innerHTML = 'hoge';
というので可能です。

ということで、ここからソース

<!--サイトを開く-->
<tr>
	<td>open</td>
	<td>http://www.tinymce.com/tryit/full.php</td>
	<td></td>
</tr>
<!--innerHTMLの部分に文字を入れる-->
<tr>
	<td>getEval</td>
	<td>this.page().getDocument().getElementById("content_ifr").contentWindow.document.getElementById(&#039;tinymce&#039;).innerHTML = &#039;hoge&#039;;</td>
	<td></td>
</tr>

サンプルにwww.tinymce.com/tryit/full.php
を使ってみます。

さっそく実行。

・・・あっさりできてしまいました。

storeコマンドを使って、入力しやすくする

これだけではアレなので。
このコマンドは、「対象」と呼ばれる部分に入力値も入れることになるので、修正がしづらいです。

そこで、以前もでてきたstoreコマンドを使って、書き換えます。

storeコマンドでinput_dataという変数を宣言し、入力文字を設定します。
先ほどのinnerHTMLにセットしていた　hogeの部分を${input_data}と変数定義することで、storeでセットした文字がセットできます。

ソースはこちら

<!--サイトを開く-->
<tr>
	<td>open</td>
	<td>http://www.tinymce.com/tryit/full.php</td>
	<td></td>
</tr>
<!--変数を設定-->
<tr>
	<td>store</td>
	<td>ここに入力値をいれます。</td>
	<td>input_data</td>
</tr>
<!--innerHTMLの部分に文字を入れる-->
<tr>
	<td>getEval</td>
	<td>this.page().getDocument().getElementById("content_ifr").contentWindow.document.getElementById(&#039;tinymce&#039;).innerHTML = &#039;${input_data}&#039;;</td>
	<td></td>
</tr>

これで、storeコマンドの対象を変更するだけで入力値を簡単に変更できます。

おわりに

Selenium IDEはプログラマーでなくても、簡単にテストの自動化を行ってくれるツールですが、使い方をマスターすると、より複雑な操作も可能になります。
まだまだ勉強中ですので、次回はWYSIWYGエディタの完全操作や、Flash Playerを操作できるようになりたいと思います。