Newton's Programmatic Measurements

    visual-regression

    3.0.0 • Public • Published

    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

    Install

    npm i visual-regression

    DownloadsWeekly Downloads

    0

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    672 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar