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

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

https://www.htmlhifive.com/conts/web/view/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で実行される。

}

}

アノテーションで指定

https://www.htmlhifive.com/conts/web/view/pitalium-reference/capability-filter






任意の領域を部分除外

25

「idやclassが付いていない要素に

（ソース側には手を加えずに）部分除外がしたい」

半透明のピクセルを比較の対象外とする

あらかじめ正解画像を加工しておくフローを想定

開発チーム外から初のプルリクエスト

https://github.com/hifive/hifive-pitalium/pull/114

除外したい部分をマスク

（正解画像を加工）

比較時に無視





v1.2.0新機能（再掲）

26



特定の原因のみ無視できる

スクショを取らないSKIPモード

実行対象のブラウザ絞りこみ

半透明のピクセルを部分除外

ぜひお試しください！



Star, Issue, PullRequestお待ちしてます！

Twitter: https://twitter.com/htmlhifive

Facebook: https://www.facebook.com/htmlhifive




https://twitter.com/htmlhifive

https://www.facebook.com/htmlhifive


商標について

28

NS Solutions、NS（ロゴ）は、新日鉄住金ソリューションズ株式会社の登録商標です。

hifive、hifive(ロゴ)、Pitalium、Pitalium(ロゴ)は、新日鉄住金ソリューションズ株式会社の登録商標です。

Internet Explorerは､米国 Microsoft Corporation の米国およびその他の国における登録商標です。

その他本文記載の会社名及び製品名は、それぞれ各社の商標又は登録商標です。

Technology

20170704 Pitaliumの新機能