Embed Size (px)
DESCRIPTION
社内で話した内容です。テストもっと楽したいな〜＾＾
Citation preview
�1http://www.flickr.com/photos/centerforbookarts/338532899/
株式会社クレスコ 技術研究所 小川 充（@mitsuruog）
!
!
～リグレッションテスト編～
賢くツールを使って 脱・人海戦術駆動テスト
自己紹介小川充（おがわみつる） !株式会社クレスコ 技術研究所 フロントエンジニア !!!!!・HTML5jエンタープライズ部 運営メンバー
・OSSドキュメント翻訳コミュニティ enja-ossメンバー
・Github：https://github.com/mitsuruog
・Twitter：https://twitter.com/mitsuruog
進化し続けるフロントエンド技術と システム開発の現場をいかに融合させるか！ 業務システムエンジニア目線で活動しています。
�2
はじめにWebシステムにおいて、リグレッションテスト自動化について以前よ
り議論されてきました。
これまではテスト実施手順の自動化・HTMLの文書構造レベルでの検
証について自動化するケースがほとんどでした。
今日、お話するのは手順からブラウザ上に描画される画像そのもの
の検証まで自動化する話。
�3
アジェンダ1. 人海戦術駆動テストとは
2. テスト自動化のためのマインドセット
3. 賢いツールのご紹介
3.1.Wraith
3.2.PhantomCSS
4. まとめ
�4
人海戦術駆動テスト「人月の神話」時代から行われている、伝統的はテスト手法。
テストケースを人の手で一つ一つ丁寧かつ優しく消化していく。
様々なシステム開発の現場にて最も採用事例が多い。
導入の手軽であり、現場での人気が根強い。
�6
人海戦術駆動テスト伝統的な人海戦術駆動テストの手法
�7
人海戦術駆動テスト伝統的な人海戦術駆動テストの手法
�8
画面を操作 (Action)
人海戦術駆動テスト伝統的な人海戦術駆動テストの手法
�9
画面を操作 (Action)
画面キャプチャ （Capture）
人海戦術駆動テスト伝統的な人海戦術駆動テストの手法
�10
画面を操作 (Action)
Excelに貼付け
（Paste）
画面キャプチャ （Capture）
人海戦術駆動テスト伝統的な人海戦術駆動テストの手法
�11
画面を操作 (Action)
Excelに貼付け
（Paste）目視で確認 （Decision）
画面キャプチャ （Capture）
人海戦術駆動テスト伝統的な人海戦術駆動テストの手法
�12
画面を操作 (Action)
Excelに貼付け
（Paste）目視で確認 （Decision）
画面キャプチャ （Capture）
PDCAサイクル！？
人海戦術駆動テスト伝統的な人海戦術駆動テストの手法
�13
画面を操作 (Action)
Excelに貼付け
（Paste）目視で確認 （Decision）
画面キャプチャ （Capture）
そんな訳ないでしょ…
人海戦術駆動テスト伝統的な人海戦術駆動テストには危険が一杯！！
�14
画面を操作 (Action)
画面キャプチャ （Capture）
Excelに貼付け
（Paste）目視で確認 （Decision）
人海戦術駆動テスト伝統的な人海戦術駆動テストには危険が一杯！！
�15
画面を操作 (Action)
画面キャプチャ （Capture）
Excelに貼付け
（Paste）目視で確認 （Decision）
画面操作ミス キャプチャ取得忘れ
画像の上書き
貼付け画像間違い確認ミス
やり直せない
人海戦術駆動テストの問題点
�16
速度・正確性が個人の能力に依存する。
テストプロセスが個人に依存する。
繰り返しに弱い。
人海戦術駆動テストの問題点
�17
速度・正確性が個人の能力に依存する。
テストプロセスが個人に依存する。
繰り返しに弱い。
人にやらせない。
人海戦術駆動テストの問題点
�18
速度・正確性が個人の能力に依存する。
テストプロセスが個人に依存する。
繰り返しに弱い。
人にやらせない。
スクリプト化しましょう Excelの手順書なんて 読んでくれません
人海戦術駆動テストの問題点
�19
速度・正確性が個人の能力に依存する。
テストプロセスが個人に依存する。
繰り返しに弱い。
人にやらせない。
スクリプト化しましょう Excelの手順書なんて 読んでくれません
だから、スクリプト化したら 何度もできるって！！
�21
2.テスト自動化のための マインドセット
テスト自動化のためのマインドセット
�22
再実行可能 検証可能 メンテナンス可能
再実行可能何度でも実行できること。何度やっても結果が変わらないこと。 !手続きとデータを組み合わせれば、常に同じ結果となるようにすることが大事。 !手続き（ex. 人の画面操作）
URL（REST）
スクリプト（Selenium、Casperjs）
データ（ex. 実際に表示される画面）
ダミーレスポンス（HTML、JSON） データベース上のダミーデータ
�23
検証可能テスト実行結果を残せること、前回との違いを検出できること。 !Image DIFF ２つの画像を解析し、機械的に差異を抽出する技術。
どこが違うか考えてみてください
�24
検証可能画面の細かな違いは、人の目では判別できない。
�25
ここ？
検証可能画面の細かな違いは、人の目では判別できない。
細かな違いが！！イメージDIFFでの結果
�26
メンテナンス可能テストは組み合わせ爆発しやすい。
テスト自動化が重荷となっているケースは確かに存在する。
!
テスト自動化のアンチパターンを意識して計画すること。
様々な種類のテストを同時におこなってないか？
テスト実行に時間が掛かり過ぎてないか？
テストは簡単に実行することができるか？
�27
大事なことなのでもう一回言おう。
テストは組み合わせ爆発しやすい。﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅
組み合わせ爆発しないいかにテストの組み合わせ爆発を避けるか…
!様々なテストを一緒に行うと、ケースの粒度が細かくなる。 まず適切にレイアー、モジュール分割し小さい単位でユニットテスト。
業務のクリティカルパスを意識してテストする。 カバレッジ100%に本当に価値があるのか？
�28
ユニットテスト ユニットテスト
ユニット間結合まとめてやらない！！
�29
3.賢いツールのご紹介
WraithBBCNewsが公開しているOSS 使用技術
Ruby ImageMagic phantomJS
�31
Wraith特徴 様々な画面サイズのキャプチャが取得可能 画像の差分をDIFFイメージとして出力
テストケースの手続き方法がURL とにかく手軽、でも遅い
�32
Wraith用途 異なるドメイン間での比較。 （テスト環境とステージング環境など） 手続き方法がURLであるため、REST型か静的サイトがいい。 画面全体をキャプチャするため、広告など動きのあるサイトには向かない。
�33
PhantomCSSCSSリグレッションテストのためのOSS 使用技術
CasperJS phantomJS Resemble.js
�35
PhantomCSS特徴 画面サイズは1つ固定。
画像の差分をDIFFイメージとして出力。 画面の部分単位でスクリーンショットが取得、除外が可能。 テストケースの手続き方法がプログラム的（CasperJS形式）。 そこそこ速い。
画面の一部分を指定して スクリーンショットが取得可能 （同じ方法で除外指定が可能）
�36
PhantomCSS用途 同じドメインでの比較。（前日との違いなど） 手続き方法がプログラムであるため、REST型から画面遷移型まで幅広く対応可能。 あらゆるテストフェーズにて利用できる（そう）。
DIFF画像はフォルダを指定して分離・出力可能
�37
�38
4.まとめ
まとめ!!テスト自動化Toolの進化はかなり進んでいる。
!Toolを利用するためには、事前に入念な計画と準備（設計）が必要。
!今後は、作ってから適用するアプローチから、適用することを念頭に設計するアプローチへの変革が大事。 !Toolの進化スピードは早いので、その時々で複数の選択肢から検討する必要がある。
�39
ご静聴ありがとうございました
小川 充(@mitusurog)
�40
