5分でわかるVISUAL TESTING FOR HTML5

Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
5分でわかる
1
VISUAL TESTING
FOR HTML5
技術本部システム研究開発センター
イノベーティブアプリケーション研究部
石川真也
WHAT, WHY & HOW？

Who
2
石川真也（@meganetaaan）
UI技術の研究をしています
音声/ 画像入力を含むUI全般に
興味があります
HTML5企業Webシステムのための
開発プラットフォーム
Visual Testing Automation
★★★☆☆☆

WHAT VISUAL TESTING?
3
WHY
HOW

VISUAL TESTINGとは何か
見た目のテスト

VISUAL TESTINGとは何か（ここでは）
Webアプリケーションの見た目の
リグレッションテストの自動化
正解画像実際の画像

正解画像実際の画像
VISUAL TESTINGとは何か（ここでは）
WHY？
HOW？
Webアプリケーションの見た目の
リグレッションテストの自動化

WHY VISUAL TESTING?
7
WHAT
HOW

なぜVISUAL TESTINGが必要か
画面を見てみないとわからない

画面を見てみないとわからない
 リッチ化になったHTML5ならではの…
 スタイル崩れ（CSSのバグ）
 SVG/Canvas/WebGL…の描画結果

どうせ見ないとわからないなら
10
 少しでも自動化できれば負担減！！
画像を比較する👓（自動）
差分を見る👀
画像を撮る📷（自動）
結果を見る👀（手動）
画像を撮る📷（自動）

Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 11
https://www.htmlhifive.com/conts/web/view/pitalium-sample/three-dimensions
サンプルコード公開中
WebGL（three.js）の画面のテストをやってみた
Canvasも、WebGLも、PDFも。Point!

HOW VISUAL TESTING?
12
WHAT
WHY

どのようにVISUAL TESTINGを行うか
13
画像を撮る📷
画像を比較👓
差分を見る👀
OK NG
一致している？
差分を許容
できる？Yes
No
Yes
No

画像を撮る📷
14
Selenium特有のハマりどころに注意
参考：私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て
（https://www.slideshare.net/shimodanssol/selenium-54768429）
Point!
 Selenium
 ブラウザ自動化ツールのデファクトスタンダード
– W3C標準のプロトコル
– 豊富な言語バインディング・周辺ツール
– マルチブラウザ対応
 スクリーンショットも取得できる

画像を比較する👓
15
 比較の仕方は様々
 Pixel Perfect ：1ピクセル毎の厳密な比較
 Fuzzy ：2画像の類似度を用いた曖昧な比較
 Full Page ：ページ全体
 Partial Match ：ページの一部のみ比較
 Partial Exclude ：ページの一部を除外して比較
Point!
1pxのズレを許容できるか？
“画面の見た目のテストで難しいのは，この比較がファジー（曖昧）
でよいところはファジーな状態で通して，正確であるべきところは
正確であるかを見なければならない，というところですね。”
コミッターが語るSeleniumのいま，そして未来 ―「Selenium Committer Day 2017」レポート
（https://gihyo.jp/news/report/2017/07/2601）

差分を見る👀
16
 結果の管理の仕方は様々
 レポートを生成
 専用のWebUI
 差分の見せ方は様々
 Marker
 2-up
 Quick Flip
 Swipe
 Onion Skin
 Edge Overlap
Point!
手動のステップは排除しきれない
• 用法・容量を守る
• いかに快適にするかがUX的勘所
• 「誰が見ても崩れている」を自動推定してくれないかなあ

WHAT ✓
WHY ✓
HOW ✓
→LET’S TRY！

VISUAL TESTINGのためのツールを
（残り時間の限り）紹介
18
Applitools Eyes
SI Toolkit for Web Testing
reg-suit


Applitools Eyes
19
 Visual Testing Automation Service
 群を抜いて多機能
 フリープランあり。まず試すならこれかも
https://applitools.com/
📷 👓 👀
Selenium
Java
Ruby
Python
PHP
C#
JavaScript
Appium
SEBuilder
Pixel Perfect
Fuzzy
Full Page
Partial
Match
Exclude
Web UI
Diff View
Marker
2-UP

SI Toolkit for Web Testing
20
 「現場の"いいね"が詰まった自動テストツールです。」
 プログラミング不要で簡単に使える
 ブラウザ操作を記録してテスト作成
 Microsoft Excelでテストを書ける！！！
https://sitoolkit.org/sit-wt.html
📷 👓 👀
Microsoft Excel
Selenium IDE
Pixel Perfect
Full Page
Partial
Exclude
HTML report
Diff View
Marker
2-UPAppium
⚖Apache-2.0

reg-suit
21
 画像比較、画像管理に特化したシンプルなツール
 スクリーンショット取得は他ツールと組み合わせ前提
 UIコンポーネント単体でのvisual testing(karma-nightmare)
 GitHub連携
 プラグイン機構
https://reg-viz.github.io/reg-suit/
📷 👓 👀
GitHubPixel Perfect
Fuzzy Diff View
2-UP
Swipe
Onion Skin
⚖MIT

Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 22
 本気のマルチデバイス対応
 Full Page Screenshotを全デバイスで撮るための涙ぐましい努力（主観）
– Seleniumで撮ったスクリーンショットがブラウザごとにばらばら問題
（https://qiita.com/meganetaaan/items/b11338d2867c8c8f072a）
 画像比較機能が充実
 差分の原因を推定（フォントの違い？位置のずれ？要素の出現・消失？）
https://www.htmlhifive.com/conts/web/view/pitalium/
📷 👓 👀
Selenium
Java
Appium
Web UIPixel Perfect
Fuzzy
Full Page
Partial
Match
Exclude
Diff View
Marker
2-UP
Quick Flip
Slider
Onion Skin
⚖Apache-2.0

まとめ
23
 VISUAL TESTING やっていきましょう！
 Pitalium ぜひお試しください！

商標について
24
 NS Solutions、NS（ロゴ）は、新日鉄住金ソリューションズ
株式会社の登録商標です。
 hifive、hifive(ロゴ)、Pitalium、Pitalium(ロゴ)は、新日鉄住金
ソリューションズ株式会社の登録商標です。
 Microsoft Excelは､米国 Microsoft Corporation の米国および
その他の国における登録商標です。
 HTML5 Logo by W3C.
 その他本文記載の会社名及び製品名は、それぞれ各社の商標又は
登録商標です。

5分でわかるVISUAL TESTING FOR HTML5

Recommended

More Related Content

What's hot (20)

Similar to 5分でわかるVISUAL TESTING FOR HTML5 (20)

5分でわかるVISUAL TESTING FOR HTML5