Catch a Glimpse of Perceptual Diff

A visual approach to version testing.

SCENARIO: A developer on a web responsive design project was assigned a sprint story with a new requirement: to add a bit of padding on a text component of a specific page. He updated the CSS file and the page reflected the requirement so he checked in the changes. Using a build with the revision, QA performed regression testing and revealed that there were other pages affected by the change.  The padding addition caused the one-liner text to have an overflow.

The above scene has a familiar echo where simple changes have diverse effects. One recommended approach is visual comparison between versions or, Perceptual Diff.

Perceptual Diff

                                                                    Figure 1: ResembleJS (

Perceptual diff, user interface testing, CSS regression testing, and visual regression testing are all interchangeable terms. They all refer to the comparison of two screenshots of a stable site to act as a baseline with another site that has the changes. By comparing, we would see if there are no changes or if it will highlight the differences found. From the results, we can evaluate if these are expected or not.

There are a number of open source tools that can capture web page screenshots, compare images, and generate visual reports. Below are a couple of examples:

CSSCritic ( This is a lightweight CSS regression tool with an easy setup and configuration. Using RegressionRunner.html file with the registered page under test, it displays:

  • screenshot of the page registered,
  • green/red bar on top to notify if there are no/with differences found
  • and if there are changes, the differences are highlighted in blue
Perceptual Diff 2

Dpxdt ( This is a command line tool that uses YAML file for shard test configuration and a web portal to view/evaluate results.

Perceptual Diff 3

Figure 4: Dpxdt result view that displays images of before, after and with highlighted difference in the middle.

From development phase, this approach is recommended to be part of review workflow to aid in visualizing how big our changes would impact the site. This will also provide considerations to make an educated decision on where to focus manual testing efforts.

UPDATED SCENARIO: Before checking in his updates, the developer executed his test script for perceptual diff. The report highlighted differences on pages other than the page specified on the sprint story. He noted the pages affected and straightened out the CSS file to limit the padding addition to the specific page. After he performed another test and when results concluded as expected, he committed his work. When QA performed regression testing, the result came back all green.

Using quick Perceptual Diff testing can save headaches from unexpected format changes.