Automated UI Verification with perceptual diffs (pdiff) in JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
js
node_modules
.travis.yml
LICENSE
README.md
package.json

README.md

pdiffy

Automated UI Verification with perceptual diffs (pdiff) with JavaScript

  • Build Status
  • Code Climate

What is pdiffy?

A normal diff between 2 text files enables you to quickly determine 2 things - Whether the two input files are identical, and if not, exactly where the differences lie.

A Perceptual Diff (pdiff) allows you to do the same with 2 image files and quickly identify whether the two images are identical, and highlight areas where the 2 images mismatch. pdiffy does exactly this.

How can this be useful?

Automated UI Verification!

At the end of every testing cycle, someone is always responsible to have a final look even though all the tests have passed and that all functionality works as expected to make sure that everything looks right and is displayed properly.

Once you have a baseline of what looks right, a machine can do it faster and better for you

This tool is intended to provide you with quick immediate feedback when something does not look quite right and highlights it for you.

Example

Take the Google homepage for example. This is what we expect it to look like.

alt text

Suppose for some reason, the 'About Google' link was inadvertently missed. alt text

pdiffy is able to tell you that the images were not identical, and highlight the missing link. Notice the pink highlights around the missing link. alt text

The resulting JSON object also gives you some extra data from the analysis.

{isSameDimensions: true, misMatchPercentage: "0.04", analysisTime: 672, getImageDataUrl: function()}

One step further.. Ignoring certain regions on page for allowed/known differences

Often times when doing visual comparisons on a site, you expect that some areas of the site are going to be different. For example, there might be a current date/time displayed on the page, or an alternating banner.

pdiffy allows you to exclude specific sections of a page from the comparison analysis by marking the section in the known/expected image as a transparent area.

If we compared the following 2 images, one with the missing link we saw above, and another with a transparency over the missing link, alt text alt text We get the following results:

{isSameDimensions: true, misMatchPercentage: "0.00", analysisTime: 672, getImageDataUrl: function()}

The images are now considered identical!

Usage

Reference

Acknowledgement

Borrowed heavily from resemble.js

Note

The recommended image format to use is a lossless PNG to eliminate false positives from compression artifacts.

Bitdeli Badge githalytics.com alpha