protractor-image-comparison

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)
• 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