chameleon

Visual Regression Testing for Front End Applications

Install

npm install @mgrk/chameleon --save-dev

Usage

Chameleon works by passing in a test and a master url of pages you wish to compare visually. For specific parts of a page (such as a component) you may pass in a selector to the options.

For more granular control over the page, the pageControl function will let you control the page before a screenshot is taken.

Example use within a test:

import compare from '@mgrk/chameleon';

...

it('should match vr', async () => {
  const options = {
      testUrl: 'http://google.com',
      masterUrl: 'http://google.com',
      viewport: {
          width: 1024,
          height: 768
      },
      selector: '.A8SBwf', // CSS Selector
      controlPage: async page => {
          // page is a puppeteer page object (https://pptr.dev/#?product=Puppeteer&version=v1.12.2&show=api-class-page)
          await page.type('.gLFyf', 'hello world');
          await page.waitFor(300);
      }
  };

  expect(await compare(options)).toBe(true);
});

An output of the diff image will appear at ./diff.png: