株式会社シーケンス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-2.複数条件のテスト複数の要素を組み合わせたテストケースの作成が容易

例．検索を行う

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

例．検索を行う

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

例．検索を行う

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

例．検索を行う

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

例．検索を行う

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

例．検索を行う

2-3.表示内容のテストページに表示されるべき内容の確認が容易である

例．メニュー項目の確認

2-4.テストの記録エビデンスを作成しやすい

テスト内容や結果についてコメントを入力可能

テストの入力内容や画面遷移を記録可能

テストの結果をログファイルに出力可能

記録に残すことで、Webアプリケーション更新の影響を確認可能

2-4.テストの記録エビデンスを作成しやすい

テスト内容や結果についてコメントを入力可能

テストの入力内容や画面遷移を記録可能

テストの結果をログファイルに出力可能

記録に残すことで、Webアプリケーション更新の影響を確認可能

2-4.テストの記録エビデンスを作成しやすい

テスト内容や結果についてコメントを入力可能

テストの入力内容や画面遷移を記録可能

テストの結果をログファイルに出力可能

記録に残すことで、Webアプリケーション更新の影響を確認可能

2-4.テストの記録エビデンスを作成しやすい

テスト内容や結果についてコメントを入力可能

テストの入力内容や画面遷移を記録可能

テストの結果をログファイルに出力可能

記録に残すことで、Webアプリケーション更新の影響を確認可能

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いろいろあるけど・・・

SeleniumGrid

Selenium3モバイル強化

Selenium RC(Selenium1)

Selenium 2

WebDriver

Selenium IDE

SeleniumBuilder

Visual型ツール

モバイル向けios-driver

SelendroidAppium

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

3-1.Selenium RC (Remote Control) -②コマンドライン

>java -jar selenium-server-standalone-2.41.0.jar

-htmlSuite *googlechrome

http://xgate4.orangesoft.co.jp/xgate48/grp/test/b

E:\JobOrangeSoft\tsTest.html e:\loglog.html

Selenium Server

WebブラウザはChrome

WebアプリケーションURL

テストスイーツのパス テスト結果を出力するファイル

3-1.Selenium RC (Remote Control) -②コマンドライン

>java -jar selenium-server-standalone-2.41.0.jar

-htmlSuite *googlechrome

http://xgate4.orangesoft.co.jp/xgate48/grp/test/b

E:\JobOrangeSoft\tsTest.html e:\loglog.html

Selenium Server

WebブラウザはChrome

WebアプリケーションURL

テストスイーツのパス テスト結果を出力するファイル

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...

主なWebDriverChromeDriver, FirefoxDriver, InternetExplorerDriver, SafariDriver, AndroidDriver, ios-driver

主流 Selenium １ + WebDriver = Selenium ２

Selenium IDE- Seleniumテスト用の統合開発環境- 入力操作の自動記録・再生- スクリプトを手動で記述・編集・デバッグ- テストケースをその場で実行・検証できる- 複数テストケースをテストスイーツとしてまとめてテスト- ブラウザ内のテスト画面を保存可能- テストケースをHTML、Ruby、Python、Java、C#など多様な形式で保存可能 デフォルトは、HTML形式

- JavaScriptをスクリプト内または拡張スクリプトファイルにて使用可能 （拡張スクリプト使用時：user-extensions.js必須、.js追加可能）

- FireFoxアドオン- 多種多様なプラグイン（ログファイル出力、制御構造など）- テスト結果をレポートにまとめやすい

3-3.Visual型ツール -①

Selenium IDE- Seleniumテスト用の統合開発環境- 入力操作の自動記録・再生- スクリプトを手動で記述・編集・デバッグ- テストケースをその場で実行・検証できる- 複数テストケースをテストスイーツとしてまとめてテスト- ブラウザ内のテスト画面を保存可能- テストケースをHTML、Ruby、Python、Java、C#など多様な形式で保存可能 デフォルトは、HTML形式

- JavaScriptをスクリプト内または拡張スクリプトファイルにて使用可能 （拡張スクリプト使用時：user-extensions.js必須、.js追加可能）

- FireFoxアドオン- 多種多様なプラグイン（ログファイル出力、制御構造など）- テスト結果をレポートにまとめやすい

3-3.Visual型ツール -①

3-3.Visual型ツール -②Selenium Builder

- Seleniumテスト用の統合開発環境

- SeleniumIDEとほぼ同じ機能を持つ

- WebDriverのコマンドをスクリプトに記述可能

Seleniumコマンドより細やかなテストケースを作成可能

プログラミング向き

- FireFoxアドオン

3-3.Visual型ツール -②Selenium Builder

- Seleniumテスト用の統合開発環境

- SeleniumIDEとほぼ同じ機能を持つ

- WebDriverのコマンドをスクリプトに記述可能

Seleniumコマンドより細やかなテストケースを作成可能

プログラミング向き

- FireFoxアドオン

3-3.Visual型ツール -②Selenium Builder

- Seleniumテスト用の統合開発環境

- SeleniumIDEとほぼ同じ機能を持つ

- WebDriverのコマンドをスクリプトに記述可能

Seleniumコマンドより細やかなテストケースを作成可能

プログラミング向き

- 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 どちらを使う？

Seleniumプロジェクトとしては、いずれはSeleniumコマンドからWebDriverコマンドへ全面的に移行したいので、Builderを推奨したいようである

しかし、歴史が浅い（２０１３年初め頃）こともあり、まだ実用性は低い

Builderの不便な点として•UIが使いづらい•変数を複数のテストケースで共有できない•データ駆動型のテストができない•対応ブラウザはFireFoxのみ

これらは、テストツールを使う上では問題なので、やはりSeleniumIDEを選択した方が良いでしょう

個人的には、SeleniumIDEは、

とても使いやすいので、WebDriverコマンドを記述でき

るようになって存続してほしいと思います・・・今もIDEは更新しているので期待しています

SeleniumIDEはWebアプリ

ケーションやプログラミングに精通していなくても扱いやすいとも思います

3-4.Selenium Grid 複数のマシンにテストを自動で分散させるツール

Webアプリケーション

WindowsIE

MACSafari

AndroidWindowsFireFox

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を使う -⑤

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ダイアログ表示

4.Selenium IDEを使う -⑨その他いろいろ マルチブラウザでは・・・

Chrome、IEで動作可能但し、編集は実行前のみ、実行後の編集は即時実行はできない － 実例参考：IDEを他のブラウザで動作させる

スクリプトファイルは、HTML形式で出力 －テキストエディタで編集可能

スクリプトファイルをエクスポートすることで、さらに細やかなテストケースを作成できる Java, C#, Ruby, Python

拡張スクリプトファイルを取り込むことができる複数指定できるが、１つはuser-extensions.jsであることメニューから ［オプション］→［設定］でOptionダイアログ表示

4.Selenium IDEを使う -⑨その他いろいろ マルチブラウザでは・・・

Chrome、IEで動作可能但し、編集は実行前のみ、実行後の編集は即時実行はできない － 実例参考：IDEを他のブラウザで動作させる

スクリプトファイルは、HTML形式で出力 －テキストエディタで編集可能

スクリプトファイルをエクスポートすることで、さらに細やかなテストケースを作成できる Java, C#, Ruby, Python

拡張スクリプトファイルを取り込むことができる複数指定できるが、１つはuser-extensions.jsであることメニューから ［オプション］→［設定］でOptionダイアログ表示

他のエディタを使用して作成可能

4.Selenium IDEを使う -⑨その他いろいろ マルチブラウザでは・・・

Chrome、IEで動作可能但し、編集は実行前のみ、実行後の編集は即時実行はできない － 実例参考：IDEを他のブラウザで動作させる

スクリプトファイルは、HTML形式で出力 － テキストエディタで編集可能

スクリプトファイルをエクスポートすることで、さらに細やかなテストケースを作成できるJava, C#, Ruby, Python

拡張スクリプトファイルを取り込むことができる複数指定できるが、１つはuser-extensions.jsであることメニューから ［オプション］→［設定］でOptionダイアログ表示

4.Selenium IDEを使う -⑨その他いろいろ マルチブラウザでは・・・

Chrome、IEで動作可能但し、編集は実行前のみ、実行後の編集は即時実行はできない － 実例参考：IDEを他のブラウザで動作させる

スクリプトファイルは、HTML形式で出力 － テキストエディタで編集可能

スクリプトファイルをエクスポートすることで、さらに細やかなテストケースを作成できるJava, C#, Ruby, Python

拡張スクリプトファイルを取り込むことができる複数指定できるが、１つはuser-extensions.jsであることメニューから ［オプション］→［設定］でOptionダイアログ表示

4.Selenium IDEを使う -⑨その他いろいろ マルチブラウザでは・・・

Chrome、IEで動作可能但し、編集は実行前のみ、実行後の編集は即時実行はできない － 実例参考：IDEを他のブラウザで動作させる

スクリプトファイルは、HTML形式で出力 － テキストエディタで編集可能

スクリプトファイルをエクスポートすることで、さらに細やかなテストケースを作成できる Java, C#, Ruby, Python

拡張スクリプトファイルを取り込むことができる複数指定できるが、１つはuser-extensions.jsであること

メニューから ［オプション］→［設定］でOptionダイアログ

4.Selenium IDEを使う -⑨その他いろいろ マルチブラウザでは・・・

Chrome、IEで動作可能但し、編集は実行前のみ、実行後の編集は即時実行はできない － 実例参考：IDEを他のブラウザで動作させる

スクリプトファイルは、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 !

Q&A

ありがとうございました

テスト対象アプリケーション ： 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/