/nilal

Image Capturing/Assertion at element level for web regression tests

Primary LanguageRubyApache License 2.0Apache-2.0

Nilal

Dependency Status Build Status

Captures images of a particular web element and assert it against the expected image, and all you have to learn extra, is a single assert statement. Thus making it the simplest yet powerful visual regression testing tools.

Example

# In your capybara test

# Asserting a graph in page
find('.trend_chart').should match_image expected_report_image

# Assert layout/CSS Styling
find('.analysis_table').should match_image expected_table_image

Key Benefits

There are lot of tools out there to do visual regression, then why a yet another one.

  1. Seamlessly integrates with your existing regression test suite. No need to set up a seperate suite
  2. Just the image of the element under validation is captured and asserted, unlike other tools where the full page captured. This brings in a sea of advantages.
  3. Avoid test failures, due to change in elements unrelated to the test
  4. Reduced test run time, since we need not process a large image of the whole page.
  5. Avoid updating expected reference image when there is a change unrelated to test
  6. Test runs in a real browser (Firefox supported now, Chrome & IE in progress), providing a real time feedback, rather than virtual headless browsers
  7. Unlike other toos, there is no need of any external dependencies like pdiff or ImageMagic. Chunky_Png is used here.

Usage

#Gemfile
gem 'nilal'

###Cucumber

# In env.rb
require 'nilal'
World(Nilal::Capybara)

firefox_profile = Selenium::WebDriver::Firefox::Profile.new
firefox_profile.add_extension File.join(Gem::Specification.find_by_name("nilal").gem_dir,"/lib/nilal/nilal.xpi")

Capybara.register_driver :selenium do |app|
  Capybara::Selenium::Driver.new(app, :browser => :firefox, :profile => firefox_profile)
end

Generating expected reference image

  1. Create a folder under 'feature' called 'images'.
  2. First time, run your test without the reference image, test would fail, yet image of the expected element would be captured in 'tmp/capybara' folder.
  3. Copy the image into your 'feature/images' folder. Commit it as part of your test source code.
  4. Done. Now your tests will run, anywhere your code is available.

##ToDo

  1. Java Api - for assertion
  2. .net Api - for assertion
  3. Chrome extension to capture image
  4. IE extension to capture image