Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a SWETの取り組むImage Based Testing
Semelhante a SWETの取り組むImage Based Testing (20)
Mais de DeNA
Mais de DeNA (20)
SWETの取り組むImage Based Testing
- 1. SWETの取り組む Image Based Testing システム本部 品質管理部 SWETグループ 薦田 登志矢 / 坂本 正義
- 4. SWETの技術開発事例紹介 Web Application • クローラを用いたVisual Regression Testing • 機械学習を用いたカバレッジ 向上の取り組み Mobile Game • ゲームUIテスト自動化の難し さについて • ゲームのUIテスト自動化のた めのバックエンドサービス ExMachina 3
- 5. SWETの技術開発事例紹介 Web Application • クローラを用いたVisual Regression Testing • 機械学習を用いたカバレッジ 向上の取り組み Mobile Game • ゲームUIテスト自動化の難し さについて • ゲームのUIテスト自動化のた めのバックエンドサービス ExMachina 4
- 7. Visual Regression Testing • ウェブ・サイトのキャプチャを取得し、見た目のデグレ を検出する自動テスト手法 6 過去のキャプチャ 現在のキャプチャ 差分確認 比較
- 8. 既存サービス • Browser Stack – 多様な端末・ブラウザ上でのキャプチャ取得 • Applitools – 過去画像との差分を表示してくれる管理コンソール 7
- 9. Visual Regression Testingの課題 • キャプチャ取得ロジックの実装コスト – Seleniumの学習コスト – 非同期処理・リトライ処理の扱い – + テスト対象ページの知識 開発チームにUIテストに詳しい人が いないと難しい 8
- 16. 設定ファイル • 項目 – テスト対象サイト ドメイン – キャプチャ取得時 パラメータ • 画面サイズ • キャプチャ取得の前の wait 時間 – ブラウザ 15
- 17. 並列化 • スクリーンショットを撮るのは時間がかかる – ページロード + スクロールしながらキャプチャ撮る • 幅優先探索 + グローバルなタスクキューで実装 – 排他ロックは取らず、たまの重複訪問を許容するこ とで実装を簡単化 16
- 18. クローラ部分のシステム構成 17 SUT NodeJSで記述 • webdriverioを 利用 ブラウザ実行環境 • zaleniumを利用 • selenium nodeの オートスケール • オンプレでもクラウド 上でもO.K HTTP HTTP
- 19. クローラの動作デモ 18
- 20. 画像差分の確認 • Githubの利用: masterとの差分を目視で確認 – Applitoolsなど高機能なビュワーを用いることも可能 192-up swipe
- 21. 画像差分の確認 • Githubの利用: masterとの差分を目視で確認 – Applitoolsなど高機能なビュワーを用いることも可能 202-up swipe スクリーンショット・クローラを用いることで テストコードを記述せず、Visual Testingが可能になる
- 22. 課題と今後の展望 21
- 24. 課題: フォーム入力 • サイトごとにカスタムロ ジックを書けばできなく はない – 最初の問題に逆戻り • フォームを検出して自動 で埋める技術が必要 23 Top Page Article Page2 Article Page1 検索 結果 ログイン必須 ログイン必須 キーワード 入力
- 25. 課題: 同一ページ内の状態変化 • 取得したいキャプチャは １ページ１枚とは限らない – ポップアップ – オーバーレイ表示 – アコーディオン • レンダリング結果の変化を 自動検出する技術が必要 24 Top Page Article Page2 Article Page1 検索 結果 Capture Accordi on Popup Capture
- 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. ログイン自動化の自動化 27
- 29. 会員登録の自動化 28
- 30. 会員登録フォーム意味推定精度(F値) • 200サイト – 138サイトで学習 – 59サイトでテスト • 全結合3層のNN – 深層学習ではない • トピックごとに 精度の差あり • 学習データの拡充、 深層学習の適用を 予定 29
- 31. 会員登録フォーム意味推定精度(F値) • 200サイト – 138サイトで学習 – 59サイトでテスト • 全結合3層のNN – 深層学習ではない • トピックごとに 精度の差あり • 学習データの拡充、 深層学習の適用を 予定 30
- 32. 会員登録フォーム意味推定精度(F値) • 200サイト – 138サイトで学習 – 59サイトでテスト • 全結合3層のNN – 深層学習ではない • トピックごとに 精度の差あり • 学習データの拡充、 深層学習の適用を 予定 31
- 33. SWETの技術開発事例紹介 Web Application • クローラを用いたVisual Regression Testing • 機械学習を用いたカバレッジ 向上の取り組み Mobile Game • ゲームUIテスト自動化の難し さについて • ゲームのUIテスト自動化のた めのバックエンドサービス ExMachina 32
- 34. SWETの技術開発事例紹介 Web Application • クローラを用いたVisual Regression Testing • 機械学習を用いたカバレッジ 向上の取り組み Mobile Game • ゲームUIテスト自動化の難し さについて • ゲームのUIテスト自動化のた めのバックエンドサービス ExMachina 33
- 35. アプリのUIテスト自動化の現状 • Webアプリやネイティブアプリに対してはテスティングツール/ラ イブラリやノウハウが整備されており、UIテストの実装を行いやす い状況 • ゲームアプリに対しては、そういったデファクトのツールやプラク ティスが整っていない 34 Webアプリ ネイティブアプリ ゲームアプリ 対応する テスティングツール /ライブラリ XCUITest espresso
- 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. テンプレートマッチング(二乗差分マッチング手法[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. 画像処理を使った自動化へのハードル • 画像処理及び画像処理ライブラリに関する知識の習得 • 画像処理に向いた言語の習得 – OpenCVはC++やPython • イメージアセットの管理 – イメージアセットをテストシナリオ間で共有できないと、画面変更に 対応するコストが高くなる • 閾値のチューニング – テンプレートマッチングで手に入るのはマッチ度の配列 – テンプレートが存在したとみなす閾値を決める必要がある 41 これらの面倒なところを省力化するためのサービスとして ExMachina を開発 テスト実装者 テストを実装したい だけなのに・・・
- 43. ExMachinaについて 42
- 44. ExMachinaについて • 画像処理を使ったテストの実装を省力化するために、 ExMachinaは以下の機能を提供する – テスト用イメージアセットの管理機能 – デバイス画面の画像からページを判定する機能 43
- 45. イメージアセットの管理方法 • ExMachinaはイメージアセットをアプリのペー ジ単位で、ページ情報という形で管理する • ページ情報はページのスクリーショット画像に 加え、そのページを一意に特定するための識別 子(Identifier)と、そのページにおいてどのよう な操作が可能なのかを表す情報(Action)をセッ トで管理する • ページ情報はExMachinaのWebUIから視覚的に 定義することができる 44
- 46. ページ情報の定義方法 45
- 48. ページ判定機能を使ったテストシナリオの自動化の流れ 47 ページ情報 ExMachina Client テスト シナリオ ExMachina テストプログラム{ name: “トップページ”, actions: [ UIの座標・・・ ] } ①“カード召喚” ボタンをタップ ④ 画 像 処 理 ②現在のデバイス画面 の画像取得 ③デバイス画面の 画像を送信 ⑦取得した“カード召喚” ボタンの座標をタップ ⑤該当したページの ページ情報を返信 ⑥ ”カード召喚”ボタンが 存在するページか確認 / ボタンの座標を把握
- 51. クローラへの応用 50
- 55. クローリング結果の比較 54
- 57. ExMachinaのまとめ • ExMachinaは – アプリのページ情報を管理する – デバイス画面の画像を受け取り、該当するページの セマンティックな情報を返す • ExMachinaを使うことで – テストプログラムは画像処理を意識しなくて済む – ゲームアプリに対してもVisual Regressionが行える 56
- 58. ExMachinaの課題 • ページ情報登録の省力化 – WebUIから簡単に定義はできるが、登録するページが数百ペー ジとかになってくると物量的に登録作業が大変 • 複数解像度への対応 – ゲーム画面はデバイスの解像度に合わせて単純に伸縮されるわ けではないので、複数解像度のデバイスでページを判定したい 場合は、解像度ごとにページ情報を登録する必要がある 57
- 59. 課題への対応方法 • 以下のような機械学習の手法を利用してページ情報の登 録を省力化・半自動化できないか検討中 – Semantic Segmentation – pix2code 58
- 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. 課題への対応方法(Semantic Segmentation) 60 • ネイティブアプリや、WebアプリはUIの構成などセマンティックな情報が取得可能 • モバイル向けWebページやアプリのページを巡回して生成した学習データを元に、 ゲーム画面のUI要素をセグメンテーションできるネットワークを生成できないか検 討している 教師データ ・・・ input 期待するoutput
- 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. まとめ • Webアプリに対しては、Visual Regressionに使えるクロー ラの開発を行っています • ゲームアプリに対しては、画像処理を使ったUIテスト自動化 を省力化するために、ページ情報という単位でイメージア セットを管理し、ページを判定するサービスを作りました • それぞれの取り組みの課題を解決するために機械学習の活用 を検討しています 62