Screenshots and Comparing to Masters

Taking snapshots in webdriver is simple.

Page.browser.screenshot.save filename

This is great for debug and we're trying to get this functionality into all of our test html output. That said, there are times where we want to compare the output with a known-good master copy to make sure that nothing has changed. The Watirmark::Screenshot module was designed to handle this case.

require 'watirmark/screenshot'
screenshot = Watirmark::Screenshot.take
master_snapshot = Watirmark::Screenshot::MasterAlbum.new(master, screenshot)
Watirmark::Screenshot.compare_screenshots(master_snapshot, screenshot)
end

A new configuration option 'create_master_snapshots=true' will allow you to generate new masters from the current snapshots (just be sure to visually inspect the images and make sure they are what you expect)

The configuration options 'snapshotwidth=some_value' and 'snapshotheight=some_value' will allow you to specify the size of the window in pixels when the snapshot is taken. Once the snapshot is created the window size will be reverted to its original height and width. Also you can specify multiple widths by setting snapshotwidth=1000,800,500. This will take 3 different screenshots setting the width of the browser to each specification. By default the values snapshotwidth=1000 and snapshotheight=1000.

RSpec Usage

Add a #compare_screenshot method to your runner

RSpec.configure do |runner|
  def compare_screenshot(master)
    raise "No master screenshot defined!" unless master
    screenshot = Watirmark::Screenshot.take
    master_snapshot = Watirmark::Screenshot::MasterAlbum.new(master, screenshot)
    Watirmark::Screenshot.compare_screenshots(master_snapshot, screentshot)
  end
end

In your spec files you can add a call to the method, comparing the current screen contents with a master screenshot

compare_screenshot File.dirname(__FILE__) + "/masters/some-descriptive-filename.png"

Cucumber Usage

Then /^the screenshot should match (.+)/ do |filename|
  if Watirmark::Configuration.instance.compare_screenshots
    master = "features/masters/#{filename.strip.gsub(/\s+/,'_').gsub(/[\/\\]/, '-').downcase}.png"
    screenshot = Watirmark::Screenshot.take
    master_snapshot = Watirmark::Screenshot::MasterAlbum.new(master, screenshot)
    Watirmark::Screenshot.compare_screenshots(master_snapshot, screenshot)
  end
end