20170704 Pitaliumの新機能

Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 1
新機能
Pitalium is a tool
技術本部システム研究開発センター
イノベーティブアプリケーション研究部
hifive開発班
2017/7/4

Copyright ©2017 NS Solutions Corporation. All Rights Reserved.
自己紹介
2
 石川真也（@meganetaaan）
 新日鉄住金ソリューションズ
 システム研究開発センター所属
 リードエンジニア
 HTML5×業務システム
 Webアプリケーション×テスト自動化
SeleniumConf ’16
参加しました！

とは？
 次世代Web標準(HTML5/JavaScript/CSS)を活用した
企業Webシステム開発のためのプラットフォーム
 ライセンス：Apache License, Version 2.0
 商用システムに適用しやすい
 コンセプト
– 使い始めるための敷居を低く
– Webの標準的な仕組みから逸脱しない
– 開発のサイクルをトータルにサポート
3
テストもサポート！

のテスト自動化ツール
を開発しています

Pitaliumの目的
5

Pitaliumの目的：回帰テストの省力化
 自動化を阻む様々な課題を解決して
 「複数ブラウザ/デバイス」を対象としたテストや
 「見た目」のテストを
 省力化したい！

「見た目」もテストしたい
7
 図形やグラフの描画内容が正しいことを確認したいから
 意図しないレイアウト崩れが起きる場合があるから
グラフが
表示される
マウスを重ねると
ツールチップが
表示される
• 表示されるか？
• 表示される場所は
正しいか？
• 表示内容は
正しいか？
機能テスト

複数ブラウザ/デバイスでテストしたい
8
 PCとスマートフォンで
異なるデザインにする場合があるから
（レスポンシブデザイン）
 ブラウザ毎の実装の違いによって
描画結果が異なる場合があるから
https://github.com/philipwalton/flexbugs

しかし、目視確認はつらい
9
 時間がかかる
 違いを見落とす恐れがある
OK… NG...
→自動化したい

自動化を阻む課題
10
スクリプト作成・
保守コスト大
ブラウザ個別の
スクリプトが必要
見た目の
確認は目視
driver.get(baseUrl +
"/myVideoRental/FrontController");
driver.findElement(By.name("shop_id
")).clear();
")).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
ブラウザ毎に細かい挙動の
違いがあるため、それぞれ
専用のスクリプトを用意す
る必要があることも
「見た目」の正解をスクリ
プトとして記述することが
難しく、結局目視で判定せ
ざるを得ない部分が残って
しまう
最初の作成に加えて、テス
ト対象の実装が変わった際
スクリプト側もそれに追従
して変更しなくてはいけな
い場合がある

マルチデバイス/ブラウザ対応
Webアプリテスト自動化ツール
Pitalium
11
https://github.com/hifive/hifive-pitalium

記述を簡略化
Pitaliumによる解決策
スクリプト作成・
保守コスト大
ブラウザ個別の
スクリプトが必要
見た目の
確認は目視
driver.get(baseUrl +
"/myVideoRental/FrontController");
")).clear();
")).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
実施結果確認準備

Pitaliumの基本機能
13

Pitaliumの機能
①ワンソースで
マルチデバイス/
ブラウザのテスト
②スクリーンショット
比較で
合否判定
14
今回は省略

スクリーンショット比較で合否判定
正
解
定
義スクリーンショット
確認
スクリプト
実行
正解
正解として
保存
OK！
テ
ス
ト
実
行
スクリプト
実行
正解
正解画像と比較し
合否判定
（失敗の場合）
差分を確認
15

「スクショでテスト」のメリット
16
目視で確認
↓
意図した変化なら正解を更新
 （目視確認による）見た目のテストの負担減
正解画像と比較（自動）
スクリーンショット取得（自動）
目視で確認

Pitalium v1.2.0の新機能
17

v1.2.0 Released!!
https://www.htmlhifive.com/conts/web/view/pitalium/
ダウンロード > ツール・ライブラリ > Pitalium

v1.2.0新機能
19
類似度ベースの画像比較
差分が出た「原因」を自動分類
 特定の原因のみ無視できる
スクショを取らないSKIPモード
実行対象のブラウザ絞りこみ
任意の領域を部分除外

類似度ベースの画像比較
20
 「厳密すぎない比較がしたい」
 2つの画像の類似度を計算し、閾値を上回っていれば正解
にできる
類似度0.98
→OK

差分が出た「原因」を自動分類
21
 差分をその原因によって分類する
 SHIFT（領域が移動している）
 SCALING（領域が拡大している）
 MISSING（領域がなくなっている）
 TEXT（テキストのサブピクセルレンダリングによる差分）
 特定の原因による差分を無視できる
画像のサイズが
変わった（SCALING）
→比較時に無視

DEMO

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
 「このテストはスマホでだけ実行したい」
詳しくは
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
 「idやclassが付いていない要素に
（ソース側には手を加えずに）部分除外がしたい」
 半透明のピクセルを比較の対象外とする
 あらかじめ正解画像を加工しておくフローを想定
開発チーム外から初のプルリクエスト
https://github.com/hifive/hifive-pitalium/pull/114
除外したい部分をマスク
（正解画像を加工）
比較時に無視

v1.2.0新機能（再掲）
26
類似度ベースの画像比較
差分が出た「原因」を自動分類
 特定の原因のみ無視できる
スクショを取らないSKIPモード
実行対象のブラウザ絞りこみ
半透明のピクセルを部分除外
ぜひお試しください！

https://github.com/hifive/hifive-pitalium
Star, Issue, PullRequestお待ちしてます！
Twitter: https://twitter.com/htmlhifive
Facebook: https://www.facebook.com/htmlhifive

商標について
28
 NS Solutions、NS（ロゴ）は、新日鉄住金ソリューションズ
株式会社の登録商標です。
 hifive、hifive(ロゴ)、Pitalium、Pitalium(ロゴ)は、新日鉄住金
ソリューションズ株式会社の登録商標です。
 Internet Explorerは､米国 Microsoft Corporation の米国および
その他の国における登録商標です。
 その他本文記載の会社名及び製品名は、それぞれ各社の商標又は
登録商標です。

20170704 Pitaliumの新機能

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 20170704 Pitaliumの新機能

Similar to 20170704 Pitaliumの新機能 (20)

Recently uploaded

Recently uploaded (8)

20170704 Pitaliumの新機能