HTML5時代のUIテスト自動化

118 views

Published on

2017/1/18(水)に行われた HTML5 Enterprise Seminar 2017 の「HTML5時代のUIテスト自動化」の講演資料です。

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
118
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5時代のUIテスト自動化

  1. 1. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. HTML5時代のUIテスト自動化 1 技術本部 システム研究開発センター 石川 真也
  2. 2. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 自己紹介 2  石川 真也  新日鉄住金ソリューションズ  システム研究開発センター所属  リードエンジニア  HTML5×業務システム  Webアプリケーション×テスト自動化
  3. 3. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 要旨 3  HTML5の時代になり  「リッチなユーザインタフェース」をもつ画面を  「複数ブラウザ・デバイスの対応」を実現しつつ  「短いサイクルで開発・リリース」できる土壌が整ってきた  ただしその分テストの負担が増大している  テスト自動化を阻む課題も存在する  テスト自動化の課題とその解決策の一例を紹介  Webアプリテスト自動化ツール「 」 – 主な機能とメリット
  4. 4. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 「リッチなユーザインタフェース」とテスト 4  HTML5によって多彩な表現が可能に  図形やグラフの描画など  一方、「ユーザにどう見えているか」のテストが必要に グラフが 表示される マウスを重ねると ツールチップが 表示される • 表示されるか? • 表示される場所は 正しいか? • 表示内容は 正しいか? 機能 テスト
  5. 5. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. UIテストが必要 5 目視確認だと 細かい表示内容の変化を 見落としがち だけど…
  6. 6. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 「複数ブラウザ・デバイスの対応」とテスト 6  HTML5によって複数のブラウザ・デバイスに対応可能に (レスポンシブデザイン)  一方、「ブラウザ間の差異によるレイアウト崩れ」が 起きることも  対応ブラウザ・デバイスすべてで表示を確認する必要がある https://github.com/philipwalton/flexbugs
  7. 7. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. UIテストが全ての対応ブラウザで必要 7 Internet Explorer 11 mobile SafariGoogle Chrome 同じ内容のテストを ブラウザ・デバイスの数 繰り返すのは大変 スマデバの テストは特に 負担大 しかし…
  8. 8. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 「短いサイクルで開発・リリース」とテスト 8  短いサイクルでの開発・リリースへの需要増  継続的インテグレーション(CI)が一般的に  Jenkins等のツールの充実  一方、リリースの度に回帰テストが必要に  自動化しないテストがボトルネック化する ※回帰テスト:既存機能にバグが埋め込まれていないことを確認するテスト Jenkins project: http://jenkins-ci.org/ ビルド テスト コーディング /デバッグ コミット
  9. 9. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 9 Internet Explorer 11 mobile Safari Google Chrome 掛け算的に負担増… 手動では間に合わない →自動化しよう! UIテストが全ての対応ブラウザで リリースの度に必要 もう無理…
  10. 10. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. テスト自動化を阻む課題 10  自動化環境やスクリプトの作成・保守コスト大  「ブラウザ間の差異」に対応するために、同じテストに対して ブラウザ毎に個別のスクリプトを書く場合も  UIテストは自動化しづらい  「画面が正しく表示されること」をどう定義・記述するか?  レイアウトの確認は目視で行う?→ボトルネック化 スクリプト作成・ 保守コスト大 ブラウザ個別の スクリプトが必要 レイアウトの 確認は目視 driver.get(baseUrl + "/myVideoRental/FrontController"); driver.findElement(By.name("shop_id ")).clear(); driver.findElement(By.name("shop_id ")).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
  11. 11. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. マルチデバイス/ブラウザ対応 Webアプリテスト自動化ツール Pitalium 11
  12. 12. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 記述を簡略化 Pitaliumによる解決策 実施 結果確認 スクリプト作成・ 保守コスト大 ブラウザ個別の スクリプトが必要 レイアウトの 確認は目視 準備 driver.get(baseUrl + "/myVideoRental/FrontController"); driver.findElement(By.name("shop_id ")).clear(); driver.findElement(By.name("shop_id ")).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
  13. 13. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. Pitaliumの主な機能 ワンソースで マルチデバイス/ ブラウザのテスト スクリーンショット比較で 合否判定 13 今回ご紹介
  14. 14. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. スクリーンショット比較で合否判定 14  取得したスクリーンショットと用意しておいた正解画像を 比較し、テストの合否を判定する 実行時の画像 正解画像 画像比較
  15. 15. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. スクリーンショット比較で合否判定 正 解 定 義 スクリーンショット 確認 スクリプト 実行 正解 正解として 保存 OK! テ ス ト 実 行 スクリプト 実行 正解 正解画像と比較 差分を確認 15 取得したスクリーンショットと用意しておいた正解画像を比 較し、テストの合否を判定する
  16. 16. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. スクリーンショット比較のメリット 16  (目視確認による)画面テストの負担減 正解画像と比較(自動) スクリーンショット取得(自動) 確認(手動) 失敗ケースの 確認(手動)
  17. 17. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. スクリーンショット比較のメリット  レイアウト崩れの有無がわかる OK… NG... 全端末分を毎回確認 全ブラウザ OK! 結果を見るだけ 17
  18. 18. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. デモ 18 テストを実行しながら、あらかじめ 用 意 し た 「 正 解 」 の ス ク リ ー ン ショットと、今回取得したスクリー ンショットを自動で比較します。 スクリーンショットが一致しなかっ た場合、両者の差分を示す画像が生 成されます。
  19. 19. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 要旨(再掲) 19  HTML5の時代になり  「リッチなユーザインタフェース」をもつ画面を  「複数ブラウザ・デバイスの対応」を実現しつつ  「短いサイクルで開発・リリース」できる土壌が整ってきた  ただしその分テストの負担が増大している  テスト自動化を阻む課題も存在する  テスト自動化の課題とその解決策の一例を紹介  Webアプリテスト自動化ツール「 」 – 主な機能とメリット
  20. 20. Copyright ©2017 NS Solutions Corporation. All Rights Reserved. 商標について 20  NS Solutions、NS(ロゴ)、NSSOLは、新日鉄住金ソリューションズ 株式会社の登録商標です。  hifive、hifive(ロゴ)、Pitalium、Pitalium(ロゴ)は、新日鉄住金 ソリューションズ株式会社の登録商標です。  Internet Explorerは、米国 Microsoft Corporation の米国および その他の国における登録商標です。  その他本文記載の会社名及び製品名は、それぞれ各社の商標又は 登録商標です。

×