分割した Web ページキャプチャ画像を用いた画像差分検証手法の提案 株式会社ネクスト 池之上あかり もくじ 1. 画像差分テストとは 2. 弊社における画像差分テスト事例 導入経緯 画像差分テスト Ver.1 画像差分テスト Ver.2 3. まとめ 2 もくじ 1. 画像差分テストとは 2. 弊社における画像差分テスト事例 導入経緯 画像差分テスト Ver.1 画像差分テスト Ver.2 論文の内容 3. まとめ もくじ 1. 画像差分テストとは 2. 弊社における画像差テスト事例 導入経緯 画像差分テスト Ver.1 画像差分テスト Ver.2 3. まとめ 3 4 1
画像の差分とは 対応するピクセルにおける RGB 値の差 (R,G,B)= (0,0,0) (226,107,10) (226,107,10) 画像差分テストとは - = 5 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 6 画像差分テストとは キャプチャ画像の差分から変化箇所を検知する - = 間違い探しの自動化 差分箇所 引かれる方の画像上に差分箇所をハイライト 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 7 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 8 2
もくじ 1. 画像差分テストとは 2. 弊社における画像差分テスト事例 導入経緯 画像差分テスト Ver.1 画像差分テスト Ver.2 導入経緯 3. まとめ 9 10 弊社サービスの紹介 テスト対象 物件数 No.1 の 不動産 住宅情報サイト 物件数 No.1 の 不動産 住宅情報サイト 視覚情報 11 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 12 3
テスト対象の性質 テスト対象の性質 不動産 住宅情報は 正確でなければならない 情報の信頼性を損なう 欠落してはいけない 法律で表示が義務づけられた情報が多い 見づらくしてはいけない 建物自体のイメージを損なう 不動産 住宅情報は 正確でなければならない 情報の信頼性を損なう 見た目大事! 欠落してはいけない 法律で表示が義務づけられた情報が多い 見づらくしてはいけない 建物自体のイメージを損なう 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 13 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 14 導入前のテスト Selenium による自動回帰テスト 物件名が であること 画像のパスが正しいこと画像サイズが 10 10 であること Selenium テストの欠点 NG 理由の調査が大変 見た目の変化内容がわかりにくい NoSuchElementException: Message: 'Message: u 'Unable to locate element: {"method":"xpath","selector":"./descendant::p[contains(@class, 'inquirebtn ')][1]/a"} 大量のメンテナンスが発生 主に XPath の修正 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 15 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 16 4
Selenium テストの欠点 Selenium による自動回帰テスト NG 理由の調査が大変 見た目の変化内容がわかりにくい辛い... NoSuchElementException: Message: 'Message: u 'Unable to locate element: {"method":"xpath","selector":"./descendant::p[contains(@class, 'inquirebtn ')][1]/a"} 大量のメンテナンスが発生 主に XPath の修正 画像差分テストの登場 huxley* 2013 年 11 月公開 Facebook 製 OSS 機能 手動操作を記録 Selenium でブラウザキャプチャ画像を撮影 前回撮影画像との画像差分をとる * https://github.com/facebookarchive/huxley 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 17 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 18 画像差分テストの登場 huxley* Facebook 製 OSS 機能 そうだ画像差分テスト やろう Selenium でブラウザキャプチャ画像を撮影 前回撮影画像との画像差分をとる 画像差分テストの登場 huxley* Facebook 製 OSS 機能 なんか合わない! Selenium でブラウザキャプチャ画像を撮影 前回撮影画像との画像差分をとる * https://github.com/facebookarchive/huxley * https://github.com/facebookarchive/huxley 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 19 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 20 5
合わない理由 テストシナリオは手動で操作をキャプチャして作る URL を開いては閉じ 開いては閉じ ハイライト画像が出力されるだけ 画像をいちいち開かなくてはいけない 合わない理由 テストシナリオは手動で操作をキャプチャして作る URL を開いては閉じ 開いては閉じ ハイライト画像が出力されるだけめんどくさい 画像をいちいち開かなくてはいけない 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 21 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 22 画像差分テスト ver.1 の実装を開始 画像差分テスト ver.1 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 23 24 6
システム概要 画像差分算出 - システム概要 レポート出力 - テスト対象 URL リスト Selenium WebDriver でキャプチャ画像撮影 前回撮影した画像との差分を計算 差分があれば差分画像出力 差分ありの URL だけリスト化 URL ごとに新旧画像と差分画像を並べたレポートを作成 TOP : http://www.homes.co.jp/ List : http://www.homes.co.jp/x/ Detail : http://www.homes.co.jp/y/ TOP_latest.bmp TOP_Diff.bmp TOP_NEW.bmp List_Diff.bmp 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 25 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 26 テスト結果確認 メンテナンス レポートみるだけ! 変化箇所が不具合かどうかは確認者が判断する ほぼ要らない! 変化箇所が不具合だった場合は最新の画像を削除 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 27 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 28 7
さらに良いこと 画像差分テスト ver.1 の問題点 誰でもテスト結果確認できる Selenium のようにエラーログを理解する必要なし 全検出 ほぼ誰でもメンテナンスできる ファイル削除できれば OK - = バナー差込による枠のレイアウトズレ 差分箇所 必要な情報以外も差分として検知 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 29 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 30 画像差分テスト ver.1 の問題点 全検出 不具合を見逃すリスクがある - = 画像差分テスト ver.2 の実装を開始 バナー差込による枠のレイアウトズレ 差分箇所 必要な情報以外も差分として検知 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 31 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 32 8
解決手法 Web サイトの特徴 - Web サイトは関連情報を縁取りすることが多い * * 坂本貴史, IA シンキング Web 制作者 担当者のための IA 思考術, 宮崎綾子, ワークスコーポレーション, 2011. 画像差分テスト ver.2 33 34 解決手法 Web サイトの特徴 - 解決手法 Web サイトは関連情報を縁取りすることが多い * * 坂本貴史, IA シンキング Web 制作者 担当者のための IA 思考術, 宮崎綾子, ワークスコーポレーション, 2011. 枠 ( パーツ ) ごとに差分計算する メニュー 物件情報物件名 住所 築年数 キャンペーン広告 メニュー 物件情報物件名 住所 築年数 キャンペーン広告 昨日 メニュー 広告 物件情報物件名 住所 築年数 キャンペーン広告 今日 画像 35 36 9
解決手法 処理手順 分割 - 出現 消失したパーツは差分画像と別に出力 メニュー 物件情報物件名 住所 築年数 キャンペーン広告 メニュー 広告 昨日なかった物件情報! 物件名 住所 築年数 - 出現 - キャンペーン広告 撮影したキャプチャ画像を枠 ( パーツ ) ごとに分割する 差分に使用する 2 枚ともそれぞれ分割する 境界線を検出 ( ウォーターシェッド法 ) して切り取る 昨日 今日 37 38 処理手順 パーツの出現 消失検知 - 解決手法 差分検出 - 分割したパーツごとに対応する画像を探す 特徴点 (SHIFT) を利用して対応付けを行う 特徴点 画像の輪郭のうち特徴的なものを数値的に検出した点 出現 消失判定 どのパーツも対応しない場合は差分画像と別に出力 同じパーツの位置を探査 新規に撮影した画像の各パーツが前回撮影画像のどこに存在するか テンプレートマッチングを使用 出現 消失したパーツは探査を除外 パーツごとに重ねあわせて差分を計算 出現枠 39 40 10
検出結果 ( 差分画像のみ ) ver.1 vs ver.2- 検出結果 ( 差分画像のみ ) ver.1 vs ver.2- 一目瞭然! ver.1 ver.2 Ver.1 Ver.2 41 42 画像差分テスト ver.2 の問題点 画像差分テスト ver.2 の課題 誤検知 出現パーツ 特徴点が少ないパーツが苦手 点の個数が少ないと誤差が大きい - = 消失パーツ 差分箇所 前後どちらにも存在するパーツを消失 出現と検知 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 43 43 特徴点が少ないパーツ 細かい シンプルほぼ文字 文字数が少ない 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 44 11
画像差分テスト ver.2 の課題 特徴点が少ないパーツが苦手 点の個数が少ないと誤差が大きい 他の特徴点算出法や手法が必要 精進します 細かい シンプル 特徴点が少ないパーツ ほぼ文字 文字数が少ない 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 45 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 46 もくじ 1. 画像差分テストとは 2. 弊社における画像差テスト事例 導入経緯 画像差分テストver.1 画像差分テストver.2 まとめ まとめ 47 48 12
画像差分テストとは 画像差分テスト ver.1 (R,G,B)= (0,0,0) (226,107,10) (226,107,10) 間違い探しの自動化 - = 対応するピクセルごとに RGB 値の差分をとる 画像の撮影, 差分画像 レポート出力を行うテスト結果確認 メンテナンスが楽 レイアウトズレによる全検知が発生する 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 49 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 50 画像差分テスト ver.2 枠 ( パーツ ) ごとに差分をとる差分計算方法 追加 削除されたパーツは差分画像と別に出力処理が苦手なパーツがある 最後に 画像差分テスト (ver.1 相当 ) に必要なのは2つだけ テスト対象のキャプチャ画像 公開されているツールぜひテスト活動でご活用ください 本書の無断転載 複製を固く禁じます Copyright NEXT Co.,Ltd. All Rights Reserved. 51 51 52 13
すぐに使える画像差分テストツール 画像差分テストについてご意見 ご感想 Web サイト向け ( 画像差分テスト ver.1 と同じ差分計算 ) huxley (facebook) https://github.com/facebookarchive/huxley kobold (yahoo) https://github.com/yahoo/kobold 差分画像作成ツール ImageMagick http://www.imagemagick.org/script/command-line-tools.php # 画像ちゃんをつけてつぶやこう ひきつづきよろしくお願いいたします 53 54 14