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

UIテストが全ての対応ブラウザで必要
7
Internet Explorer 11 mobile SafariGoogle Chrome
同じ内容のテストを
ブラウザ・デバイスの数
繰り返すのは大変
スマデバの
テストは特に
負担大
しかし…

「短いサイクルで開発・リリース」とテスト
8
 短いサイクルでの開発・リリースへの需要増
 継続的インテグレーション（CI）が一般的に
 Jenkins等のツールの充実
 一方、リリースの度に回帰テストが必要に
 自動化しないテストがボトルネック化する
※回帰テスト：既存機能にバグが埋め込まれていないことを確認するテスト
Jenkins project:
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/FrontContr
driver.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/FrontContr
driver.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テスト自動化

More Related Content

What's hot

Viewers also liked

Similar to HTML5時代のUIテスト自動化

Recently uploaded

HTML5時代のUIテスト自動化