d3ming / protractor-image-comparison

npm-module to compare images with protractor

protractor-image-comparison

##What can it do? protractor-image-comparison is a lightweight protractor plugin for browsers / mobile browsers / hybrid apps to do image comparison on screens or elements.

You can:

• save or compare screens / elements against a baseline
• NEW: save or compare a fullpage screenshot against a baseline (only browsers are currently supported)
• NEW: disbale css animations by default
• blockout custom regions during comparison (all)
• increase the element dimenisions screenshots (all)
• provide custom iOS and Android offsets for status-/address-/toolbar (mobile only)
• automatically exclude a statusbar during screencomparison (mobile only)
• NEW ignore anti-aliasing differences
• NEW compare images by ignoring their colors (do a grayscale comparison)

Comparison is based on ResembleJS.

##Installation Install this module locally with the following command:

npm install protractor-image-comparison

Save to dependencies or dev-dependencies:

npm install --save protractor-image-comparison
npm install --save-dev protractor-image-comparison

##Usage protractor-image-comparison can be used for:

• desktop browsers (Chrome / Firefox / Safari / Internet Explorer 11 / Microsoft Edge)
• mobile / tablet browsers (Chrome / Safari on emulators / real devices) via Appium
• Hybrid apps via Appium

For more information about mobile testing see the Appium documentation.

protractor-image-comparison provides:

• two comparison methods checkScreen and checkElement.
• two helper methods saveScreen and saveElement for saving images.
• NEW two helper methods saveFullPageScreens and checkFullPageScreen for saving a fullpage screenshot.

The comparison methods return a result in percentages like 0 or 3.94. protractor-image-comparison can work with Jasmine and Cucumber.js. See Examples for or a protractor-config setup, or a Jasmine or a CucumberJS implementation.

More information about the methods can be found here.

Conventions

See conventions.md.

Contribution

See CONTRIBUTING.md.

Credits

• Basic logic of index.js based on PixDiff
• Comparison core of ./lib/resemble.js node-resemble + ResembleJS

TODO

• Update documentation for Mobile
• Update tests
• New (mobile friendly) testpage
• Add debug method
• Add clean method to clean the given screenshotPath before running