Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
5分でわかる
1
VISUAL TESTING
FOR HTML5
技術本部 システム研究開発センター
イノベーティブ...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
Who
2
石川 真也(@meganetaaan)
UI技術の研究をしています
音声/ 画像入力を含むUI全般に
興味...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
WHAT VISUAL TESTING?
3
WHY
HOW
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
VISUAL TESTINGとは何か
見た目のテスト
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
VISUAL TESTINGとは何か(ここでは)
Webアプリケーションの見た目の
リグレッションテストの自動化
正...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
正解画像 実際の画像
VISUAL TESTINGとは何か(ここでは)
WHY?
HOW?
Webアプリケーションの...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
WHY VISUAL TESTING?
7
WHAT
HOW
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
なぜVISUAL TESTINGが必要か
画面を見てみないとわからない
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
画面を見てみないとわからない
 リッチ化になったHTML5ならではの…
 スタイル崩れ(CSSのバグ)
 SVG...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
どうせ見ないとわからないなら
10
 少しでも自動化できれば負担減!!
画像を比較する👓(自動)
差分を見る👀
画像...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 11
https://www.htmlhifive.com/conts/web/view/pitalium-sampl...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
HOW VISUAL TESTING?
12
WHAT
WHY
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
どのようにVISUAL TESTINGを行うか
13
画像を撮る📷
画像を比較👓
差分を見る👀
OK NG
一致してい...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
画像を撮る📷
14
Selenium特有のハマりどころに注意
参考:私がSeleniumを使ってスクリーンショットを撮...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
画像を比較する👓
15
 比較の仕方は様々
 Pixel Perfect :1ピクセル毎の厳密な比較
 Fuzz...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
差分を見る👀
16
 結果の管理の仕方は様々
 レポートを生成
 専用のWebUI
 差分の見せ方は様々
 ...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
WHAT ✓
WHY ✓
HOW ✓
→LET’S TRY!
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
VISUAL TESTINGのためのツールを
(残り時間の限り)紹介
18
Applitools Eyes
SI ...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
Applitools Eyes
19
 Visual Testing Automation Service
 群を...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
SI Toolkit for Web Testing
20
 「現場の"いいね"が詰まった自動テストツールです。」
...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
reg-suit
21
 画像比較、画像管理に特化したシンプルなツール
 スクリーンショット取得は他ツールと組み合...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 22
 本気のマルチデバイス対応
 Full Page Screenshotを全デバイスで撮るための涙ぐましい努力...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
まとめ
23
 VISUAL TESTING やっていきましょう!
 Pitalium ぜひお試しください!
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
商標について
24
 NS Solutions、NS(ロゴ)は、新日鉄住金ソリューションズ
株式会社の登録商標です。...
Upcoming SlideShare
Loading in …5
×

5分でわかるVISUAL TESTING FOR HTML5

915 views

Published on

2017/9/24 HTML5 ConferenceのLT資料です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

5分でわかるVISUAL TESTING FOR HTML5

  1. 1. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 5分でわかる 1 VISUAL TESTING FOR HTML5 技術本部 システム研究開発センター イノベーティブアプリケーション研究部 石川 真也 WHAT, WHY & HOW?
  2. 2. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. Who 2 石川 真也(@meganetaaan) UI技術の研究をしています 音声/ 画像入力を含むUI全般に 興味があります HTML5企業Webシステムのための 開発プラットフォーム Visual Testing Automation ★★★☆☆☆
  3. 3. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. WHAT VISUAL TESTING? 3 WHY HOW
  4. 4. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. VISUAL TESTINGとは何か 見た目のテスト
  5. 5. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. VISUAL TESTINGとは何か(ここでは) Webアプリケーションの見た目の リグレッションテストの自動化 正解画像 実際の画像
  6. 6. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 正解画像 実際の画像 VISUAL TESTINGとは何か(ここでは) WHY? HOW? Webアプリケーションの見た目の リグレッションテストの自動化
  7. 7. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. WHY VISUAL TESTING? 7 WHAT HOW
  8. 8. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. なぜVISUAL TESTINGが必要か 画面を見てみないとわからない
  9. 9. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 画面を見てみないとわからない  リッチ化になったHTML5ならではの…  スタイル崩れ(CSSのバグ)  SVG/Canvas/WebGL…の描画結果
  10. 10. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. どうせ見ないとわからないなら 10  少しでも自動化できれば負担減!! 画像を比較する👓(自動) 差分を見る👀 画像を撮る📷(自動) 結果を見る👀(手動) 画像を撮る📷(自動)
  11. 11. 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!
  12. 12. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. HOW VISUAL TESTING? 12 WHAT WHY
  13. 13. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. どのようにVISUAL TESTINGを行うか 13 画像を撮る📷 画像を比較👓 差分を見る👀 OK NG 一致している? 差分を許容 できる?Yes No Yes No
  14. 14. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 画像を撮る📷 14 Selenium特有のハマりどころに注意 参考:私がSeleniumを使ってスクリーンショットを撮るまでに出会った闇の全て (https://www.slideshare.net/shimodanssol/selenium-54768429) Point!  Selenium  ブラウザ自動化ツールのデファクトスタンダード – W3C標準のプロトコル – 豊富な言語バインディング・周辺ツール – マルチブラウザ対応  スクリーンショットも取得できる
  15. 15. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 画像を比較する👓 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. 16. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 差分を見る👀 16  結果の管理の仕方は様々  レポートを生成  専用のWebUI  差分の見せ方は様々  Marker  2-up  Quick Flip  Swipe  Onion Skin  Edge Overlap Point! 手動のステップは排除しきれない • 用法・容量を守る • いかに快適にするかがUX的勘所 • 「誰が見ても崩れている」を自動推定してくれないかなあ
  17. 17. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. WHAT ✓ WHY ✓ HOW ✓ →LET’S TRY!
  18. 18. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. VISUAL TESTINGのためのツールを (残り時間の限り)紹介 18 Applitools Eyes SI Toolkit for Web Testing reg-suit 
  19. 19. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 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
  20. 20. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 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
  21. 21. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 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
  22. 22. 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. 23. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. まとめ 23  VISUAL TESTING やっていきましょう!  Pitalium ぜひお試しください!
  24. 24. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 商標について 24  NS Solutions、NS(ロゴ)は、新日鉄住金ソリューションズ 株式会社の登録商標です。  hifive、hifive(ロゴ)、Pitalium、Pitalium(ロゴ)は、新日鉄住金 ソリューションズ株式会社の登録商標です。  Microsoft Excelは、米国 Microsoft Corporation の米国および その他の国における登録商標です。  HTML5 Logo by W3C.  その他本文記載の会社名及び製品名は、それぞれ各社の商標又は 登録商標です。

×