2011年9月16日金曜日

Selenium IDEを使ってみる(その1)

Selenium IDEを使ってWebアプリのテストを行う方法についてです。

・検証環境
Window 7 64bit Firefox 6.0
Mac OS X Firefox 6.0              ※公式では, 5.0まで確認したそうです。7.0でも動作確認済

Selenium IDEは, Firefox のアドオンです。
Selenium のWebサイトよりダウンロードします。

Mac の場合, ツールのところに Selenium IDEがあります。
Windows の場合, Firefox のメニューのWeb開発のところにあります。

Selenium IDEを開くとこんな感じです。
開くとすぐテストケースの記録が開始されますのでとりあえず一息つくために, 右上の赤いマークをクリックして記録を止めます。

画面を簡単に説明しますと, Base URL というのがテストをスタートするURLです。
画面では, googleのWebページになっています。
通常はここに, テストしたいWebアプリのURLを突っ込みます。自分のマシンで開発中ですと,
http://localhost とかになるでしょう。

その下の緑や黄色赤のボタンなどがある部分がツールボタン群です。

左のFast Slow スライダは テストの実行スピードの調節です。Webアプリのクリックなどを試すので,速いと普通の人間では, そのスピードについていけません。ので, 目視する場合はスピードを調節します。

その右の→つきのものは, テストスイートの実行です, そしてその右がテストケースの実行です

(テストスイート:  テストケース群, 通常テストの実行は, 各テストケースを1つのスイートにまとめたりします)

(テストケース:  1つのテストのこと。1機能文のテストを1ケースと読んだり, verifyする項目1つ分をテストケースといいます。JUnit でいうと, TestCase クラス1つもしくは function 1つです)

その右が停止ボタンです。 これでステップ実行が可能なわけです。

そして, 右端にある赤いボタンがテストの記録・停止ボタンで, ここでテストの手順を自動記録していきます。

さて, ここで記録という言葉がでましたが, このSelenium IDEの素晴らしいところは テストを自動記録
できることです。
すなわち, Webブラウザ上で行った動作そのものがテストになります。
そして, その記録して保存したものを何度も実行できます。

というわけで, Selenium IDEを使った手順は以下のようになります。

1.  テストケースの作成
2.  Selenium IDEを使ってテストをブラウザ上で記録・保存
3.  検証項目を追加
4.  Selenium IDEでテストケースを実行

では, 1. より順に行きましょう。

今回はあくまで練習です。
テストケースはこんな感じです。

・google にアクセス
・検索ボックスに, AKB48 と入力
・検索の上位にある AKB48公式ページを開く

以上です。

2. ブラウザ上で記録

はい, 記録するとこのようになりました。
ここで, IDEの真ん中のテーブルという欄に, 項目が追加されました。

コマンド  :     実行するコマンド(操作)
対象       :     コマンドを何に対して行うか, (ページの名前であったり, 要素の特定であったりする)
           :     typeであれば, タイプする値であったりする

上の説明はものすごくざっくりしています。実際には, 下にあるリファレンスという項目を開くと
コマンドの詳細説明になっています。

コマンドというのは, JavaScript の関数になっていて, 対象, 値というのは, そのJavaScript 関数の第一引数, 第二引数です。

上のテストでは
open         /                             /   つまり, base URL(google)を開きます。
type         id=1st-id    AKB     DOM要素で, idが 1st-id になっているものにAKBという値をinputします
clickAndWait  link=AKB48公式サイト       DOM要素でlink つまり<a> のHTML要素がAKB公式サイトであるものをクリックして, ページがロードされるのも待ちます。

次に, このテストケースを保存しましょう。
保存は, Ctrl + S でできます。
保存前は, テストケースの下のUntitled という名前になっています。(保存しなければ破棄されます。

保存を行おうとすると, 拡張子なしで保存されようとしますが, できましたら, .html  といったように
HTMLで保存してあげてください。

といいますのも, このテストケースファイルは,  HTMLファイルです。

Selenium IDEのテーブルという項目の横にソースというのがあります。これがこのテストケースファイルの実体です。開いていただくと, コマンド等々がHTMLのタグ達になっているのがわかります。

Selenium IDEは, このコマンドたちを読み込んで, 実行しているわけです。実際に, HTML形式で保存していただいて, 後で, 別のブラウザで開いても, HTMLファイルとして, 開くことができます。
(拡張子なしだと気持ちわるいですよね...)


firstTest.html として保存しました。これにさらにテストケースを追加や削除する場合は, 右クリックメニューで行います。

では, 次に テストらしく検証項目を入れましょう。

検証には, verifyXXX や, assertXXX といったコマンドを利用します。(違いについては, 次回に回します)

ここでは, あるテキストが存在するかどうか確かめるために verifyTextPresent を利用します。
AKB公式サイトで発売になったCD のタイトルフライングゲットという文字がかならずあるはずなので, これを対象にします。

コマンド                             対象
verifyTetxtPresent               フライングゲット

と追加しました。

さて, これで実際にテストケースが完成し, 実行してみると。。。。
あれ?  動かない。ということになったります。

理由は, Google の検索がリアルタイム検索(非同期通信)だからです。
そうAjax です。
検索欄にタイプしている間に非同期通信して検索結果を表示しているので タイプしている間に,
AKB公式サイトというリンクを探して, クリックしようして失敗というわけです。

このように, Ajaxを利用している場合ページロードを待たずして次の処理を実行して, 次の操作が見つからず(特に連動して動く選択ボックスなど) Fail するケースがあります。

今回は, この対策として, wait系のコマンド waitForTextPresent を使って,
AKB48公式サイトというリンクが見つかるまで待つというコマンドを入れて対策をとりました。


はい, これで⇒ボタンを使ってテストを再現できました。
これで, Selenium IDEを一通り使ってみたことになります。


いかがでしたでしょうか? まずは, ダウンロードして利用してみましょう。
次回は, コマンドの詳細や複雑なテストについて , さらにAjax対策もかけるといいな。

















0 件のコメント:

コメントを投稿