Automated Screenshot Diff: Capture and compare page screenshots

Recommend this page to a friend!
  Info   View files View files (14)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 222 All time: 220 This week: 6Up
Version License JavaScript version Categories
auto-screenshot-diff 0.0.1BSD License1.0Graphics, Testing
Description Author

This object can capture and compare page screenshots.

It can capture screenshots of a given page using CasperJS and then compares the captured images with previous releases of the same page already stored in files.

The object can output whether the images differ or not. Optionally it can omit messages when the images do not differ.

Innovation Award
JavaScript Programming Innovation award nominee
July 2013
Number 5
One way to test Web based user interfaces is to compare the output of Web pages after changes are done to the appliucation.

This object can help capturing the output of Web pages between different application revisions and compare them in order to see if changes are consistent with the expectations.

Manuel Lemos
Picture of Igor Escobar
Name: Igor Escobar <contact>
Classes: 3 packages by
Country: Brazil Brazil
Age: 34
All time rank: 455 in Brazil Brazil
Week rank: 6 Up1 in Brazil Brazil Up
Innovation award
Innovation award
Nominee: 1x

Details
automated-screenshot-diff ========================= [![NPM](https://nodei.co/npm/automated-screenshot-diff.png)](https://nodei.co/npm/automated-screenshot-diff/) Continuous Safe Deployment Made Easy ## Why? Although testing gains evidence in software development every day, it is still rare to find a test strategy that goes beyond functional testing. While layout testing remains forgotten by most, we all have seen cases where the application functionally works just fine but that button somehow got moved 2 pixels do the right or that table cell lost it's alignment and the client won't approved it. Manually testing each screen tends to be error prone since some changes are too small for a QA to notice (specially after seeing dozens of other screens) and it can take weeks depending on the system's size and complexity. Automated Screenshot Diff allows you and your team to extend test coverage up to the application layout, making sure yor're aware of any layout changes whether you use manual or automated testing strategies. ## How it Works? It's simple. All you have to do is generate your system's screenshots with a simple naming convention: Example: ``` SCENARIO_NAME-VERSION.png // login_screen-v1.png ``` Then `automated-screenshot-diff` will scan your screenshot's folder and calculate differences between your pre-production (stage) release and your production release. All generated image diffs will be in the same directory as your screenshots. If you don't known how to gereate those screenshots, take a look at [examples folder](https://github.com/igorescobar/automated-screenshot-diff/tree/master/examples). You can also use this wrapper developed by @lisotton and use it to make easier to generate all those screenshots: [screenshot-crawller](https://github.com/lisotton/screenshot-crawler) ## Dependencies * [Node.JS](http://nodejs.org/) * [Cairo](http://cairographics.org) ## Installation (Mac) ```bash $ xcode-select --install // download and install XQuartz: http://xquartz.macosforge.org/downloads/SL/XQuartz-2.7.5.dmg $ brew install cairo $ export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/X11/lib/pkgconfig $ npm install -g automated-screenshot-diff ``` ## Usage Examples ![Screenshot Example](https://raw.githubusercontent.com/igorescobar/automated-screenshot-diff/master/test/images/login_widget-v1.png) #### To compare release v1 and v2. ```bash $ automated-screenshot-diff compare --previous-release v1 --current-release v2 --source screenshots/ ``` #### To compare release v1 and v2, ignoring not changed scenarios. ```bash $ automated-screenshot-diff compare --previous-release v1 --current-release v2 --source screenshots/ --ignore-not-changed=true ``` #### To compare release v1 and v2, and saving the analysis as HTML. ```bash $ automated-screenshot-diff compare -p v1 -c v2 -s screenshots/ -o html ``` #### To compare release v1 and v2, and saving the analysis as JSON. ```bash $ automated-screenshot-diff compare -p v1 -c v2 -s screenshots/ -o json ``` #### To compare release v1 and v2, and saving the analysis as JSON and HTML. ```bash $ automated-screenshot-diff compare -p v1 -c v2 -s screenshots/ -o json,html ``` ## Demonstration ##### login_widget-v1.png ![login_widget-v1.png](https://raw.githubusercontent.com/igorescobar/automated-screenshot-diff/master/test/images/login_widget-v1.png) ##### login_widget-v2.png ![login_widget-v1.png](https://raw.githubusercontent.com/igorescobar/automated-screenshot-diff/master/test/images/login_widget-v2.png) ##### Perceptual Diff Between login_widget-v1.png and login_widget-v2.png ![login_widget-v1.png](https://raw.githubusercontent.com/igorescobar/automated-screenshot-diff/master/test/images/login_widget-v1-v2-diff.png) ##### HTML Ouput example ![v1-v3-diff.html](https://s11.postimg.org/61k207rhf/Screen_Shot_2016_10_10_at_19_01_42.png)
  Files folder image Files  
File Role Description
Files folder imagebin (1 file)
Files folder imagecoverage (1 file)
Files folder imageexamples (1 file)
Files folder imagelib (2 files)
Files folder imagetest (2 directories)
Accessible without login HTML file coverage.html Doc. Documentation
Accessible without login Plain text file Gruntfile.js Conf. Configuration script
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  bin  
File Role Description
  Accessible without login Plain text file automated-screenshot-diff Data Auxiliary data

  Files folder image Files  /  coverage  
File Role Description
  Accessible without login Plain text file blanket.js Test Unit test script

  Files folder image Files  /  examples  
File Role Description
  Accessible without login Plain text file capturing-screenshots-example.js Example Example script

  Files folder image Files  /  lib  
File Role Description
  Plain text file screenshots.js Class Application script
  Accessible without login HTML file template.handlebars Data Auxiliary data

  Files folder image Files  /  test  
File Role Description
Files folder imageimages (4 files)
Files folder imagelib (1 file)

  Files folder image Files  /  test  /  images  
File Role Description
  Accessible without login Image file login_widget-v1-v2-diff.png Data Auxiliary data
  Accessible without login Image file login_widget-v1.png Data Auxiliary data
  Accessible without login Image file login_widget-v2.png Data Auxiliary data
  Accessible without login HTML file v2-v1-diff.html Doc. Documentation

  Files folder image Files  /  test  /  lib  
File Role Description
  Accessible without login Plain text file screenshots.js Test Unit test script

 Version Control Unique User Downloads Download Rankings  
 100%
Total:222
This week:0
All time:220
This week:6Up