Visual Regression

Test websites for visual regressions on different viewport sizes using Puppeteer.

Inspired by this blog post by Monica Dinculescu.

This tool may be useful to be run right before and right after a deployment that is not supposed to change anything visually (refactoring etc.).

Usage

• Install it: npm i -D visual-regression or yarn add -D visual-regression

After that, you can import it and test for visual regression.

The contents of your test file test/example.test.js could look something like this:

const visualRegression = require('visual-regression');

const viewportConfigs = [
  {
    width: 480,
    height: 800,
  },
  {
    width: 800,
    height: 600,
  },
  {
    width: 1024,
    height: 1024,
  },
];

describe('example.com looks ok', () => {
  const options: RegressionTestOptions = {
    // Let's use a page that is not very likely to change visually over time
    baseUrl: 'http://example.com',
    testPaths: ['/'],
    viewportConfigs,
    launchOptions: { headless: true },
    navigationOptions: { waitUntil: 'networkidle2' },
    screenshotOptions: { fullPage: true },
  };

  visualRegression.run(options);
});

And you would run it with jest:

 "test": "jest",

How it works

• visual-regression uses puppeteer for opening a page and capturing a screenshot of the contents
• It uses jest-image-snapshot for checking that the screenshots match the previous snapshots

Sample output

Development

Install dependencies: yarn

Run tests: npm test

Publishing a new version:

//TODO: Automate this process

• Make the changes and test them
• Bump the version in package.json
• Run the build: npm run build
• Publish: npm publish

Supporters

This project is sponsored by Futurice's Open Source Sponsorship program