社内で話した内容です。テストもっと楽したいな〜＾＾

1. 賢くツールを使って
脱・人海戦術駆動テスト
!
!
∼リグレッションテスト編∼
株式会社クレスコ 技術研究所
小川 充（@mitsuruog）
http://www.flickr.com/photos/centerforbookarts/338532899/
1

2. 自己紹介
小川充（おがわみつる）
!
株式会社クレスコ 技術研究所
フロントエンジニア
!
進化し続けるフロントエンド技術と
!
システム開発の現場をいかに融合させるか！
!
業務システムエンジニア目線で活動しています。
!
!
・HTML5jエンタープライズ部 運営メンバー
・OSSドキュメント翻訳コミュニティ enja-ossメンバー
・Github：https://github.com/mitsuruog
・Twitter：https://twitter.com/mitsuruog
2

3. はじめに
Webシステムにおいて、リグレッションテスト自動化について以前よ
り議論されてきました。
これまではテスト実施手順の自動化・HTMLの文書構造レベルでの検
証について自動化するケースがほとんどでした。
今日、お話するのは手順からブラウザ上に描画される画像そのもの
の検証まで自動化する話。
3

4. アジェンダ
1. 人海戦術駆動テストとは
2. テスト自動化のためのマインドセット
3. 賢いツールのご紹介
3.1.Wraith
3.2.PhantomCSS
4. まとめ
4

5. 1.人海戦術駆動テストとは
http://flic.kr/p/57t1p5
5

6. 人海戦術駆動テスト
「人月の神話」時代から行われている、伝統的はテスト手法。
テストケースを人の手で一つ一つ丁寧かつ優しく消化していく。
様々なシステム開発の現場にて最も採用事例が多い。
導入の手軽であり、現場での人気が根強い。
6

7. 人海戦術駆動テスト
伝統的な人海戦術駆動テストの手法
7

8. 人海戦術駆動テスト
伝統的な人海戦術駆動テストの手法
画面を操作
(Action)
8

9. 人海戦術駆動テスト
伝統的な人海戦術駆動テストの手法
画面を操作
画面キャプチャ
(Action)
（Capture）
9

10. 人海戦術駆動テスト
伝統的な人海戦術駆動テストの手法
画面を操作
画面キャプチャ
(Action)
（Capture）
Excelに貼付け
（Paste）
10

11. 人海戦術駆動テスト
伝統的な人海戦術駆動テストの手法
画面を操作
画面キャプチャ
(Action)
（Capture）
目視で確認
Excelに貼付け
（Decision）
（Paste）
11

12. 人海戦術駆動テスト
伝統的な人海戦術駆動テストの手法
画面を操作
画面キャプチャ
(Action)
（Capture）
目視で確認
Excelに貼付け
（Decision）
（Paste）
PDCAサイクル！？
12

13. 人海戦術駆動テスト
伝統的な人海戦術駆動テストの手法
画面を操作
画面キャプチャ
(Action)
（Capture）
目視で確認
Excelに貼付け
（Decision）
（Paste）
そんな訳ないでしょ…
13

14. 人海戦術駆動テスト
伝統的な人海戦術駆動テストには危険が一杯！！
画面を操作
画面キャプチャ
(Action)
（Capture）
目視で確認
Excelに貼付け
（Decision）
（Paste）
14

15. 人海戦術駆動テスト
伝統的な人海戦術駆動テストには危険が一杯！！
キャプチャ取得忘れ
画面操作ミス
画面を操作
画面キャプチャ
(Action)
（Capture）
画像の上書き
やり直せない
目視で確認
Excelに貼付け
（Decision）
（Paste）
確認ミス
貼付け画像間違い
15

16. 人海戦術駆動テストの問題点
速度・正確性が個人の能力に依存する。
テストプロセスが個人に依存する。
繰り返しに弱い。
16

17. 人海戦術駆動テストの問題点
人にやらせない。
速度・正確性が個人の能力に依存する。
テストプロセスが個人に依存する。
繰り返しに弱い。
17

18. 人海戦術駆動テストの問題点
人にやらせない。
速度・正確性が個人の能力に依存する。
テストプロセスが個人に依存する。
繰り返しに弱い。
スクリプト化しましょう
Excelの手順書なんて
読んでくれません
18

19. 人海戦術駆動テストの問題点
人にやらせない。
速度・正確性が個人の能力に依存する。
テストプロセスが個人に依存する。
繰り返しに弱い。
スクリプト化しましょう
Excelの手順書なんて
読んでくれません
だから、スクリプト化したら
何度もできるって！！
19

20. 人は間違いを犯す
生き物です
人が苦手な部分を頑張ってやる必要はありません
http://flic.kr/p/5BAYMk

21. 2.テスト自動化のための
マインドセット
21

22. テスト自動化のためのマインドセット
再実行可能
検証可能
メンテナンス可能
22

23. 再実行可能
何度でも実行できること。何度やっても結果が変わらないこと。
!
手続きとデータを組み合わせれば、常に同じ結果となるようにする
ことが大事。
!
手続き（ex. 人の画面操作）
URL（REST）
スクリプト（Selenium、Casperjs）
データ（ex. 実際に表示される画面）
ダミーレスポンス（HTML、JSON）
データベース上のダミーデータ
23

24. 検証可能
テスト実行結果を残せること、前回との違いを検出できること。
!
Image DIFF
２つの画像を解析し、機械的に差異を抽出する技術。
どこが違うか考えてみてください
24

25. 検証可能
画面の細かな違いは、人の目では判別できない。
ここ？
25

26. 検証可能
画面の細かな違いは、人の目では判別できない。
イメージDIFF
細かな違いが！！
での結果
26

27. メンテナンス可能
テストは組み合わせ爆発しやすい。
テスト自動化が重荷となっているケースは確かに存在する。
!
テスト自動化のアンチパターンを意識して計画すること。
様々な種類のテストを同時におこなってないか？
テスト実行に時間が掛かり過ぎてないか？
テストは簡単に実行することができるか？
大事なことなのでもう一回言おう。
テストは組み合わせ爆発しやすい。
27

28. 組み合わせ爆発しない
いかにテストの組み合わせ爆発を避けるか…
!
様々なテストを一緒に行うと、ケースの粒度が細かくなる。
まず適切にレイアー、モジュール分割し小さい単位でユニットテスト。
業務のクリティカルパスを意識してテストする。
カバレッジ100%に本当に価値があるのか？
まとめてやらない！！
ユニット間結合
ユニットテスト
ユニットテスト
28

29. 3.賢いツールのご紹介
29

30. Wraith
https://github.com/BBC-News/wraith
30

31. Wraith
BBCNewsが公開しているOSS
使用技術
Ruby
ImageMagic
phantomJS
31

32. Wraith
特徴
様々な画面サイズのキャプチャが取得可能
画像の差分をDIFFイメージとして出力
テストケースの手続き方法がURL
とにかく手軽、でも遅い
32

33. Wraith
用途
異なるドメイン間での比較。
（テスト環境とステージング環境など）
手続き方法がURLであるため、REST型か静的サイトがいい。
画面全体をキャプチャするため、広告など動きのあるサイトには
向かない。
33

34. PhantomCSS
https://github.com/Huddle/PhantomCSS
34

35. PhantomCSS
CSSリグレッションテストのためのOSS
使用技術
CasperJS
phantomJS
Resemble.js
35

36. PhantomCSS
特徴
画面サイズは1つ固定。
画像の差分をDIFFイメージとして出力。
画面の部分単位でスクリーンショットが取得、除外が可能。
テストケースの手続き方法がプログラム的（CasperJS形式）。
そこそこ速い。
画面の一部分を指定して
スクリーンショットが取得可能
（同じ方法で除外指定が可能）
36

37. PhantomCSS
用途
同じドメインでの比較。（前日との違いなど）
手続き方法がプログラムであるため、REST型から画面遷移型まで
幅広く対応可能。
あらゆるテストフェーズにて利用できる（そう）。
DIFF画像はフォルダを指定して
分離・出力可能
37

38. 4.まとめ
38

39. まとめ
!
!
テスト自動化Toolの進化はかなり進んでいる。
!
Toolを利用するためには、事前に入念な計画と準備（設計）が必要。
!
今後は、作ってから適用するアプローチから、適用することを念頭
に設計するアプローチへの変革が大事。
!
Toolの進化スピードは早いので、その時々で複数の選択肢から検討す
る必要がある。
39

40. ご静聴ありがとうございました
小川 充(@mitusurog)
40