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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie 5分でわかるVISUAL TESTING FOR HTML5

Ähnlich wie 5分でわかるVISUAL TESTING FOR HTML5 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (12)

5分でわかるVISUAL TESTING FOR HTML5