How To Find Differences Between Webpages

Table of contents

• Visual Diffs (visual regression)
• Taking screenshots
• Comparing screenshots

Let's say you made some internal improvements to your website, it could be an improvement to loading speed. Such a change should not change the look of your website.

Sometimes changes we make impact unrelated parts of our website without us knowing, eg: a font is no longer applied to the text on our website because we updated our metatags. Such small changes are typically hard to spot.

Visual Diffs (visual regression)

One way to spot subtle website changes is to take screenshots of it before and after the modification and compare them.

For the rest of this article we will look at how to take a screenshot of our site using puppeteer [↗] and then compare them using pixelmatch [↗]

Taking screenshots

There are many options when it comes to taking a screenshot of our webpage. We can use a chrome extension or automate the process using a headless browser like puppeteer [↗].

In this article, we will be using the headless browser option.

Go ahead and create a folder for the project and install puppeteer in there using the command below. You will need NodeJS [↗] and NPM [↗] already installed.

🚫 Wrap Code📋 Copy
$ npm install puppeteer

With puppeteer installed we can go ahead and write a simple NodeJS [↗] script to visit our webpage and take screenshots.

You can name your script whatever, for this tutorial, we will save it as index.js.

🚫 Wrap Code📋 Copy
01: const puppeteer = require("puppeteer");
02: puppeteer
03:   .launch({
04:     defaultViewport: {
05:       width: 1280,
06:       height: 2000,
07:     },
08:   })
09:   .then(async (browser) => {
10:     const page = await browser.newPage();
11:     await page.goto("websiteurl.com");
12:     await page.screenshot({ path: "image1.png" });
13:     await page.setDefaultNavigationTimeout(0); 
14:     await browser.close();
15:   });

The script above takes our website URL on line 11 ie: websiteurl.com and outputs the image under the filename image1.png.

You will need to change the filename to say image2.png for the second screenshot.

Run node index.js in the terminal to execute the above script.

Comparing screenshots

To find the difference between the screenshots we have taken, we will use yet another NodeJS package pixelmatch [↗].

Install this package globally using the command below.

🚫 Wrap Code📋 Copy
$ npm install -g pixelmatch

Next, we will generate an image that layers both screenshots and points out the differences using the command below.

🚫 Wrap Code📋 Copy
$ pixelmatch image1.png image2.png output.png

The above command will output the diff image as output.png.

Within this image, you can spot any changes on your website.

Here is another article you might like 😊 "Diary Of Insights: A Documentation Of My Discoveries"