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