Skip to content
Automated UI Verification with perceptual diffs (pdiff) in JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


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.


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!




Borrowed heavily from resemble.js


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

Bitdeli Badge alpha

You can’t perform that action at this time.