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-UP Appium

⚖Apache-2.0


reg-suit

21

画像比較、画像管理に特化したシンプルなツールスクリーンショット取得は他ツールと組み合わせ前提 UIコンポーネント単体でのvisual testing(karma-nightmare)

GitHub連携プラグイン機構

https://reg-viz.github.io/reg-suit/

📷 👓 👀 GitHub Pixel 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 UI Pixel 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

Technology