icst2015 gui testingの紹介 #sigstj
TRANSCRIPT
![Page 1: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/1.jpg)
ICST 2015 GUI Testing の紹介@kyon_mm 2015/07/04 #sigstj
![Page 2: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/2.jpg)
Papers
• Classifying and Qualifying GUI Defects
• Conceptualization and Evaluation of Component-based Testing Unified with Visual GUI Testing: an Empirical Study
• Detection and Localization of HTML Presentation Failures Using Computer Vision-Based Techniques
![Page 3: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/3.jpg)
Classifying and Qualifying GUI Defects の紹介
![Page 4: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/4.jpg)
概要
• GUIのバグを分類して識別するためのGUIフォールトモデル作成
• 実際のバグとGUIフォールトモデルの差分を分析
• 2つのGUIテスティングツールである GUITAR, Jubulaを使ってテスト実行する
• ミューテーションテストをして、GUIフォールトモデルにあるものを見つけられるかどうか
![Page 5: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/5.jpg)
2つのGUIフォールトモデル
• User Interface
• 静的なもの
• User Interaction
• 動的なもの
![Page 6: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/6.jpg)
GUIフォールトモデル(Interface)
カテゴリ フォールト
GUI Structure and
Aesthetics
レイアウトが不正
状態が不正
表示が不正
Data Presentation
レンダリングが不正
データのプロパティが不正
データの型やフォーマットが不正
![Page 7: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/7.jpg)
GUIフォールトモデル(Interaction)カテゴリ フォールト
Interaction Behavior 振る舞いが不正
Action
動作の結果が不正
動作しない
異なる動作になる
Reversibility
Undo/Redoが不正
強制的な中断が不正
中断が不正
Feedback実態と異なる進捗を表現している
いくつかの振る舞いの途中のフィードバックが不正
![Page 8: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/8.jpg)
対象にしたソフトウェア
• Sweet Home3D
• File-roller
• JabRef
• Inkscape
• Firefox Android
![Page 9: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/9.jpg)
ミューテーションのツール
• WIMP
• post-WIMP
• ※豆知識WIMP = Windows, Icons, Menus, Pointerの略
![Page 10: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/10.jpg)
テスト
• ソフトウェアへのバグレポートを見て、フォールトモデルと対応付ける
• その上で、フォールトモデルに対応するようなミューテーションする
• テストを実行して見つけられるか確認する
![Page 11: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/11.jpg)
ミューテーションテスト結果
• 見つかったり、見つからないものもあったり(つまりまちまちだった)
• 原因
• GUIの画面描画 検査したいものを画面から取得できない
• トレンドの変化 標準コンポーネントはあまり使わない
![Page 12: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/12.jpg)
発表者kyon_mmの所感
• 分類自体はいいと思った。見積もりとかライブラリの選定に使いやすい分類だと思う。
• バグレポートを手で頑張って分類しないといけないようになっている方が問題かと思った。なぜ世のバグレポートにタグ付けがないのかとか。
![Page 13: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/13.jpg)
Conceptualization and Evaluation of Component-based Testing Unified with Visual GUI Testing: an Empirical Study の紹介
![Page 14: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/14.jpg)
概要
• ヴィジュアルベースのGUIテストツールを開発して、コンポーネントベースのGUIテストツールと比較した
• ベースにしたのはGUITAR
• コンポーネントベースは堅牢で高速、ヴィジュアルベースは柔軟
![Page 15: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/15.jpg)
2つの試み
• GUIアプリケーションに対してミューテーションテストして比較
• 3つのJava OSSに対して実験して比較
![Page 16: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/16.jpg)
ツールの開発
• GUIテスティングフレームワークであるGUITARをベースにVGT GUITARを開発
Conceptualization and Evaluation of Component-based Testing Unified with Visual GUI Testing: an Empirical Study Fig. 1: Visualization of VGT GUITAR’s architecture. Squares show code components of the tool and rounded squares show artifacts generated by said components.
![Page 17: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/17.jpg)
GUIアプリケーションに対してミューテーションテスト• 18種類のミューテーション
• システムテストと受け入れテストにわけて実行
![Page 18: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/18.jpg)
3つのJava OSSに対して実験
• JEdit
• Buddi
• Rachota
![Page 19: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/19.jpg)
テスト結果
• コンポーネントベースは、システムテストに向いている
• ヴィジュアルベースは受け入れテストに向いている
• VGT
![Page 20: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/20.jpg)
発表者kyon_mmの所感
• 当たり前すぎてつまらなかった
• GUIテストツールを作るときには参考になる可能性が微レ存
![Page 21: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/21.jpg)
Detection and Localization of HTML Presentation Failures Using Computer Vision-Based Techniques の紹介
![Page 22: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/22.jpg)
概要
• Web GUIのテストは大変ですね
• バグの原因になっているHTML要素を特定するようなアプローチ
• 画像解析技術を利用する
![Page 23: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/23.jpg)
3つのINPUTによって判定する
• 対象のWebページ(URL, HTML, CSS, JS, etc)
• 対象のWebページの正しい表示(前バージョン、モックなどのスクリーンショット)
• 動的に変化する部分(テキスト、広告)
![Page 24: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/24.jpg)
ツールのフェーズ
• 対象のWebページにおける差分を検査する
• 差分とHTML要素をひもづける
• 対象でバグっぽいものを開発者に教える
![Page 25: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/25.jpg)
使っているツール
• WebSee
• pdiff
• Apache Commons Math3
• Original Java Library(R-Tree)
• Open CV
![Page 26: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/26.jpg)
テスト
• HTML,CSS,JSなどをダウンロードしてローカルで動作できるようにする
• ある法則に従ってランダムに要素のプロパティを変えるなどしてミューテーションテストする
• ツールと学生で比較してみる
![Page 27: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/27.jpg)
テスト対象• OPAL
• Crawller
• Inno crawll
• Gmail
• USC CS Research
• Craigslist
• Virgin America
• Java Tutorial
![Page 28: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/28.jpg)
テスト結果• 障害発見率100%
• 学生は73%
• 見つけた障害のうち、HTML要素を特定できたのは、93%以上
• 学生は36%
• 実行時間はどれも数分以内
![Page 29: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/29.jpg)
発表者kyon_mmの所感• Chromeの開発者ツールを便利にした感じ
• Web フロントエンドの開発効率があがりそう
• でも、実際に困るのはJSデバッガじゃないかなぁとか。
• リグレッションテストとしてはいいのかも
• Chromeの開発者ツールをforkしたほうが早かったのではー
![Page 30: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/30.jpg)
全体の所感
• GUITAR好きな研究者多いのは、クラシカルなツールだから改造しやすいのかな。
• GUIに関してはスポンサーの期待をマネジメントしにくいので、どんどんツールができればいいと思う。
• Web系のは見ればみるほど、W3Cがんばれよって感じ。
![Page 31: ICST2015 GUI Testingの紹介 #SIGSTJ](https://reader030.vdocuments.net/reader030/viewer/2022020123/55c3b366bb61eb8b3f8b4776/html5/thumbnails/31.jpg)
ご清聴ありがとうございました