diff --git a/README.md b/README.md index 8f4ddda..7205e78 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,10 @@ # Dotdiff -Dotdiff is a very basic wrapper around [perceptual-diff](http://pdiff.sourceforge.net/) which works with both Capybara and RSpec to capture and compare the images with a simple rspec matcher. Which can also hide certain elements via executing javascript for elements which can change with different display suchas username or user specific details. +Dotdiff is a very basic wrapper around [perceptual-diff](http://pdiff.sourceforge.net/) which works with both Capybara and RSpec to capture and compare the images with a simple rspec matcher. + +It is now also possible to snapshot a particular element on the page just by using the standard capybara finders - which once the element is found will query the browser for its dimensions and placement on the page and use that metadata to crop using chunky_png from a full page snapshot. + +It can also hide certain elements via executing javascript for elements which can change with different display suchas username or user specific details, but only for full page screenshots. ## Installation @@ -18,8 +22,10 @@ Or install it yourself as: $ gem install dotdiff + ## Usage +### Dependencies First ensure to install perceptualdiff binary which is available via apt-get and brew or via http://pdiff.sourceforge.net/ In your spec/spec_helper @@ -32,50 +38,44 @@ If you want the rspec_matcher require the following as well require 'dotdiff/rspec_matcher' ``` +### Configuration In an initializer you can configure certain options example shown below within Dotdiff ```ruby DotDiff.configure do |config| config.perceptual_diff_bin = `which perceptualdiff`.strip - config.image_store_path = File.expand_path('../../spec/fixtures/images', __FILE__) - config.js_elements_to_hide = [ - "document.getElementsByClassName('drop-menu-toggle')[0]", - "document.getElementsById('username-title')", - ] - config.failure_image_path = '/home/user/spec_image_failures' - + config.image_store_path = File.join('/home', 'user', 'images') + config.xpath_elements_to_hide = ["id('main')"] + config.failure_image_path = File.join('/home', 'user', 'failure_comparisions') + config.max_wait_time = 2 end ``` -Basic usage in your spec is just the line below; +### Spec usage + +For a full page screenshot you can use the below; ```ruby -expect(page).to match_image('GooglePage', subdir: 'Google') +expect(page).to match_image('HomePage', subdir: 'Normitec') ``` -It does the following; +For a specific element screenshot you can use like so; -It builds the base_image_file location with DotDiff.image_store_path + subdir + filename + .png - -It then checks if that file exists; - - If it doesn't exist it or `resave_base_image` is passed; - - it hides any elements defined in `js_elements_to_hide` - - uses `Capybara::Session#save_screenshot` to create a screenshot - - it then un-hides any elements defined as above - - returns that compare was successfull - -Also if resave_base_image is passed and DotDiff.overwrite_on_resave is false it creates an r2 version so that you can compare with the original or if the file is deleted it will just write the same file. +```ruby +expect(find('#login-form')).to match_image('LoginForm', subdir: 'Normitec') +``` - - If the `base_image_file` exists and resave_base_image is false; - - it hides any elements defined in `js_elements_to_hide` - - uses `Capybara::Session#save_screenshot` to create a screenshot in a tmpdir to compare against the base_image - - runs the command and observes the result - - it then un-hides any elements defined as above - - if failure_image_path is defined it moves the new captured image to that path named as the original file - - returns both the result and stdout failure message +The only difference for the element specific is passing a specific element in the `expect` parameter. -A failure message might look like the following `expected to match image but failed with: FAIL: Images are 120 pixels visibly different` +## Configuration Options +| Config | Description | Example | Default | Required | +|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------|--------------------------------|----------| +| perceptual_diff_bin | Location of the perceptual diff binary file | `which perceptualdiff`.strip | N/A | Yes | +| image_store_path | The root path to store the base images | File.join('/home', 'user','images') | nil | Yes | +| xpath_elements_to_hide | When taking full page screenshots it will hide elements specified that might change each time and re-shows them after the screenshot. It doesn't use this option for taking screenshots of specific elements. | ["id('main')", "//div[contains(@class, 'formy'])[1]"] | [] | No | +| failure_image_path | When a comparison occurs and the perceptual_diff binary returns a failure with the message. It will dump the new image taken for comparison to this directory. If not supplied it will not move the images from the temporary location that it is generated at. | File.join('/home', 'user','failures') | nil | No | +| max_wait_time | This is similar to the Capybara#default_max_wait_time if you have a high value such as 10, as its possible that the global xpath_elements_to_hide might not always exist it will wait the full time - therefore you can drop it for the hiding and showing of the elements. In this example it would wait up 20 seconds in total 10 for hiding and 10 seconds for re-showing - that is if the element isn't even going to be present on the page. | 2 | Capybara#default_max_wait_time | No | ## Contributing @@ -86,9 +86,8 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/jnormi The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT). -## Whats left to do +## Whats still to do Its not fully completed yet but is usable in its current state. - Improve the message output to extract just the fail line - Add an integration spec - - Support multi browser resolutions and handle in the file name diff --git a/lib/dotdiff/version.rb b/lib/dotdiff/version.rb index 3284740..a81b562 100644 --- a/lib/dotdiff/version.rb +++ b/lib/dotdiff/version.rb @@ -1,3 +1,3 @@ module DotDiff - VERSION = "0.3.1" + VERSION = "1.0.0" end