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. 1
新機能
Pitalium is a tool
技術本部 システム研究開発センター
イノベーティブアプリケーション研...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
自己紹介
2
 石川 真也(@meganetaaan)
 新日鉄住金ソリューションズ
 システム研究開発センター...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
とは?
 次世代Web標準(HTML5/JavaScript/CSS)を活用した
企業Webシステム開発のためのプラ...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 4
のテスト自動化ツール
を開発しています
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
Pitaliumの目的
5
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
Pitaliumの目的:回帰テストの省力化
 自動化を阻む様々な課題を解決して
 「複数ブラウザ/デバイス」を対象...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
「見た目」もテストしたい
7
 図形やグラフの描画内容が正しいことを確認したいから
 意図しないレイアウト崩れが起...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
複数ブラウザ/デバイスでテストしたい
8
 PCとスマートフォンで
異なるデザインにする場合があるから
(レスポンシ...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
しかし、目視確認はつらい
9
 時間がかかる
 違いを見落とす恐れがある
OK… NG...
→自動化したい
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
自動化を阻む課題
10
スクリプト作成・
保守コスト大
ブラウザ個別の
スクリプトが必要
見た目の
確認は目視
dri...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
マルチデバイス/ブラウザ対応
Webアプリテスト自動化ツール
Pitalium
11
https://github.c...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
記述を簡略化
Pitaliumによる解決策
スクリプト作成・
保守コスト大
ブラウザ個別の
スクリプトが必要
見た目の...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
Pitaliumの基本機能
13
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
Pitaliumの機能
①ワンソースで
マルチデバイス/
ブラウザのテスト
②スクリーンショット
比較で
合否判定
1...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
スクリーンショット比較で合否判定
正
解
定
義 スクリーンショット
確認
スクリプト
実行
正解
正解として
保存
...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
「スクショでテスト」のメリット
16
目視で確認
↓
意図した変化なら正解を更新
 (目視確認による)見た目のテスト...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
Pitalium v1.2.0の新機能
17
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
v1.2.0 Released!!
https://www.htmlhifive.com/conts/web/view...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
v1.2.0新機能
19
類似度ベースの画像比較
差分が出た「原因」を自動分類
 特定の原因のみ無視できる
ス...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
類似度ベースの画像比較
20
 「厳密すぎない比較がしたい」
 2つの画像の類似度を計算し、閾値を上回っていれば正...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
差分が出た「原因」を自動分類
21
 差分をその原因によって分類する
 SHIFT(領域が移動している)
 SC...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 22
DEMO
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
SKIPモード
23
 「テストは回したいけどスクショは取りたくない」
 デバッグ用に特定のテストを実行する場合な...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
実行対象のブラウザ絞り込み
24
 「このテストはスマホでだけ実行したい」
詳しくは
https://www.htm...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
任意の領域を部分除外
25
 「idやclassが付いていない要素に
(ソース側には手を加えずに)部分除外がしたい」...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
v1.2.0新機能(再掲)
26
類似度ベースの画像比較
差分が出た「原因」を自動分類
 特定の原因のみ無視でき...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 27
https://github.com/hifive/hifive-pitalium
Star, Issue, P...
Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
商標について
28
 NS Solutions、NS(ロゴ)は、新日鉄住金ソリューションズ
株式会社の登録商標です。...
Upcoming SlideShare
Loading in …5
×

20170704 Pitaliumの新機能

875 views

Published on

2017/7/4に行われたテスト自動化勉強会の資料です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

20170704 Pitaliumの新機能

  1. 1. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 1 新機能 Pitalium is a tool 技術本部 システム研究開発センター イノベーティブアプリケーション研究部 hifive開発班 2017/7/4
  2. 2. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 自己紹介 2  石川 真也(@meganetaaan)  新日鉄住金ソリューションズ  システム研究開発センター所属  リードエンジニア  HTML5×業務システム  Webアプリケーション×テスト自動化 SeleniumConf ’16 参加しました!
  3. 3. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. とは?  次世代Web標準(HTML5/JavaScript/CSS)を活用した 企業Webシステム開発のためのプラットフォーム  ライセンス:Apache License, Version 2.0  商用システムに適用しやすい  コンセプト – 使い始めるための敷居を低く – Webの標準的な仕組みから逸脱しない – 開発のサイクルをトータルにサポート 3 テストもサポート!
  4. 4. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 4 のテスト自動化ツール を開発しています
  5. 5. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. Pitaliumの目的 5
  6. 6. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. Pitaliumの目的:回帰テストの省力化  自動化を阻む様々な課題を解決して  「複数ブラウザ/デバイス」を対象としたテストや  「見た目」のテストを  省力化したい!
  7. 7. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 「見た目」もテストしたい 7  図形やグラフの描画内容が正しいことを確認したいから  意図しないレイアウト崩れが起きる場合があるから グラフが 表示される マウスを重ねると ツールチップが 表示される • 表示されるか? • 表示される場所は 正しいか? • 表示内容は 正しいか? 機能 テスト
  8. 8. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 複数ブラウザ/デバイスでテストしたい 8  PCとスマートフォンで 異なるデザインにする場合があるから (レスポンシブデザイン)  ブラウザ毎の実装の違いによって 描画結果が異なる場合があるから https://github.com/philipwalton/flexbugs
  9. 9. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. しかし、目視確認はつらい 9  時間がかかる  違いを見落とす恐れがある OK… NG... →自動化したい
  10. 10. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 自動化を阻む課題 10 スクリプト作成・ 保守コスト大 ブラウザ個別の スクリプトが必要 見た目の 確認は目視 driver.get(baseUrl + "/myVideoRental/FrontController"); driver.findElement(By.name("shop_id ")).clear(); driver.findElement(By.name("shop_id ")).sendKeys("01"); driver.findElement(By.id("DisplayMen uLogic")).click(); assertEquals("貸出・返却メ ニュー画面", driver.getTitle()); 実施 結果確認準備 driver.get(bas eUrl + "/myVideoRen tal/FrontContr driver.get(bas eUrl + "/myVideoRen tal/FrontContr ブラウザ毎に細かい挙動の 違いがあるため、それぞれ 専用のスクリプトを用意す る必要があることも 「見た目」の正解をスクリ プトとして記述することが 難しく、結局目視で判定せ ざるを得ない部分が残って しまう 最初の作成に加えて、テス ト対象の実装が変わった際 スクリプト側もそれに追従 して変更しなくてはいけな い場合がある
  11. 11. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. マルチデバイス/ブラウザ対応 Webアプリテスト自動化ツール Pitalium 11 https://github.com/hifive/hifive-pitalium
  12. 12. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 記述を簡略化 Pitaliumによる解決策 スクリプト作成・ 保守コスト大 ブラウザ個別の スクリプトが必要 見た目の 確認は目視 driver.get(baseUrl + "/myVideoRental/FrontController"); driver.findElement(By.name("shop_id ")).clear(); driver.findElement(By.name("shop_id ")).sendKeys("01"); driver.findElement(By.id("DisplayMen uLogic")).click(); assertEquals("貸出・返却メ ニュー画面", driver.getTitle()); ワンソース 自動判定 12 driver.get(bas eUrl + "/myVideoRen tal/FrontContr driver.get(bas eUrl + "/myVideoRen tal/FrontContr 実施 結果確認準備
  13. 13. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. Pitaliumの基本機能 13
  14. 14. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. Pitaliumの機能 ①ワンソースで マルチデバイス/ ブラウザのテスト ②スクリーンショット 比較で 合否判定 14 今回は省略
  15. 15. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. スクリーンショット比較で合否判定 正 解 定 義 スクリーンショット 確認 スクリプト 実行 正解 正解として 保存 OK! テ ス ト 実 行 スクリプト 実行 正解 正解画像と比較し 合否判定 (失敗の場合) 差分を確認 15
  16. 16. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 「スクショでテスト」のメリット 16 目視で確認 ↓ 意図した変化なら正解を更新  (目視確認による)見た目のテストの負担減 正解画像と比較(自動) スクリーンショット取得(自動) 目視で確認
  17. 17. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. Pitalium v1.2.0の新機能 17
  18. 18. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. v1.2.0 Released!! https://www.htmlhifive.com/conts/web/view/pitalium/ ダウンロード > ツール・ライブラリ > Pitalium
  19. 19. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. v1.2.0新機能 19 類似度ベースの画像比較 差分が出た「原因」を自動分類  特定の原因のみ無視できる スクショを取らないSKIPモード 実行対象のブラウザ絞りこみ 任意の領域を部分除外
  20. 20. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 類似度ベースの画像比較 20  「厳密すぎない比較がしたい」  2つの画像の類似度を計算し、閾値を上回っていれば正解 にできる 類似度0.98 →OK
  21. 21. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 差分が出た「原因」を自動分類 21  差分をその原因によって分類する  SHIFT(領域が移動している)  SCALING(領域が拡大している)  MISSING(領域がなくなっている)  TEXT(テキストのサブピクセルレンダリングによる差分)  特定の原因による差分を無視できる 画像のサイズが 変わった(SCALING) →比較時に無視
  22. 22. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 22 DEMO
  23. 23. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. SKIPモード 23  「テストは回したいけどスクショは取りたくない」  デバッグ用に特定のテストを実行する場合など  Piアサーションをスキップしてテストを実行できる { "execMode": “SKIP“ } 実行モードを 「SKIP」にする @Test public void test() { driver.get(“http://example.com"); assertionView.assertView(); driver.anotherCommand(); } environmentConfig.json スクショを取らず Assertも無視される Test.java
  24. 24. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 実行対象のブラウザ絞り込み 24  「このテストはスマホでだけ実行したい」 詳しくは https://www.htmlhifive.com/conts/web/view/pitalium-reference/capability-filter Filterを設定 (スマホでのみ実行) @CapabilityFilter(platform = Platform.WINDOWS) public class CapabilityFilterSample extends PtlTestBase { @Test public void test1() throws Exception { // WINDOWS上のブラウザ全てで実行される。 } @Test @CapabilityFilter(browserName = BrowserType.CHROME) public void test2() throws Exception { // WINDOWS上のChromeで実行される。 } } アノテーションで指定
  25. 25. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 任意の領域を部分除外 25  「idやclassが付いていない要素に (ソース側には手を加えずに)部分除外がしたい」  半透明のピクセルを比較の対象外とする  あらかじめ正解画像を加工しておくフローを想定 開発チーム外から初のプルリクエスト https://github.com/hifive/hifive-pitalium/pull/114 除外したい部分をマスク (正解画像を加工) 比較時に無視
  26. 26. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. v1.2.0新機能(再掲) 26 類似度ベースの画像比較 差分が出た「原因」を自動分類  特定の原因のみ無視できる スクショを取らないSKIPモード 実行対象のブラウザ絞りこみ 半透明のピクセルを部分除外 ぜひお試しください!
  27. 27. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 27 https://github.com/hifive/hifive-pitalium Star, Issue, PullRequestお待ちしてます! Twitter: https://twitter.com/htmlhifive Facebook: https://www.facebook.com/htmlhifive
  28. 28. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 商標について 28  NS Solutions、NS(ロゴ)は、新日鉄住金ソリューションズ 株式会社の登録商標です。  hifive、hifive(ロゴ)、Pitalium、Pitalium(ロゴ)は、新日鉄住金 ソリューションズ株式会社の登録商標です。  Internet Explorerは、米国 Microsoft Corporation の米国および その他の国における登録商標です。  その他本文記載の会社名及び製品名は、それぞれ各社の商標又は 登録商標です。

×