visual-regression
Version:
Visual regression testing tool
89 lines (61 loc) • 3.78 kB
Markdown
# Visual Regression
[](http://spiceprogram.org/oss-sponsorship)
[](https://github.com/olpeh/visual-regression/pulls)
[](https://github.com/olpeh/visual-regression/blob/master/LICENSE)
Test websites for visual regressions on different viewport sizes using Puppeteer.
Inspired by [this blog post](https://meowni.ca/posts/2017-puppeteer-tests/) by [Monica Dinculescu](https://github.com/notwaldorf).
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](https://github.com/americanexpress/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](https://futurice.com/) [Open Source Sponsorship program](http://spiceprogram.org/oss-sponsorship)
[](https://spiceprogram.org)