Skip to content

Commit

Permalink
Update to first major version and update README
Browse files Browse the repository at this point in the history
  • Loading branch information
@jnormington
jnormington committed Mar 26, 2016
1 parent 3e8ed4c commit 5e84aef
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 32 deletions.
61 changes: 30 additions & 31 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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
Expand All @@ -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

Expand All @@ -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
2 changes: 1 addition & 1 deletion lib/dotdiff/version.rb
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
module DotDiff
VERSION = "0.3.1"
VERSION = "1.0.0"
end

0 comments on commit 5e84aef

Please sign in to comment.