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 (desktop AND mobile are now supported)
NEW automatically create a baseline when no baseline is there
disable css animations by default
ignore anti-aliasing differences
compare images by ignoring their colors (do a grayscale comparison)
blockout custom regions during comparison (all)
NEW ignore regions by making them transparent in the base image (all) thanks to tharders
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)

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.

If you run for the first time without having a baseline the check-methods will reject the promise with the following warning:

`Image not found, saving current image as new baseline.`

This means that the current screenshot is saved and you manually need to copy it to your baseline. If you instantiate protractor-image-comparsion with autoSaveBaseline: true, see docs, the image will automatically be saved into the baselinefolder.

protractor-image-comparison provides:

two comparison methods checkScreen and checkElement.
two helper methods saveElement and saveElement for saving images.
NEW a helper saveFullPageScreens and a comparison method checkFullPageScreen for saving and comparing 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
New (mobile friendly) testpage

ipeshev/protractor-image-comparison