html5時代のuiテスト自動化

Copyright ©2017 NS Solutions Corporation. All Rights Reserved.

HTML5時代のUIテスト自動化

1

技術本部システム研究開発センター石川真也


自己紹介

2

石川真也

新日鉄住金ソリューションズ

システム研究開発センター所属

リードエンジニア

HTML5×業務システム

Webアプリケーション×テスト自動化


要旨

3

HTML5の時代になり

「リッチなユーザインタフェース」をもつ画面を

「複数ブラウザ・デバイスの対応」を実現しつつ

「短いサイクルで開発・リリース」できる土壌が整ってきた

ただしその分テストの負担が増大している

テスト自動化を阻む課題も存在する

テスト自動化の課題とその解決策の一例を紹介

Webアプリテスト自動化ツール「」

– 主な機能とメリット


「リッチなユーザインタフェース」とテスト

4

HTML5によって多彩な表現が可能に

図形やグラフの描画など

一方、「ユーザにどう見えているか」のテストが必要に

グラフが表示される

マウスを重ねるとツールチップが表示される

• 表示されるか？• 表示される場所は

正しいか？• 表示内容は

正しいか？

機能テスト


UIテストが必要

5

目視確認だと細かい表示内容の変化を

見落としがち

だけど…


「複数ブラウザ・デバイスの対応」とテスト

6

HTML5によって複数のブラウザ・デバイスに対応可能に（レスポンシブデザイン）

一方、「ブラウザ間の差異によるレイアウト崩れ」が起きることも

対応ブラウザ・デバイスすべてで表示を確認する必要がある

https://github.com/philipwalton/flexbugs

https://github.com/philipwalton/flexbugs


UIテストが全ての対応ブラウザで必要

7

Internet Explorer 11 mobile SafariGoogle Chrome

同じ内容のテストをブラウザ・デバイスの数

繰り返すのは大変

スマデバのテストは特に

負担大

しかし…


「短いサイクルで開発・リリース」とテスト

8

短いサイクルでの開発・リリースへの需要増

継続的インテグレーション（CI）が一般的に

Jenkins等のツールの充実

一方、リリースの度に回帰テストが必要に

自動化しないテストがボトルネック化する

※回帰テスト：既存機能にバグが埋め込まれていないことを確認するテスト

Jenkins project:

http://jenkins-ci.org/

ビルド

テスト

コーディング

/デバッグ

コミット

http://jenkins-ci.org/

Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 9

Internet

Explorer 11

mobile Safari

Google

Chrome

掛け算的に負担増…

手動では間に合わない→自動化しよう！

UIテストが全ての対応ブラウザでリリースの度に必要

もう無理…


テスト自動化を阻む課題

10

自動化環境やスクリプトの作成・保守コスト大

「ブラウザ間の差異」に対応するために、同じテストに対してブラウザ毎に個別のスクリプトを書く場合も

UIテストは自動化しづらい

「画面が正しく表示されること」をどう定義・記述するか？

レイアウトの確認は目視で行う？→ボトルネック化

スクリプト作成・保守コスト大

ブラウザ個別のスクリプトが必要

レイアウトの確認は目視

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/FrontContrdriver.get(bas

eUrl +

"/myVideoRen

tal/FrontContr


マルチデバイス/ブラウザ対応

Webアプリテスト自動化ツール

Pitalium

11


記述を簡略化

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/FrontContrdriver.get(bas

eUrl +

"/myVideoRen

tal/FrontContr


Pitaliumの主な機能

ワンソースでマルチデバイス/

ブラウザのテスト

スクリーンショット比較で合否判定

13

今回ご紹介



14

取得したスクリーンショットと用意しておいた正解画像を比較し、テストの合否を判定する

実行時の画像

正解画像

画像比較



正解定義スクリーンショット

確認スクリプト

実行

正解

正解として保存

OK！

テスト実行

スクリプト実行

正解

正解画像と比較差分を確認

15

取得したスクリーンショットと用意しておいた正解画像を比較し、テストの合否を判定する


スクリーンショット比較のメリット

16

（目視確認による）画面テストの負担減

正解画像と比較（自動）スクリーンショット取得（自動）

確認（手動）

失敗ケースの確認（手動）


スクリーンショット比較のメリット

レイアウト崩れの有無がわかる

OK…

NG...

全端末分を毎回確認

全ブラウザOK！

結果を見るだけ

17


デモ

18

テストを実行しながら、あらかじめ用意した「正解」のスクリーンショットと、今回取得したスクリーンショットを自動で比較します。

スクリーンショットが一致しなかった場合、両者の差分を示す画像が生成されます。


要旨（再掲）

19

HTML5の時代になり

「リッチなユーザインタフェース」をもつ画面を

「複数ブラウザ・デバイスの対応」を実現しつつ

「短いサイクルで開発・リリース」できる土壌が整ってきた

ただしその分テストの負担が増大している

テスト自動化を阻む課題も存在する

テスト自動化の課題とその解決策の一例を紹介

Webアプリテスト自動化ツール「」

– 主な機能とメリット


商標について

20

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

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

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

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

html5時代のuiテスト自動化

Technology