[image_match][Ruby]Automation of design test on a web page

Background

When I develop a web widget in work, I used to hate checking design with my eye.
So, I developed image_match to check it without my eye.
I’ll introduce it here.

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

The gem provides following 4 functions currently:

1. perfect_match
   • To check whether the web page’s image is same as prepared image or not.
2. perfect_match_template
   • To check whether a part of the web page’s image is same as prepared image(template) or not.
3. fuzzy_match_template
   • To check whether a part of the web page’s image is seems to be close with prepared image(template) or not.
4. match_template_ignore_size
   • To check whether a part of the web page’s image is same as prepared image(template) or not(ignoring size difference).

I’ll add more functions in the future to use it for ad parts. You should follow the flow like below to use this gem:

1. Prepare expecting image
2. Write test code with this gem
3. Run

You can use any testing framework. rspec, cucumber, turnip and so on. I’ll introduce how to use this gem without testing framework because it’s very simple and you will be able to write test code with this gem soon after read following sample code.

Sample

1. Prepare expecting image

I prepared following logo image.

2. Write test code with this gem

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

0 directories, 3 files

Gemfile

I’ll use “capybara” and “poltergeist” to take screen shot.
If you use selenium rc, you can take screen shot with many type of browsers.

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

Highlighted parts are related this gem.
Only 3 lines including ‘require’ and ‘include’!
Note that when prepared image’s size is different from logo image of screen shot, some times this script’s output is “Nothing…”.
If you meet the situation, please arrange the prepared image’s size or use “match_template_ignore_size”.

3. Run

$ bundle install --path=.bundle
$ bundle exec ruby main.rb
Nothing...

What!? Oh, I see. Today is a Japanese person’s aniversary. So today’s google logo is following.
OKay. I’ll try again another day. Following is another day’s result.

$ bundle exec ruby main.rb
Find!

Yes! I thing most of you will use “complete_match_template” or “match_template_ignore_size”. I’ll do my best to eliminate checking web page desing with one’s eyes.