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テスト自動化

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

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

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

Recently uploaded

Recently uploaded (16)

HTML5時代のUIテスト自動化