![Copyright©2019 NTT Corp. All Rights Reserved. 5
Visual Regression Testing ツール
ピクセル単位で画像を⽐較して差異を検出する⼿法
– DiffImg [1]，Blinkdiff [2]
正しく表⽰された画⾯
（旧バージョン）
テスト対象の画⾯
（新バージョン）
差異検出結果
[1] https://ja.osdn.net/projects/sfnet_diffimg/
[2] https://github.com/yahoo/blink-diff](https://image.slidesharecdn.com/ultdiff-190703085408/85/Visual-Regression-Testing-5-320.jpg)
![Copyright©2019 NTT Corp. All Rights Reserved. 6
提案⼿法
部品単位で画像を⽐較して差異を検出する⼿法
– ツール１の問題点を改良した技術
– ボタンや⼊⼒フォームなどの画⾯の構成部品を矩形として抽出し，
類似度の⾼い矩形同⼠を対応づけるのが特徴
変更
移動
消失
構成部品
（矩形）
（ULTDiff [3]）
[3] 丹野 治⾨:画像処理を活⽤したUIレイアウト崩れ検出⽀援⼿法の提案，情報処理学会，
研究報告ソフトウェア⼯学，vol. 2016-SE-194，no.9，pp.1-8，2016年11⽉．](https://image.slidesharecdn.com/ultdiff-190703085408/85/Visual-Regression-Testing-6-320.jpg)
![Copyright©2019 NTT Corp. All Rights Reserved. 7
様々な環境でアプリ画⾯の間違い探しを簡単に
UIレイアウトテスト技術ULTDiff
ソフトウェア
開発
設計して 製造して
実施者様々な環境
[誤り箇所の詳細]
①
②
③
④
① 消失
② 変更
③ 消失
④ 変更
[誤り箇所の詳細]
①
②
③
④
① 消失
② 変更
③ 消失
④ 変更
誤り箇所の詳細
① 変更
② 消失
テスト実⾏結果
スクリーン
ショット
②
①
テストする
⼿作業で⼤量の
テスト結果報告を作成
⽬視で⼤量の
テスト結果を確認
本技術により⽀援！
様々な環境ごとのアプリ画⾯における間違い(画⾯要素の位置ズ
レ、消失等)を⾃動検出し、テスト結果確認、報告を楽にします](https://image.slidesharecdn.com/ultdiff-190703085408/85/Visual-Regression-Testing-7-320.jpg)
Visual Regression Testing における画面要素単位での差異検出手法
- 1. Copyright©2019 NTT Corp. All Rights Reserved. Visual Regression Testing における 画⾯要素単位での差異検出⼿法 『ULTDiff』 ⽇本電信電話株式会社 ソフトウェアイノベーションセンタ 安達 悠，丹野 治⾨，吉村 優
- 2. Copyright©2019 NTT Corp. All Rights Reserved. 2 アプリケーションのテストでは，画⾯の構成部品がレイ アウト崩れなく正しく表⽰されていることを確認する必 要がある 新規開発だけでなく，改造や移⾏のタイミングでも確認 は必要である 画⾯の構成部品がデグレードなく正しく表⽰されている ことを⽬視で確認することは⼤変 はじめに • 機能の追加・修正 • サーバやフレームワークの更改 • OS・ミドルウェアのアップデート
- 3. Copyright©2019 NTT Corp. All Rights Reserved. 3 画⾯×環境の数だけ確認が必要 はじめに 新システム 改造や移⾏ 機能の追加・修正 サーバやフレームワークの更改 OS・ミドルウェアのアップデート 現システム 様々な環境様々な環境 例えば，１００画⾯のアプリ を１００端末で、１画⾯あた り１０分で確認していくと... 約220⼈⽇かかる！ × さらに、誤り箇所を⽬視 で漏れなく検出し、開発 者へテスト結果報告する のは意外に⼤変
- 4. Copyright©2019 NTT Corp. All Rights Reserved. 4 Visual Regression Testing とは？ 新旧バージョンのアプリケーション画⾯のスクリーン ショット画像を⽐較して差異を検出する⼿法 – 旧バージョンを正，新バージョンをテスト対象として，画像 間の差異を⾃動検出 – アプリケーションの実装技術には依存しないため，幅広いシ ーンに適⽤できることが特⻑
- 5. Copyright©2019 NTT Corp. All Rights Reserved. 5 Visual Regression Testing ツール ピクセル単位で画像を⽐較して差異を検出する⼿法 – DiffImg [1]，Blinkdiff [2] 正しく表⽰された画⾯ （旧バージョン） テスト対象の画⾯ （新バージョン） 差異検出結果 [1] https://ja.osdn.net/projects/sfnet_diffimg/ [2] https://github.com/yahoo/blink-diff
- 6. Copyright©2019 NTT Corp. All Rights Reserved. 6 提案⼿法 部品単位で画像を⽐較して差異を検出する⼿法 – ツール１の問題点を改良した技術 – ボタンや⼊⼒フォームなどの画⾯の構成部品を矩形として抽出し， 類似度の⾼い矩形同⼠を対応づけるのが特徴 変更 移動 消失 構成部品 （矩形） （ULTDiff [3]） [3] 丹野 治⾨:画像処理を活⽤したUIレイアウト崩れ検出⽀援⼿法の提案，情報処理学会， 研究報告ソフトウェア⼯学，vol. 2016-SE-194，no.9，pp.1-8，2016年11⽉．
- 7. Copyright©2019 NTT Corp. All Rights Reserved. 7 様々な環境でアプリ画⾯の間違い探しを簡単に UIレイアウトテスト技術ULTDiff ソフトウェア 開発 設計して 製造して 実施者様々な環境 [誤り箇所の詳細] ① ② ③ ④ ① 消失 ② 変更 ③ 消失 ④ 変更 [誤り箇所の詳細] ① ② ③ ④ ① 消失 ② 変更 ③ 消失 ④ 変更 誤り箇所の詳細 ① 変更 ② 消失 テスト実⾏結果 スクリーン ショット ② ① テストする ⼿作業で⼤量の テスト結果報告を作成 ⽬視で⼤量の テスト結果を確認 本技術により⽀援！ 様々な環境ごとのアプリ画⾯における間違い(画⾯要素の位置ズ レ、消失等)を⾃動検出し、テスト結果確認、報告を楽にします
- 8. 8Copyright©2019 NTT Corp. All Rights Reserved. NTT Confidential ULTDiff 利⽤イメージ 正解画⾯ テスト対象画⾯ エンジン部 レイアウト差異検出機能 GUI部 (HTML形式) テスト結果判定機能 ULTDiff 提供範囲 ⼊⼒ 出⼒ HTMLファイルを起動して、ULTDiffによる差異判定結果のチェックを実施コマンドプロンプト等からエンジン部を実⾏