JvM Visual Regression Tester

Automates visual regression testing of our projects by comparing DOM screenshots over time. Convinience wrapper around BackstopJS.

Getting started

Install

npm i @jungvonmatt/visual-test

Usage

Initialize project

visual-test reference

Run tests

visual-test test

Approve tests

visual-test approve

You can optionally add query parameters to the requests with the --query argument

visual-test test --query 'optimize-css=1&debug=true'

You can specify a custom config directory using the --config-dir option

visual-test test --config-dir ~/.my-visualtest-directory

Or just call with the url to the sitemap

visual-test test https://www.jvm.com/sitemap.xml

Add projects

To add a projects you need to place a config file in one of the following locations:

• In a custom path specified by --config-dir
• In the current working directory

Name: project.visualtest.config.js

Configuration

Config values

| Key | Description | | ------------ | ------------------------------------------------------------- | | name | Project name | | environments | Environment config. See below. | | urls | Array with urls or async function returning the urls to test. |

Environment Config values

| Key | Description | | ------- | --------------------------------- | | name | Environment name | | host | Hostname | | user | RFC2617 basic authorization: user | | | | pass | RFC2617 basic authorization: pass | | base | Base directory on host | | sitemap | Path to sitemap |

Examples

Minimal example

module.exports = {
  environments: [
    {
      name: 'Production',
      host: 'https://www.example.com',
      sitemap: '/sitemap.xml',
    },
  ],
};

Static urls

module.exports = {
  environments: [
    {
      name: 'Production',
      host: 'https://www.example.com',
    },
  ],
  urls: ['index.html', 'imprint.html'],
};

With urls function

module.exports = {
  environments: [
    {
      name: 'PREVIEW (EN)',
      host: 'http://preview.example.com',
      base: '/en',
      user: '',
      pass: '',
      sitemap: '/en/sitemap.xml',
    },
    {
      name: 'PROD',
      host: 'https://www.example.com',
      sitemap: '/sitemap.xml',
    },
  ],
  urls: async (environment) => {
    // The urls from the sitemap are available here
    const { urls } = environment || {};
    return urls.filter((url) => /regex/.test(url));
  },
};

Can I contribute?

Of course. We appreciate all of our contributors and welcome contributions to improve the project further. If you're uncertain whether an addition should be made, feel free to open up an issue and we can discuss it.

License

MIT