---

ブラウザ操作を記録してSeleniumのスクリプトを生成するツールと言えば、以前はSelenium IDEでしたが、最近ではSelenium Builderというツールも登場しています。

次世代のSelenium IDEを目指して作られているというこのツール※1、まだ使ったことが無い方も多いと思います。

今回は、まだまだ知られていないこのSelenium Builderの全貌を、Selenium IDEと比較しながら明らかにしていきましょう。

かなり長い記事になりますので、Part 1からPart 4に分けてお届けしていきたいと思います。

---

ブラウザ操作を記録してSeleniumのスクリプトを生成するツールと言えば、以前はSelenium IDEでしたが、最近ではSelenium Builderというツールも登場しています。

次世代のSelenium IDEを目指して作られているというこのツール1、まだ使ったことが無い方も多いと思います。

今回は、まだまだ知られていないこのSelenium Builderの全貌を、Selenium IDEと比較しながら明らかにしていきましょう。

かなり長い記事になりますので、Part 1からPart 4に分けてお届けしていきたいと思います。

Selenium BuilderとSelenium IDEのおさらい

Selenium Builder(以下Builder)、Selenium IDE(以下IDE)は、どちらもSeleniumスクリプトの記録・再生を行うFirefoxプラグインです。

最大の違いは、IDEで扱えるスクリプトはSelenium RC形式だけなのに対し、BuilderはWebDriver形式、Selenium RC形式の両方が扱える点です。(Selenium RC、WebDriverの違いについては、こちらの記事で解説しています)

Seleniumプロジェクトでは今後WebDriverが主流になっていくはずなので※2、スクリプトをWebDriver形式で扱えることには大きなアドバンテージがあります。

一方、IDEはBuilderよりも歴史が古く、多くの利用実績がある点が魅力です。

---

---

---

比較方法

次の4つの観点から比較を行いました。

• 基本的な機能の比較
• 記録・再生精度の比較
• 高度な機能の比較
• 機能以外の要素の比較

比較に使用したツールのバージョンは次の通りです。

• Selenium Builder: 2.0.10
• Selenium IDE: 2.4.0 (2013年9月16日リリース)

基本的な機能の比較

Part 1では、スクリプトの作成・実行・管理などの基本的な機能について比較します。

記録・再生支援

まずは、ブラウザ操作記録・再生機能の使い勝手について比較します。(記録・再生エンジン自体の精度についてはPart 2で比較します)

Builder、IDEとも、スクリプトの記録・再生は簡単です。

Builderの場合

Builderを起動すると、記録対象URLを指定する画面が表示されます。URLを指定して「Selenium 1」または「Selenium 2」を押すと、記録が始まります。(図3)

---

---

記録したいブラウザ操作を行い、「Stop recording」を押すと記録完了です。(図4)

---

---

「Run > Run test locally」で、記録したスクリプトを再生できます。

IDEの場合

IDEを起動すると、自動的に記録が開始されます。「記録中です。クリックすると停止します。」のボタンを押すと記録が終了します。(図5)

---

---

「現在のテストケースを実行」のボタンで、記録したスクリプトを再生できます。(図6)

---

---

さて、基本的な手順が分かったので、今度は記録・再生の機能について細かく比較してみましょう。

記録結果のリアルタイム確認

記録中にスクリプトの内容をリアルタイムで確認できます。Builderの場合、エディットに入力している文字も、1文字ずつリアルタイムで確認できます。

記録・再生開始時のCookie消去

記録・再生開始時に、対象WEBサイトのCookie(ウェブブラウザに保存された一時情報)を消去する、Builderだけの機能です。記録時と再生時でCookieの状態が異なるとテスト再生の失敗の原因になるため、地味ですが嬉しい配慮です。

ステップ再生

Builderのステップ再生は、1ステップごとにマウスカーソルを移動しなければならず不便です。(図7)

---

---

「記録・再生支援」まとめ

BuilderとIDE、どちらも一長一短という感じです。

スクリプト編集に役立つ機能

続いては、スクリプトの編集機能の使い勝手の比較です。

スクリプトの手編集

記録したスクリプトを画面上で編集することができます。図8は、Builderでスクリプトを編集しているところです。

---

---

コマンドの削除

Builderにはコマンド削除のショートカットキーが無く、一括削除もありません。複数のコマンドを削除する際などに非常に面倒です。

操作対象のブラウザ上の位置を検索

IDEでコマンドの編集中に、「検索」ボタンを押すと、ブラウザ上の該当する要素をハイライトすることができます。(図9)

---

---

Builderにも同様の機能があるのですが、思うように動作しないことが多いです。

ブラウザ上で要素を選んで、操作対象を変更

Builderで、スクリプト編集中に「Find a different target」というボタンを押し、要素をブラウザ上でクリックすると、スクリプトの操作対象がクリックした要素に書き換わります。(図10)

---

---

IDEには、このような機能は見当たりません。

操作対象の記録された形式を変更

「画面要素が id=... の形式で記録されたが、idは毎回動的に変わるため、 link=... の形式にスクリプトを変更したい」といった場合に、BuilderやIDEが提示する他の記録形式を画面から選択できます。

---

---

編集時の操作性

Builderは、コマンドにマウスを当てると吹き出しが表示されるUIが、正直あまり使いやすくないです。(このUIのおかげで画面はすっきりしているのですが)

また、スクリプトを1ヶ所編集するたびにOKボタンを押す必要があるのも面倒です。

スクリプトの見やすさ

Builderは、長いスクリプトでも折り返して画面内に収めてくれる点が親切です。

ただ、文字サイズが小さすぎて、見にくく操作しづらいです。

「スクリプト編集に役立つ機能」まとめ

比較結果の「〇」の数だけ見ればあまり差がないような気がしますが、実際に使ってみると、操作性のせいでBuilderの方がかなり使いづらい印象を受けます。

この点については、今後の改善に期待したいですね。

Assert・Verify

画面要素の値をチェックするAssertやVerifyのコマンドの追加方法を比較します。

コマンド編集によりAssert・Verifyを追加

通常のコマンドと同様の編集方法により、AssertやVerifyのコマンドを追加できます。図12は、BuilderでAssertのコマンドを選択しているところです。

---

---

ブラウザ画面で要素を選んでAssert・Verifyを追加

IDEの場合、記録中にチェックしたい要素をブラウザ上で右クリックし、AssertやVerify関連の様々なコマンドを記録することができます。(図13)

---

---

Builderの場合も、記録中に「Record a verification」ボタンを押し、要素をブラウザ上から選択すると、verifyTextPresentコマンドが記録されます。(図14)

---

---

ただ、「画面のどこかにテキストが表示されている」ことをチェックするverifyTextPresentコマンドしか記録することができません。

「Assert・Verify」まとめ

IDEの方が様々なチェックをブラウザ上で記録できて便利ですね。

Wait

画面上のステータスが「完了」になるまで待機する、のような待ち処理を実現できるのがWaitのコマンドです。何を待つのかによって、waitForTextやwaitForElementPresentなど様々なWaitコマンドがあります。

コマンド編集によりWaitを追加

AssertやVerifyと同様の方法で可能です。

ブラウザ画面で要素を選んでWaitを追加

IDEの場合、AssertやVerifyと同じように、記録中にWait対象にしたい要素をブラウザ上で右クリックして、様々なWaitコマンドを記録することができます。

「Wait」まとめ

Assert・Verifyと同様、ブラウザ上で様々なWaitコマンドを記録できるIDEの方が便利です。

変数

storeTextなどのStore系コマンドを利用し、画面上の値などを変数に一時保存して、後ろのコマンドで利用することができます。

コマンド編集によりStoreを追加

Waitと同様の方法で可能です。

ブラウザ画面で要素を選んでStoreを追加

これもWaitと同様の方法で可能です。

複数のスクリプト間で変数の値を共有

Builderでは、テストスイート中の複数のスクリプト間で変数の値を共有することができないようです。テストスイートが複雑にならないよう意図的にそうしているのか、単に未実装なのかは不明です。

「変数」まとめ

これもWaitと同様、ブラウザ上で様々なStoreコマンドを記録できるIDEの方が便利です。

スクリプト管理

スクリプトをファイルに保存

作成したスクリプトはファイルに保存することができます。

Builderは、以下の挙動が、慣れないと使いづらいです。

• 現在のスクリプトが保存できるのではないかと思いCtrl + Sを押すと、Builder自体の画面のHTMLを保存するファイルダイアログが開いて戸惑います。(スクリプト保存のショートカットキーは現在無いようです)
• どのスクリプトが保存済みでどのスクリプトが未保存なのかが、よく分からなくなります。スクリプト未保存でBuilderを閉じようとしたときに出るメッセージも、分かりにくいです。

テストスイートの管理

複数のスクリプトを1つのテストスイートにまとめて管理することができます。

Builderは、テストスイート中のスクリプトの数が多くなると、画面外にはみ出て操作できなくなり困ります。

---

---

Builderのドキュメントには、「依存関係を持つ多数のスクリプトを含むテストスイートは、失敗時の原因調査が難しくなるので避けた方がよい」とあります。スクリプト数が増えた時の操作性の改善は、優先順位が低いのかもしれません。

「スクリプト管理」まとめ

Builderのスクリプト管理機能には、まだまだ使いづらい点が多いです。

テスト結果確認

テスト結果の保存

IDEは、Test Resultsプラグインを使うことでテスト結果をHTMLとして保存しておけます。ただ、それほど高機能ではないので用途は限定的です。

「テスト結果確認」まとめ

Builder、IDEとも大きな差は無いです。

エラー調査に役立つ機能

画面キャプチャ

BuilderはsaveScreenshotコマンド、IDEはcaptureEntirePageScreenshotコマンドで、テスト再生中にブラウザの画面キャプチャを取得することができます。

1操作ごとの画面キャプチャを自動的に取得する、といったことはできないようです。

print、echoコマンド

BuilderのprintコマンドとIDEのechoコマンドは、テスト再生中にスクリプトのデバッグ用に文字列を出力するコマンドです。変数の現在の値を出力して確認するのに活用できます。

再生中の画面要素のハイライト

IDEでは、Highlight Elementsプラグインを使うことで、操作中の要素をリアルタイムでハイライトできます。

デバッグログ

IDEでは、Seleniumの内部情報を詳細に確認するデバッグログを画面から見ることができます。ただ、見ても何も分からない場合がほとんどです。

「エラー調査に役立つ機能」まとめ

多少機能の違いはありますが、エラー調査のしやすさはBuilderもIDEもそれほど変わりません。

不具合

Builderを使っていると、画面の不具合に遭遇することが時々あります。画面の起動に失敗する、コマンド編集の吹き出しが表示されなくなる、記録が行われていない、などなど。

IDEの画面にも不具合はありますが、Builderと比べると遭遇することは少ないです。

「不具合」まとめ

Builderは、まだ不具合が残っていて少し不安定な印象です。こちらは今後の改善に期待したいところです。



以上、基本的な機能について比較してみました。次回Part 2では、記録・再生の精度について比較していきます。

なお、本記事はSelenium Advent Calendar 2013の2日目の記事です。

注釈・出典

1. Sauce Labs offers new Selenium Builder
2. Selenium3のロードマップ

---