Tech Tips

  1. 要素技術
  2. 77 view

[image_match][Ruby]Webページのデザインテストの自動化

Contents

Background

会社でWebページに設置するウィジェットの開発をしているときに、
目検でチェックをしていて嫌になったから
image_matchっていうgemを作った。
せっかく作ったから、この記事で使い方を紹介してみる。

Environment

  • OS
    • Linux 2.6.32-279.el6.x86_64 #1 SMP Fri Jun 22 12:19:21 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux
  • Ruby
    • 1.9.3
  • OpenCV
    • >=2.4.6

Overview

このgemは今のところ以下の4つの関数を提供している。
  1. perfect_match
    • 対象の画像が用意していた画像と完全に一致するかどうか。
  2. perfect_match_template
    • 対象の画像の中の一部が用意していたテンプレート画像と完全に一致するかどうか。
  3. fuzzy_match_template
    • 用意していたテンプレート画像と似ている箇所が対象の画像の中にあるかどうか。
  4. match_template_ignore_size
    • 対象の画像の中の一部が、サイズの違いを無視した場合に、用意していたテンプレート画像と一致するかどうか。
このgemには今後随時、機能を追加する予定である。
特に会社で開発している広告ウィジェットのテストにはこれらの機能では不十分な気がするから。 このgemを使う場合は基本的には以下の流れに沿う形になるはず。
  1. 画像を用意する。
  2. このgemを使ってテストコードを書く。
  3. テストコードを実行する。
このgemは特定のフレームに依存しないので、rspecでもcucumberでもturnipでも好きなフレームワークが使える。 以下のサンプルでは、特にフレームワークを使わないで書いてみる。
というのも、フレームワークを使った場合の利用方法は一目瞭然だから。

Sample

1. 画像を用意する。

google-logo
以下のGoogleのロゴ画像を用意してみた。

2. このGemを使ってテストコードを書く。

├── Gemfile
├── google-logo.jpg
└── main.rb

0 directories, 3 files

Gemfile

ここではWebページのスクリーンショットを撮るために、”capybara”と”poltergeist”を使う。
Selenium RCを使えば、IE・Firefox・Chrome・Android・iOSとかでもスクリーンショットを撮ってテストできる。
source 'https://rubygems.org'

gem 'capybara'
gem 'poltergeist'
gem 'image_match'

main.rb

require 'capybara'
require 'capybara/poltergeist'
require 'image_match'
include ImageMatch

# Get current google web page image
url = 'http://google.com/'
Capybara.javascript_driver = :poltergeist
Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new app, js_errors: false
end
Capybara.default_selector = :xpath

session = Capybara::Session.new(:poltergeist)
session.driver.headers = {'User-Agent' => "Mozilla/5.0 (Macintosh; Intel Mac OS X)"}
session.visit(url)

session.save_screenshot('screenshot.png', full: true)

# Compare logo (output match result image)
# When you write perfect_match_template('./screenshot.png', './google-logo.jpg'), nothing outputting result image
if perfect_match_template('./screenshot.png', './google-logo.jpg', 0.9, true)
  puts "Find!"
else
  puts "Nothing..."
end

ハイライトされているところがこのgemに関係するところ。
requireとinclude入れてたったの3行。
perfect_match_template関数を使っているけど、
この関数の注意点としてはサイズが少しでも違うとマッチしない可能性があること。
その場合は、用意する画像のサイズを調整するか、
match_template_ignore_sizeを利用してください。

3. Run

$ bundle install --path=.bundle
$ bundle exec ruby main.rb
Nothing...
google-log2
あれ?なんでマッチしないんだ?
なるほど。今日は与謝野晶子さん用のロゴになっているのね。
じゃあ違う日に試した結果を以下に出してみる。
$ bundle exec ruby main.rb
Find!
1416131348_match_result

うん。期待通り。 おそらく、今は基本的には”complete_match_template”か”match_template_ignore_size”.の2つの機能しか使わないと思う。 他にも、目検でのテストをなくすために作っているものがあるから、
完成したら公開してみたい。

要素技術の最近記事

  1. Udacity Self-Driving Car Engineer Nanodegree …

  2. TF-Agents で独自の環境を利用する方法

  3. Amazon Rekognition Video を使って動画内の顔検出と境界ボックスの描…

  4. [触ってみた]Microsoft Quantum Development Kit

  5. Tensorboardを使ってニューラルネットワークと学習の状況を可視化する

関連記事

PAGE TOP