Automated visual testing - Easy snapshot testing with Puppeteer |
Subscribe me on new discussions

Automated visual testing - Easy snapshot testing with Puppeteer

Views: 59

If you haven't read our quick tutorial about Puppeteer it's time to do this right now with the next link:

Next step will be to write a fully automated visual test with Puppeteer.

We have a script that simply does a screenshot of a web page with different viewport sizes. The source is here:

Let's think about how do we want to organize the whole test. So, we want:

  • To test several pages
  • To have an ability to add new pages simply to test
  • To store the verified screenshots
  • To compare new screenshots of the pages with a previously verified

Let's do it

Let's create a config file where we will store all the links we want to check. I will give it the name config.js.

Do not forget to include modules

const fs = require('fs'); // module to work with file system

const { imgDiff } = require('img-diff-js'); // module to compare images

This is how we will read a config file.

let urls = JSON.parse(fs.readFileSync('config.json')); // Read config file

Now we will put all view port sizes that we want to test in array:

let viewPorts = [
    { width: 1024, height: 768 },
    { width: 800, height: 600 },
    { width: 640, height: 480 },

Let's store all screenshots in separate folder screenshots

Lets' do the next logic of the script:

  • We will go through the all URLs from config file
  • Each URL we will test on every viewport size required
  • We will open every URL, setup viewport and do a screenshot
  • Every screenshot will be considered as a verified screenshot if it was created the first time
  • Every screenshot will be compared with previously created verified screenshot and result will be given as SUCCESS if there were no changes and FAILED if some changes were found

The whole script could be found in the git repository:


First runs show us that all screenshots considered as verified. Because this is the first run and we don't have any screenshots yet.

The next run will show us that screenshots were compared to previously created. No errors found!

Let's modify one verified screenshot with an editor program and check results after this. I have moved the Login menu left from the verified screenshot (all testers page, view port 1024x768), imagine that it was a change in CSS files.

This is our result. Notice that diff count is 579, it means 579 pixels were changed. So, something goes wrong.

Let's check diff file that was stored in the screenshots folder. This file shows us the difference between verified screenshot and a new one.

From the diff file, you will see the difference between red and yellow colors. It is very simple to see it. This is how the change were detected.

This is how we can start visual testing automation with Puppeteer. You can use our script to start automated visual testing:

Karma: {{ total }}
Published: 4 months ago by QAProvider Team