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.
- 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
- NEW parameter to hide / show scrollbars pnad
- 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.
Install this module locally with the following command:
npm install protractor-image-comparison
Save to dependencies or dev-dependencies:
npm install --save protractor-image-comparisonnpm install --save-dev protractor-image-comparison
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
autoSaveBaseline: true, see docs, the image will automatically be saved into the baselinefolder.
- two comparison methods
- two helper methods
saveElementfor saving images.
- NEW a helper
saveFullPageScreensand a comparison method
checkFullPageScreenfor saving and comparing a fullpage screenshot.
The comparison methods return a result in percentages like
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.
Width and height cannot be negative
It could be that the error
Width and height cannot be negative is thrown. 9 out of 10 times this is related to creating an image of an element that is not in the view. Please be sure you always make sure the element in is in the view before you try to make an image of the element.
Changing the color on an element is not detected by protractor-image-comparison
When using Chrome and using the
chromeOptions.args:['--disable-gpu'] it could be possible that the images can't be compared in the correct way. If you remove this argument all will work again. See here
- Basic logic of
index.jsbased on PixDiff
- Comparison core of
./lib/resemble.jsnode-resemble + ResembleJS
- Update documentation for Mobile
- New (mobile friendly) testpage