Visual regression testing tool
npm install 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.).
- 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",
- 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
Install dependencies: yarn
Run tests: npm test
//TODO: Automate this process
- Make the changes and test them
- Bump the version in package.jsonnpm run build
- Run the build: npm publish`
- Publish:
This project is sponsored by Futurice's Open Source Sponsorship program
