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:

``javascript
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:

`javascript
"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

!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