Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Visual Regression

Sponsored PRs Welcome license

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

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

Supported by the Spice Program

About

Test websites for visual regressions on different viewport sizes using Puppeteer

Resources

License

Releases

No releases published

Packages

No packages published