2016/07/23 「まどべんよっかいち」で発表したスライド

1. テスト自動化ツール
Slenium の検討

2. 自己紹介
 yuji38kwmt
WEB システム開発 (Java, JavaScript,
HTML,CSS, SQL)
Qiita(http://qiita.com/yuji38kwmt)
GitHub(https://github.com/yuji38kwmt/madobe
nyokkaichi_20160723)
 最近見たアニメ : 新世界よ
り、 Steins;Gate

3. 目次
 担当している Web システムの概要 ( 省略 )
 テスト自動化の概要
 Selenium の概要
 Selenium IDE の検討 ( 検討中 )
 Selenium WebDriver の検討 ( 未検討 )
 ブラウザゲームの自動化

4. テスト自動化について

5. テスト自動化のメリット
 回帰テストの実行コストが抑えられる
 クロスブラウザテストのコストが抑えら
れる
 手動テストより正確
↓
 リリース期間の短縮
 品質向上

6. テスト自動化のデメリット
 テスト作成コストがかかる
初回サイクルは手動の 3 倍以上？ (
http://aspire.way-nifty.com/majime/selenium.html)
 メンテナンス工数がかかる

7. テスト自動化の誤解
http://blog.trident-qa.com/2014/03/introduce-selenium-automation/
日本 Selenium ユーザコミュニティ 伊藤望
 誤解 1: 自動化すれば、テストのコストが
かからない！
 誤解 2: 全テストを Selenium で自動化す
ればいい
 誤解 3: 記録機能で、誰でも簡単にスクリ
プトが作れる！

8. まずはテスト自動化は検討してみ
よう
 担当しているシステムのテスト自動化は
メリットなさそう
 状況は変わるかも知れない
サポートブラウザが増える
リリース回数の増加
画面数の増加
 とりあえずテスト自動化ツール
[Selenium] を検討してみよう！

9. 目的 : Selenium の検討
 Selenium を知る
何ができて、何ができないか
テスト自動化しやすい箇所
 システム A の一部に Selenium を導入
テスト自動化できる箇所、できない箇所
テスト自動化のコスト

10. Selenium の概要

11. Selenium とは
 Web アプリの画面操作を自動化するツー
ル
ボタンのクリック
キー入力
値取得
キャプチャ画像取得
 ブラウザテストのデファクトスタンダー
ド
 単純作業の自動化にも利用可能

12. Slenium を構成するツール
 Selenium WebDriver(Selenium2)
Java,Ruby,JavaScript などからブラウザを操
作
 Slelenium IDE
Firefox のアドオン
Firefox での操作を記録・再生が可能
内部コマンドは Slenium1 用で古い
(JavaScript で実装されている。 JavaScript で
できないことを Selenium でもできない )

13. Selenim WebDriver の仕組み
http://image.itmedia.co.jp/l/im/ait/articles/1210/05/l_jo_image01.jpg より

14. Selenium WebDriver サンプルコー
ド
 Junit などテストフレームワークと組み合
わせる

15. Selenium IDE
【 SelenimIDE で記録】 【動画視聴】

16. Selenium IDE のサンプルコード
 テストコードは HTML ファイル
 下図はブラウザで開いた状態

17. Selenium IDE で IE テスト
 「 WebDriver-Backed 」という仕組みで、
IE や Chrome でもテスト可能
 必要なソフト
Selenium Standalone Server
対象ブラウザの WebDriver
IE でテストする場合の準備 (IEDriverServer を起動 )
$ java –Dwebdriver.ie.driver=[IEDriverSever のファイルパス ] –jar selenium-server-standalone-
.jar***

18. Selenium IDE のまとめ
 効率的な運用は向いていない
 メンテナンス性が悪い
 プログラミングの知識は不要

19. Selenium WebDriver と Selenium
IDE の比較
WebDriver IDE
メンテナンス性
(HTML かどうか )
○ ×
ブラウザの制御性
( 内部コマンドの違い )
○ △
導入コスト
(HTML かどうか )
△ ○

20. Selenium IDE の検討

21. Selenium IDE を検討
 導入コストの小さい Selenium IDE から検
討する
 検討・調査内容
どこまで操作を記録できるか
テスト自動化のコスト
 可能ならば回帰テスト実施者 ( 非プログラ
マ ) にテストコードを作成してもらいたい

22. テスト結果の検証方法 1
 キャプチャ画像を比較してテスト結果を
検証
値の比較だと、テストの OK/NG の判断が難
しい
 確認対象の操作の前後でキャプチャ画像
を取得
キャプチャ画像を人が確認して、テスト結果
を判定

23. テスト結果の検証方法 2
 JavaScript エラーのチェック
【テスト対象の画面に組み込む JavaScript 】
window.jsErrors = [];
window.onerror = function(error) {
window.jsErrors.push(obj);
}
【テストコード】
<td>assertEval</td>
<td>this.page().getCurrentWindow().jsErrors.length</td>
<td>0</td>

24. 記録できない操作
 jQuery UI Selectable ライブラリなど
Button,input 要素でないと記録できない？
要素をクリック、ドラッグ
で選択できるライブラリ
https://jqueryui.com/selecta
ble/

25. ダウンロードダイアログ
 ダウンロードダイアログを閉じることが
できず、次に進めない
⇒ ブラウザの設定で、ダウンロードダイアロ
グが出ないようにする。

26. 手動テストの 4 ～ 5 倍かかった
1. テスト仕様書の理解
2. 記録すべきデータを探す
3. テスト操作を記録
4. テストコードの修正
キャプチャ画像の取得コード追加
JavaScript エラー判定コード追加
5. テスト自動実施の動作確認
時間はざっく
り計測

27. ブラウザゲームの自動化

28. ブラウザゲームの自動化
 操作を自動化して、ズルしちゃいましょ
う！
WebDriver 、 Fluentlenium (WebDriver の
ラッパーライブラリ ) を使用
 Flash ゲーム
「かんぱにガールズ」で検討 ⇒ 失敗
 HTML ゲーム
「 Cookie Clicker 」で検討

29. Flash ゲームと HTML ゲームの比
較
 Flash ゲーム
HTML 上ひとつのオブジェクトとみなされる
ので、 Selenium での制御が難しい
座標値から要素を取得することもできるので
、制御は可能（ moveToElement メソッド ）
 HTML ゲーム
Slenium での制御が Flash ゲームに比べると
簡単

30. Flash ゲーム「かんぱにガールズ」
で試してみる

31. 「かんぱにガールズ」とは？
剣と魔法の世界を舞台に、女の子達がバトル
するファンタジー RPG
戦闘は基本的に自動
戦うのに必要なパラメータ（パン）は、時間
が経つと回復する
女の子が負けるとイイ感じに服が破れる
 「 15 分ごとに 1 回戦闘する」という操
作を自動化して、簡単にレベル上げし

32. 自動化の処理の流れ
1. ログイン
2. かんぱにガールズ Start
3. 戦闘開始
4. 15 分待った ( パンが回復するまで ) 後、
処理 3 へ戻る。

33. ログインする

34. Flash オブジェクト取得

35. スタートボタンをクリック
左上位置から、
右へ 200,
下へ 200

36. 「かんぱにガールズ」自動化中
止
 Flash の初期ロードが遅い。 1~2 分待つ。
 Selenium を実行する度に 1~ ２分待つ必
要があるので、自動化コードの確認がし
づらい
↓
 かんぱにガールズの自動化は断念

37. HTML5 ゲーム「 Cookie Clicker 」
で試してみる

38. 「 Cookie Clicker 」とは？
 クッキーをひたすらクリックして、クッ
キーを増やすゲーム
 HTML ゲーム
 「クッキーのクリック」を自動化した

39. 自動化の処理の流れ
1. Cookie Clicker を開く
2. セーブファイルをインポート
3. クッキーをひたすらクリック
4. セーブファイルをエクスポート
【動画視聴】

40. Cookie Clicker を開く
「セーブファイルエクスポート」
で説明

41. セーブファイルをインポート
（ Options ボタンをクリック )

42. セーブファイルをインポート
（ Import Save ボタンをクリック )
ID が設定されていないので、
ボタンのテキストで要素を取得する

43. セーブファイルをインポート
（ Save Code を入力 )

44. クッキーをひたすらクリック

45. セーブファイルをエクスポート
(Save To File ボタンをクリック )

46. セーブファイルをエクスポート
( ダウンロード )
 Selenium ではダウンロードダイアログを
制御できない
 ダウンロードダイアログを表示しないよ
う、 Firefox のオプションを設定

47. 課題
 Selenium IDE を詳しく検討する ( 現在検
討中 )
 WebDriver を検討する ( 現在未検討 )
 テストコードの実行方法を検討する
Selenium Grid?
 Cookie Clicker の自動化に、アイテム要素
も組み込む

48. 参考図書 1: Selenium 実践入門
 WebDriver,Selenium
IDE のコマンド
 サイボウズ、 DeNA
の事例
 WebDriver のライブ
ラリ
Getb,Fulentlenium,Ca
pybara

49. 参考図書 2
実践 Selenium WebDriver
 Selenium の仕組みが
詳しい

50. 皆さんに質問
 テスト自動化やっていますか？
 Selenium 使っている方いますか？

51. ご清聴ありがとうございました