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.

SWETの取り組むImage Based Testing

31,708 views

Published on

DeNA TechCon 2018の登壇資料です。

Published in: Technology
  • Be the first to comment

SWETの取り組むImage Based Testing

  1. 1. SWETの取り組む Image Based Testing システム本部 品質管理部 SWETグループ 薦田 登志矢 / 坂本 正義
  2. 2. SOFTWARE ENGINEER IN TEST 1
  3. 3. SWETのミッション • DeNAのサービス全般の品質向上 • エンジニアの開発生産性の向上 2 http://swet.dena.com/about
  4. 4. SWETの技術開発事例紹介 Web Application • クローラを用いたVisual Regression Testing • 機械学習を用いたカバレッジ 向上の取り組み Mobile Game • ゲームUIテスト自動化の難し さについて • ゲームのUIテスト自動化のた めのバックエンドサービス ExMachina 3
  5. 5. SWETの技術開発事例紹介 Web Application • クローラを用いたVisual Regression Testing • 機械学習を用いたカバレッジ 向上の取り組み Mobile Game • ゲームUIテスト自動化の難し さについて • ゲームのUIテスト自動化のた めのバックエンドサービス ExMachina 4
  6. 6. レンダリング結果の崩れ 5 表示されていない 文字化け 文字見切れ 文字はみ出し レイアウト崩れ ---------------- ---------------- --------- ---------------- ---------------- --------- □□□□□□□□□□ □□□□□□□□ □□□□□□□□ --------------- ---------------- --------- ---------------- ---------------- --------- ---------------- ---------------- --------- ---------------- ---------------- ------------------------- ---------------- ---------
  7. 7. Visual Regression Testing • ウェブ・サイトのキャプチャを取得し、見た目のデグレ を検出する自動テスト手法 6 過去のキャプチャ 現在のキャプチャ 差分確認 比較
  8. 8. 既存サービス • Browser Stack – 多様な端末・ブラウザ上でのキャプチャ取得 • Applitools – 過去画像との差分を表示してくれる管理コンソール 7
  9. 9. Visual Regression Testingの課題 • キャプチャ取得ロジックの実装コスト – Seleniumの学習コスト – 非同期処理・リトライ処理の扱い – + テスト対象ページの知識 開発チームにUIテストに詳しい人が いないと難しい 8
  10. 10. スクリーンショット・クローラ • 自律的にサイト内を巡 回・テスト対象ページを 見つけ出す • Seleniumと組み合わせる ことで、クローリングし ながらキャプチャを網羅 的に取得できる 9 Top Page Article Page2 Article Page1 Help Page swet.dena.com
  11. 11. スクリーンショット・クローラ • 自律的にサイト内を巡 回・テスト対象ページを 見つけ出す • Seleniumと組み合わせる ことで、クローリングし ながらキャプチャを網羅 的に取得できる 10 Top Page Article Page2 Article Page1 Help Page swet.dena.com Capture
  12. 12. スクリーンショット・クローラ • 自律的にサイト内を巡 回・テスト対象ページを 見つけ出す • Seleniumと組み合わせる ことで、クローリングし ながらキャプチャを網羅 的に取得できる 11 Top Page Article Page2 Article Page1 Help Page swet.dena.com Capture
  13. 13. スクリーンショット・クローラ • 自律的にサイト内を巡 回・テスト対象ページを 見つけ出す • Seleniumと組み合わせる ことで、クローリングし ながらキャプチャを網羅 的に取得できる 12 Top Page Article Page2 Article Page1 Help Page swet.dena.com Capture Capture
  14. 14. スクリーンショット・クローラ • 自律的にサイト内を巡 回・テスト対象ページを 見つけ出す • Seleniumと組み合わせる ことで、クローリングし ながらキャプチャを網羅 的に取得できる 13 Top Page Article Page2 Article Page1 Help Page swet.dena.com Capture Capture Capture
  15. 15. クローラ利用の流れ 14 Storage 画像差分ビュワー 記述する 設定 ファイル 入力 スクリーンショット クローラー サイト巡回 キャプチャ 取得
  16. 16. 設定ファイル • 項目 – テスト対象サイト ドメイン – キャプチャ取得時 パラメータ • 画面サイズ • キャプチャ取得の前の wait 時間 – ブラウザ 15
  17. 17. 並列化 • スクリーンショットを撮るのは時間がかかる – ページロード + スクロールしながらキャプチャ撮る • 幅優先探索 + グローバルなタスクキューで実装 – 排他ロックは取らず、たまの重複訪問を許容するこ とで実装を簡単化 16
  18. 18. クローラ部分のシステム構成 17 SUT NodeJSで記述 • webdriverioを 利用 ブラウザ実行環境 • zaleniumを利用 • selenium nodeの オートスケール • オンプレでもクラウド 上でもO.K HTTP HTTP
  19. 19. クローラの動作デモ 18
  20. 20. 画像差分の確認 • Githubの利用: masterとの差分を目視で確認 – Applitoolsなど高機能なビュワーを用いることも可能 192-up swipe
  21. 21. 画像差分の確認 • Githubの利用: masterとの差分を目視で確認 – Applitoolsなど高機能なビュワーを用いることも可能 202-up swipe スクリーンショット・クローラを用いることで テストコードを記述せず、Visual Testingが可能になる
  22. 22. 課題と今後の展望 21
  23. 23. 現状のクローラの基本サイクル 22 Screenshot取得・保存 Actionの抽出と実行 アプリケーション状態変化 の判定 リンクの取得 リンクのクリック URLの取得 URL変化の判定 テスト対象サイト
  24. 24. 課題: フォーム入力 • サイトごとにカスタムロ ジックを書けばできなく はない – 最初の問題に逆戻り • フォームを検出して自動 で埋める技術が必要 23 Top Page Article Page2 Article Page1 検索 結果 ログイン必須 ログイン必須 キーワード 入力
  25. 25. 課題: 同一ページ内の状態変化 • 取得したいキャプチャは 1ページ1枚とは限らない – ポップアップ – オーバーレイ表示 – アコーディオン • レンダリング結果の変化を 自動検出する技術が必要 24 Top Page Article Page2 Article Page1 検索 結果 Capture Accordi on Popup Capture
  26. 26. 展望: 機械学習によるUIの意味認識 25 Screenshot取得・保存 Actionの抽出と実行 アプリケーション状態変化 の判定 意味に基づく エレメント取得 フォーム入力 オーバレイ表示 レンダリング結果の 意味 機械学習 テスト対象サイト
  27. 27. ウェブページの意味解析技術 • 先行研究 Using Semantic Similarity in Crawling-Based Web Application Testing, J. W. Lin, ICST 2017 • HTMLをパターン認識し て、UIエレメントの意味 やページ状態を推定する 26 <input type="email” name="user_email” placeholder="please input your email"> ["email", "user", "email", "please", "input", "your", "email"] トピック = E メール 単語の抽出 機械学習アルゴリズム クローラがEメールの値を入力 (値は設定ファイルで指定)
  28. 28. ログイン自動化の自動化 27
  29. 29. 会員登録の自動化 28
  30. 30. 会員登録フォーム意味推定精度(F値) • 200サイト – 138サイトで学習 – 59サイトでテスト • 全結合3層のNN – 深層学習ではない • トピックごとに 精度の差あり • 学習データの拡充、 深層学習の適用を 予定 29
  31. 31. 会員登録フォーム意味推定精度(F値) • 200サイト – 138サイトで学習 – 59サイトでテスト • 全結合3層のNN – 深層学習ではない • トピックごとに 精度の差あり • 学習データの拡充、 深層学習の適用を 予定 30
  32. 32. 会員登録フォーム意味推定精度(F値) • 200サイト – 138サイトで学習 – 59サイトでテスト • 全結合3層のNN – 深層学習ではない • トピックごとに 精度の差あり • 学習データの拡充、 深層学習の適用を 予定 31
  33. 33. SWETの技術開発事例紹介 Web Application • クローラを用いたVisual Regression Testing • 機械学習を用いたカバレッジ 向上の取り組み Mobile Game • ゲームUIテスト自動化の難し さについて • ゲームのUIテスト自動化のた めのバックエンドサービス ExMachina 32
  34. 34. SWETの技術開発事例紹介 Web Application • クローラを用いたVisual Regression Testing • 機械学習を用いたカバレッジ 向上の取り組み Mobile Game • ゲームUIテスト自動化の難し さについて • ゲームのUIテスト自動化のた めのバックエンドサービス ExMachina 33
  35. 35. アプリのUIテスト自動化の現状 • Webアプリやネイティブアプリに対してはテスティングツール/ラ イブラリやノウハウが整備されており、UIテストの実装を行いやす い状況 • ゲームアプリに対しては、そういったデファクトのツールやプラク ティスが整っていない 34 Webアプリ ネイティブアプリ ゲームアプリ 対応する テスティングツール /ライブラリ XCUITest espresso
  36. 36. ゲームアプリのUIテスト自動化の難しさ • WebViewやOSの提供するUIウィジェット等を使った NativeViewで構成されるアプリの場合、画面の構成 情報をHTMLやXMLとして取得可能 • アプリが今どういう状態にあるのか、どのような操作 が可能なのかということが、プログラムから判断しや すい 35 対応するエレメント
  37. 37. ゲームアプリのUIテスト自動化の難しさ • OpenGLなどで描写されるゲームアプリの場合、画 面を構成する要素などの情報をセマンティックな 形で取得できない • アプリの状態判断や、操作対象の指定ために使用 できる情報は、ゲーム画面の画像情報のみ 36 対応する エレメントは 取得できない
  38. 38. ゲームアプリのUIテスト自動化の実現方法 • ゲーム画面の画像情報しか使える情報がない • 具体的にはOpenCVを使ったテンプレートマッ チング 37 画像処理技術を使って自動化
  39. 39. テンプレートマッチングとは • 対象となる画像の中に、特定の画像パターン(テンプレート)が存在 するかを判定するために使用できる画像処理の手法 • 対象画像に対しテンプレートを走査演算し、演算の結果として各座 標毎のテンプレートとのマッチ度合いを配列として得る 38
  40. 40. テンプレートマッチング(二乗差分マッチング手法[SQDIFF])の例 39 0 0 0 0 0 0 0 1 0 0 0 1 1 1 0 0 0 1 0 0 0 0 0 0 0 0 1 0 1 1 1 0 1 0 SQ_DIFF 0 x y 0 x’ y’ = 4 5 4 5 0 5 4 5 4 0 x y 画像 テンプレート 𝑅 𝑠𝑞_𝑑𝑖𝑓𝑓𝑇𝐼 結果 𝑅 𝑠𝑞_𝑑𝑖𝑓𝑓 𝑥, 𝑦 = 𝑥′,𝑦′ 𝑇 𝑥′ , 𝑦′ − 𝐼(𝑥 + 𝑥′ , 𝑦 + 𝑦′) 2
  41. 41. テンプレートマッチング(二乗差分マッチング手法[SQDIFF])の例 40 0 0 0 0 0 0 0 1 0 0 0 1 1 1 0 0 0 1 0 0 0 0 0 0 0 0 1 0 1 1 1 0 1 0 SQ_DIFF 0 x y 0 x’ y’ = 4 5 4 5 0 5 4 5 4 0 x y 画像 テンプレート 𝑅 𝑠𝑞_𝑑𝑖𝑓𝑓𝑇𝐼 結果 𝑅 𝑠𝑞_𝑑𝑖𝑓𝑓 𝑥, 𝑦 = 𝑥′,𝑦′ 𝑇 𝑥′ , 𝑦′ − 𝐼(𝑥 + 𝑥′ , 𝑦 + 𝑦′) 2 最もマッチ度が 高い座標 (x=2, y=2) この領域がテンプレートに マッチしていると判断できる
  42. 42. 画像処理を使った自動化へのハードル • 画像処理及び画像処理ライブラリに関する知識の習得 • 画像処理に向いた言語の習得 – OpenCVはC++やPython • イメージアセットの管理 – イメージアセットをテストシナリオ間で共有できないと、画面変更に 対応するコストが高くなる • 閾値のチューニング – テンプレートマッチングで手に入るのはマッチ度の配列 – テンプレートが存在したとみなす閾値を決める必要がある 41 これらの面倒なところを省力化するためのサービスとして ExMachina を開発 テスト実装者 テストを実装したい だけなのに・・・
  43. 43. ExMachinaについて 42
  44. 44. ExMachinaについて • 画像処理を使ったテストの実装を省力化するために、 ExMachinaは以下の機能を提供する – テスト用イメージアセットの管理機能 – デバイス画面の画像からページを判定する機能 43
  45. 45. イメージアセットの管理方法 • ExMachinaはイメージアセットをアプリのペー ジ単位で、ページ情報という形で管理する • ページ情報はページのスクリーショット画像に 加え、そのページを一意に特定するための識別 子(Identifier)と、そのページにおいてどのよう な操作が可能なのかを表す情報(Action)をセッ トで管理する • ページ情報はExMachinaのWebUIから視覚的に 定義することができる 44
  46. 46. ページ情報の定義方法 45
  47. 47. ページの判定機能 • 格納されているページ情報の識別情報を用いて画像処理を行うこと で、ExMachinaは画像データをインプットとして、それがどのペー ジに該当するのかを判定することができる • ページ情報にはどのような操作が可能かという情報もセットで管理 されているので、テストプログラムはネイティブアプリの場合と同 様、セマンティックな情報を使った自動化が行えるようになる 46
  48. 48. ページ判定機能を使ったテストシナリオの自動化の流れ 47 ページ情報 ExMachina Client テスト シナリオ ExMachina テストプログラム{ name: “トップページ”, actions: [ UIの座標・・・ ] } ①“カード召喚” ボタンをタップ ④ 画 像 処 理 ②現在のデバイス画面 の画像取得 ③デバイス画面の 画像を送信 ⑦取得した“カード召喚” ボタンの座標をタップ ⑤該当したページの ページ情報を返信 ⑥ ”カード召喚”ボタンが 存在するページか確認 / ボタンの座標を把握
  49. 49. ページ判定機能を使ったテストシナリオの自動化 48 “カード召喚”ボタン • 以下のように、どのような操作を行うかが分か りやすい形でテストシナリオを記述できる
  50. 50. 動作デモ 49 ExMachina解析結果 テストコード
  51. 51. クローラへの応用 50
  52. 52. クローラへの応用 • ExMachinaに問い合わせることで、現在どのページにい るか、そのページでどのようなアクションが取れるかと いう情報が取得可能 • ゲームアプリにおいてもWebアプリ同様にクローリング を行うことができる 51
  53. 53. クローリングの実行結果 • Webのクローリング同様に、実行結 果として画面遷移のネットワークが 得られる 52
  54. 54. クローリング結果の比較 • 過去実行時のクローリング結果と比較することで、画面 遷移のネットワーク的な差分と、各ページの画像的な差 分を取得することができる 53
  55. 55. クローリング結果の比較 54
  56. 56. クローリング結果の比較 55 差分画像 画面遷移やページ画像の差分を見ること で、画面崩れやアプリのエラーやクラッ シュなど、意図せぬUI/画面遷移の変更を 把握しやすくなる
  57. 57. ExMachinaのまとめ • ExMachinaは – アプリのページ情報を管理する – デバイス画面の画像を受け取り、該当するページの セマンティックな情報を返す • ExMachinaを使うことで – テストプログラムは画像処理を意識しなくて済む – ゲームアプリに対してもVisual Regressionが行える 56
  58. 58. ExMachinaの課題 • ページ情報登録の省力化 – WebUIから簡単に定義はできるが、登録するページが数百ペー ジとかになってくると物量的に登録作業が大変 • 複数解像度への対応 – ゲーム画面はデバイスの解像度に合わせて単純に伸縮されるわ けではないので、複数解像度のデバイスでページを判定したい 場合は、解像度ごとにページ情報を登録する必要がある 57
  59. 59. 課題への対応方法 • 以下のような機械学習の手法を利用してページ情報の登 録を省力化・半自動化できないか検討中 – Semantic Segmentation – pix2code 58
  60. 60. 課題への対応方法(Semantic Segmentation) • 画像内の各画素がそれぞれどのオブジェクトクラス(人、車、猫、 家など)に属するのかを分類するためのアプローチ 59 Liang-Chieh Chen, George Papandreou, Florian Schroff, Hartwig Adam (2017) 「Rethinking Atrous Convolution for Semantic Image Segmentation」等 https://arxiv.org/abs/1706.05587 Paper: 教師データ from ”PASCAL VOC” http://host.robots.ox.ac.uk/pascal/VOC/ input output
  61. 61. 課題への対応方法(Semantic Segmentation) 60 • ネイティブアプリや、WebアプリはUIの構成などセマンティックな情報が取得可能 • モバイル向けWebページやアプリのページを巡回して生成した学習データを元に、 ゲーム画面のUI要素をセグメンテーションできるネットワークを生成できないか検 討している 教師データ ・・・ input 期待するoutput
  62. 62. 課題への対応方法(pix2code) • GUIのスクリーンショット画像をインプットとして、その画面を実 現するhtmlやAndroid/iOSのコードを生成するアプローチ • ゲームアプリの画面の画像をインプットし、生成されたhtmlなどセ マンティックな情報を解析することで、UIとして有意な領域が取得 できるのではないかと期待している 61 Tony Beltramelli (2017) 「 pix2code: Generating Code from a Graphical User Interface Screenshot」 https://arxiv.org/abs/1705.07962 Paper:
  63. 63. まとめ • Webアプリに対しては、Visual Regressionに使えるクロー ラの開発を行っています • ゲームアプリに対しては、画像処理を使ったUIテスト自動化 を省力化するために、ページ情報という単位でイメージア セットを管理し、ページを判定するサービスを作りました • それぞれの取り組みの課題を解決するために機械学習の活用 を検討しています 62
  64. 64. ご清聴ありがとうございました 63

×