No.109

Selenium Builder でUIテストを行おう

注意事項

　最初に断っておくと Selenium Builder は便利だけどすごいクセのあるツールだ。

　それに加えて、開発バージョンごとの差異が大きいので、過去の情報がアテにならないことが多い。

　主な注意点としては下記の通り。操作に関する注意事項はVersion2系列。

• Version2系列の利用を推奨。Vwesion3だと保存したデータをそのまま再生できない（ようだ）。
• カーソルオーバーレイして表示されるメニューなどのテストは行えない。操作対象は最初から画面に描画されている必要がある。
• 上の制約があるので、Ajaxなどで描画に時間の掛かる画面は描画が終わるまで待つ必要がある。
• 上の制約があるので、カルーセルなどの動的に変化する要素は正しく操作が記録されない可能性がある。
• 上の制約があるので、表示ごとに変化する要素は正しく操作が記録されない。
• 無駄なクリックは記録されてしまうので行わない。カーソル移動は行われないので気にしないでいい。

---

インストール

FireFoxののアドオン設定

　未署名のアドオンを利用できるようにするため、FireFoxのアドオン設定を変更する必要がある。画面に公開されているメニューではないので、FireFoxのconfig画面から設定を行う必要がある。

　config画面を開くにはURL欄に次のように入力すればOK。

about:config

　ここで

xpinstall.signatures.required

　検索する。

　ダブルクリックするとtrue``falseが切り替わるのでfalseにする。

Selenium Builder のインストール

　公式サイトからダウンロードすると最新バージョンになってしまうので、下記からVersion2系列の最終版をダウンロードする。

GitHubからダウンロード

　ダウンロードしたら下記の手順でインストールを行う。

1. 「メニュー＞アドオン」を選びアドオン管理画面へ移動。
2. 歯車マークをクリックして「ファイルからアドオンをインストール」を選択。インストール実行。

---

Selenium Builder 実行

記録作成

1. 「メニュー＞開発ツール」の「Launch Selenium Builder」を選択する。
2. 「Start recording at」にアクセスするサイトのURLを入力する。
3. 「Selenium2」ボタンを押して記録を開始する。
4. 一連の操作が終わったら「Stop Recording」ボタンを押して終了する。
5. 「File」メニューの「Export＞Save as JSON」を押してJSON形式で保存。

　保存前に記録をやり直す場合は以下の操作を行えばよい。

1. 「File」メニューの「Discard and Start Over」を選択する。

---

記録再生

1. 「File」メニューの「Open Scripts or Suite」から保存した記録ファイルを読み込む。（起動時のポップアップメニューからもOK）
2. 「Run」メニューの「Run test Localy」を選択する。

　操作Tipsとしては下記のとおり。

• 「Stop Playback」で途中で停止可能。
• 最初から再生しなおす場合は「Clear Results」で初期化を行う必要がある。
• ブレークポイントの設定なども行える。

トラブル対応

　記録再生時にトラブルが発生すると、トラブルが発生した操作が赤く色が変わり処理が停止する。

　個人的な印象ではCSSで重なり合っている要素は、DOMを正しく拾えないのか不要な操作が記録されてトラブルが発生することが多い気がする。

　頻出するトラブルとしては下記のメッセージが表示されるものがある。

clickElement css selector: xxxxx

　このメッセージが必要ない（DOM要素に対する）操作だった場合は、その操作を削除してしまうのが手っ取り早い解決方法だ。

　削除は各操作の左側にあるメニュー（三本横線）にて「delete step」を選択すればOK。

注意事項

• 記録再生時にはCookieが全て削除されている。