Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


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


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


Automated UI Verification with perceptual diffs (pdiff) in JavaScript







No packages published