/protractor-image-comparison

npm-module to compare images with protractor

Primary LanguageJavaScript

protractor-image-comparison

dependencies Status Build Status Sauce Test Status

NPM

Sauce Test Status

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

TODO

  • Update documentation for Mobile
  • New (mobile friendly) testpage