Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5時代のUIテスト自動化

1,687 views

Published on

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

Published in: Technology
  • Be the first to comment

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 の米国および その他の国における登録商標です。  その他本文記載の会社名及び製品名は、それぞれ各社の商標又は 登録商標です。

×