Selenium IDE for primer

株式会社シーケンス
Nov. 14, 2014

ご挨拶
株式会社シーケンス代表取締役
篠原康行
我々は、オレンジソフト様からテスト自動化のお話をいただき、
2014年3月から約8ヵ月に渡り、Selenium IDEに使ったテスト自動化
に取り組んで参りました。
今回のセミナーでは、その取り組みで得られた知見等をこの場で
ご報告させて頂きたいと思います。
また、今後のテスト自動化の普及に繋がれば幸いです。
テスト対象アプリケーション： xgate4 (Webメールソフト)
※メール誤送信対策機能搭載
製造元：株式会社オレンジソフト

内容
1. Seleniumとは
2. Selenium何がいいの？
3. Seleniumいろいろあるけど・・・
4. Selenium IDEを使う
5. テスト自動化を行うにあたって
Q&A

１．Seleniumとは
Webブラウザを使ったWebアプリケーションのテスト
を自動化するツール
- 始まりは、社内ツール(2004)
- オープンソースソフトウェア（OSS）
ライセンス： Apache 2.0 License
- Seleniumプロジェクトhttp://www.seleniumhq.org/
- ターゲットブラウザFireFox, IE, Chrome, Safari

2.Selenium何がいいの？
1. 手入力要素のテスト
2. 複数条件のテスト
3. 表示内容のテスト
4. テストの記録
5. テスターに依存しない
6. マルチブラウザでのテスト
7. 思いかけないけど意外にいいかも

2-1.手入力要素のテスト
手入力要素のテストを自動化できる
入力条件の明確化
入力時間の短縮
手作業によるケアレスミスを防ぐ
例．文字種と文字数制限のテスト
［ひらがな］入力ができるかを確認する
［１２８文字］以上の入力はできないことを確認す
る

2-2.複数条件のテスト
複数の要素を組み合わせたテストケースの作成が容易
例．検索を行う

2-3.表示内容のテスト
ページに表示されるべき内容の確認が容易である
例．メニュー項目の確認

2-4.テストの記録
エビデンスを作成しやすい
 テスト内容や結果についてコメントを入力可能
 テストの入力内容や画面遷移を記録可能
 テストの結果をログファイルに出力可能
 記録に残すことで、Webアプリケーション更新の影
響を確認可能

2-4.テストの記録
エビデンスを作成しやすい
更新した箇
所
 テスト内容や結果についてコメントを入力可能
 テストの入力内容や画面遷移を記録可能
 テストの結果をログファイルに出力可能
 記録に残すことで、Webアプリケーション更新の影
響を確認可能

2-5.テスターに依存しない
 自動化することでテスターによるテストの深さのバ
ラツキを防ぐ
- 仕様を明確できる
- テストデータもSeleniumで作成することでテスターに
依存しない
- 大量のテストデータを作成しやすい
 手作業によるケアレスミスを防ぐことが容易である

2-6.マルチブラウザでのテスト
各種ブラウザでテストケースを実行可能
 主なブラウザ
- FireFox, IE, Chrome, Safari
 実行形式
- SeleniumIDEを使用した実行
- SeleniumRCでの実行
- プログラミングにて実行可能
主なプログラミング言語Java, C#, Ruby, Python
 ブラウザ間の差違を発見しやすい

2-7.デグレードしにくい
 Webアプリケーションを更新した際にデグレードし
ていないか確認しやすい

2-7.デグレードしにくい
 Webアプリケーションを更新した際にデグレードし
更新した箇
ていないか確認しやすい
所

2-7.思いかけないけど
意外にいいかも
開発者が自身のWebアプリケーションの確認に
Selenium を使用すると、意外にいいかも
 Seleniumで確認しやすい記述を意識するようになり、
標準的な記述を行うようになるのでは・・・
 開発時にデグレードを発見しやすい
 開発者自身にとって
単体テストのエビデンスを取ることができる

3. Seleniumいろいろあるけど・・・
Selenium
Grid
WebDriver
Selenium3
モバイル強化
Selenium RC
(Selenium1)
Selenium 2
Visual型ツー
ル
Selenium IDE
SeleniumBuilder
モバイル向け
ios-driver
Selendroid
Appium

3-1.Selenium RC (Remote Control) - ①
Seleniumスクリプト(HTML形式)をコマンドラインから実行する

3-1.Selenium RC (Remote Control) - ②
コマンドライン
Selenium Server
>java -jar selenium-server-standalone-2.41.0.jar
-htmlSuite *googlechrome
WebブラウザはChrome
Webアプリケーション
URL
http://xgate4.orangesoft.co.jp/xgate48/grp/test/b
テストスイーツのパステスト結果を出力するファ
イル
E:JobOrangeSofttsTest.html e:loglog.html

3-1.Selenium RC (Remote Control) - ③
Seleniumスクリプトは、Seleniumコマンドの組み合わせの他、JavaScriptを
使ったテストも記述できる

3-1.Selenium RC (Remote Control) - ④

3-2.WebDriverとSelenium2
WebブラウザをコントロールするAPI群
WebDriver API
特別なテストケース、SeleniumコマンドとJavaScriptでは記述が
難しいテストケース、あるいは、テストスピードを速くしたいな
ど
 Java, C#, Ruby, Python他の言語で作成したい場合
マルチブラウザ対応したい、テストレポートを細かにしたい、
etc...
 主なWebDriver
ChromeDriver, FirefoxDriver, InternetExplorerDriver,
SafariDriver, AndroidDriver, ios-driver
 主流Selenium １ + WebDriver = Selenium ２

3-3.Visual型ツール- ①
Selenium IDE
- Seleniumテスト用の統合開発環境
- 入力操作の自動記録・再生
- スクリプトを手動で記述・編集・デバッグ
- テストケースをその場で実行・検証できる
- 複数テストケースをテストスイーツとしてまとめてテスト
- ブラウザ内のテスト画面を保存可能
- テストケースをHTML、Ruby、Python、Java、C#など多様な形式
で保存可能デフォルトは、HTML形式
- JavaScriptをスクリプト内または拡張スクリプトファイルにて使
用可能（拡張スクリプト使用時：user-extensions.js必須、.js追加
可能）
- FireFoxアドオン
- 多種多様なプラグイン（ログファイル出力、制御構造など）
- テスト結果をレポートにまとめやすい

3-3.Visual型ツール- ②
Selenium Builder
- Seleniumテスト用の統合開発環境
- SeleniumIDEとほぼ同じ機能を持つ
- WebDriverのコマンドをスクリプトに記述可能
Seleniumコマンドより細やかなテストケースを作成可
能
プログラミング向き
- FireFoxアドオン

3-3.Visual型ツール- ③
IDEとBuilder どちらを使う？
Seleniumプロジェクトとしては、いずれはSeleniumコ
マンドからWebDriverコマンドへ全面的に移行したいの
で、Builderを推奨したいようである
しかし、歴史が浅い（２０１３年初め頃）こともあり、
まだ実用性は低い
Builderの不便な点として
•UIが使いづらい
•変数を複数のテストケースで共有できない
•データ駆動型のテストができない
•対応ブラウザはFireFoxのみ
これらは、テストツールを使う上では問題なので、や
はりSeleniumIDEを選択した方が良いでしょう

3-3.Visual型ツール- ③
IDEとBuilder どちらを使う？
個人的には、SeleniumIDEは、
とても使いやすいので、
WebDriverコマンドを記述でき
るようになって存続してほしい
と思います・・・今もIDEは更
新しているので期待しています
SeleniumIDEはWebアプリ
ケーションやプログラミングに
精通していなくても扱いやすい
とも思います
Seleniumプロジェクトとしては、いずれはSeleniumコ
マンドからWebDriverコマンドへ全面的に移行したいの
で、Builderを推奨したいようである
しかし、歴史が浅い（２０１３年初め頃）こともあり、
まだ実用性は低い
Builderの不便な点として
•UIが使いづらい
•変数を複数のテストケースで共有できない
•データ駆動型のテストができない
•対応ブラウザはFireFoxのみ
これらは、テストツールを使う上では問題なので、や
はりSeleniumIDEを選択した方が良いでしょう

3-4.Selenium Grid
 複数のマシンにテストを自動で分散させるツール
Webアプリケー
ション
Windows
IE
MAC
Safari
Android
Windows
FireFox
Selenium Grid Serever
テストスクリ
プト
・・・

3-5.モバイル向け- ①
 本家Seleniumとしてはスマホ向けSeleniumの開発は中止
（TL;DR: We’re retiring Selenium’s own AndroidDriver and iPhoneDriver in favour of any of Selendroid,
iosdriver and Appium. If you’re using one of Selenium’s own mobile drivers, please evaluate one of these
alternatives.）
 iOS向け： ios-driver
今のところiOSシミュレータ上のみで動作
 Android向け： Selendroid
Androidエミュレータで動作／実機はselendroid-standalone
コンポーネントを組み込んで動作
 iOS, Android 向け： Appium
Sauce Labs社が開発
 テストケースは、Java/Ruby/Python/C#で記述
一部、JavaScript可能とのこと

3-5.モバイル向け- ②
 モバイル向けのWebDriverは、未だ実用性が低いようで
ある
Appiumが実用に一番近いように見受けられる
 モバイル向けテスト方法の提案として
FireMobileSimulatorを使用してSeleniumIDEにてテス
トを実行可能

3-5.モバイル向け- ②
 モバイル向けのWebDriverは、未だ実用性が低いようで
ある
Appiumが実用に一番近いように見受けられる
 モバイル向けテスト方法の提案として
FireMobileSimulatorを使用してSeleniumIDEにてテストを実行
可能

4.Selenium IDEを使う- ①
 インストール
 Firefoxでhttp://docs.seleniumhq.org/download/にアク
セスする
 Download latest released version 2.8.0 released on
29/Sep/2014
ここをクリック

4.Selenium IDEを使う- ②
 起動
 メニュー→ 開発ツール→ Selenium IDE
または
 ツールバーのSelenium IDE アイコンをクリック

4.Selenium IDEを使う- ③
 初めての起動
テストケース一
覧
太字になってい
るテストケース
が編集の対象
ここに編集対象テストケー
スのコマンドソースを表示
ここに実行時のロ
グ

4.Selenium IDEを使う- ④
 テストケースまたは
テストスイーツの
読み込み

4.Selenium IDEを使う- ⑥
実行速度の
調整
テストスイー
ツ全体を実行
対象テスト
ケースを実行
rollupコマン
ドを組み込む
デバッグ用
[一時停止/再開]
[１ステップ実行]
拡張スクリプ
トの再読み込
み
テストの記録
開始／停止

4.Selenium IDEを使う- ⑦
 編集する

4.Selenium IDEを使う- ⑦
 編集する
例．編集の様子

4.Selenium IDEを使う- ⑧
 デバッグをする
例．デバッグの様子

4.Selenium IDEを使う- ⑨
その他いろいろ
 マルチブラウザでは・・・
FireFoxの他にChrome、IEで動作可能
但し、Chrome、IEでの編集は実行前のみ、実行
後の編集は即時実行はできない－実例
参考：IDEを他のブラウザで動作させる
 スクリプトファイルは、HTML形式で出力－テキストエディタで編集可能
 スクリプトファイルをエクスポートすることで、さらに細やかなテストケースを作成
できるJava, C#, Ruby, Python
 拡張スクリプトファイルを取り込むことができる
複数指定できるが、１つはuser-extensions.jsであること
メニューから［オプション］→ ［設定］でOptionダイアログ表示

Chrome、IEで動作可能
但し、編集は実行前のみ、実行後の編集は即時実行はできない－実例
 スクリプトファイルは、HTML形式で出力－
テキストエディタで編集可能
 スクリプトファイルをエクスポートすることで、さらに細やかなテスト
ケースを作成できるJava, C#, Ruby, Python

 スクリプトファイルは、HTML形式で出力－
テキストエディタで編集可能
 スクリプトファイルをエクスポートすることで、さらに細やかなテスト
ケースを作成できるJava, C#, Ruby, Python
他のエディタ
を使用して作
成可能

 スクリプトファイルは、HTML形式で出力－テキストエディタで編集可
能
 スクリプトファイルをエクスポートすることで、
さらに細やかなテストケースを作成できる
Java, C#, Ruby, Python

 スクリプトファイルは、HTML形式で出力－テキストエディタで編集可
能
 スクリプトファイルをエクスポートすることで、さらに細やかなテストケー
スを作成できるJava, C#, Ruby, Python
 拡張スクリプトファイルを取り込むことができ
る
複数指定できるが、１つはuser-extensions.jsであ
ること
メニューから［オプション］→ ［設定］でOptionダイアログ

5.テストの自動化を行うにあたって- ①
テスト自動化を導入できないのは？
主に次の２点が考えられる
 SeleniumIDEでFireFoxのテストケースを作成するこ
とは容易であることはわかるが、実際は他ブラウザ
での動作確認を必要とするのでプログラミングを行
う必要がある。しかし、Seleniumコマンドと
SeleniumAPIそしてWebDriverの扱い方を習得する時
間を取ることができない
 全てを自動化できるものとして導入してしまうと
Seleniumにとって不得手な対応に工数がかかってし
まう

5.テストの自動化を行うにあたって- ①
テスト自動化を導入できないのは？
主に次の２点が考えられる
 SeleniumIDEでFireFox例えば
のテストケースを作成するこ
とは容易であること要素はのわ位置かがる深すがぎる
、実際は他ブラウザ
マウスカーソルが手マークに変化
での動作確認を必す要る
とするのでプログラミングを行
スクロールバーを表示する
う必要がある。しなかどし動的、に変Selenium化するのは苦コ手
マンドと
SeleniumAPIそしてWebDriverの扱い方を習得する時
間を取ることができない
 全てを自動化できるものとして導入してしまうと
Seleniumにとって不得手な対応に工数がかかってし
まう

5.テストの自動化を行うにあたって- ②
テストを自動化した場合のメリットを考えるとSeleniumを使用
したい
A) 手入力要素の多いWebアプリケーションでは入力できる文
字種と文字数など入力条件を設定できる為、手入力確認に
よるテスト漏れ・テストの不十分さをカバーする
B) Webアプリケーションの条件設定によるテストのように複
数の要素をマトリックス的に組み合わせたテストケースの
作成が容易である
C) 表示内容の確認が容易である
D) テストの状況、結果とそのスクリーンショットを記録とし
て残すことができる
E) テスターに依存しない為、何度でも同じテストを同じ条件
で行う事ができる
F) Webアプリケーションの変更による影響の有無を確認でき
る
G) ブウラウザ間の差違を発見しやすくなる

5.テストの自動化を行うにあたって- ③
 開発に取り入れた場合の例
各種ブラウザ
Seleniumで確認
開発
結合
! NG !
Seleniumで確認
（結合テスト）
Seleniumで確認
（単体テスト）
! NG !

ありがとうございました
テスト対象アプリケーション： xgate4 （Webメールソフト）
※メール誤送信対策機能搭載
製造元：株式会社オレンジソフト:
http://www.orangesoft.co.jp/products/xgate/xgate4/
（株）シーケンスURL : http://www.e-sqc.co.jp/
Selenium メモ(blog) : http://selenium-memo.blogspot.jp/
実体験(blog) : http://selenium-memo2.blogspot.jp/

Selenium IDE for primer

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Selenium IDE for primer (20)

Selenium IDE for primer