differencify

Differencify is a library for visual regression testing

View on GitHub

Differencify
Differencify
Regression Testing suite!


CircleCI npm version Greenkeeper badge Mentioned in Awesome Jest

About

Differencify is a library for visual regression testing by comparing your local changes with reference screenshots of your website. It is built on top of chrome headless using Puppeteer

Reference Local changes
Differencify Differencify

How it works

Differencify

Installation

Note: Differencify uses async/await and targets Node v7.6.0 or greater

Install the module:

npm install differencify

Usage

const Differencify = require('differencify');
const differencify = new Differencify(GlobalOptions);

Differencify matches Puppeteer’s API completely. Look at API.md for more details.

Validate your changes

(async () => {
  const result = await differencify
    .init(TestOptions)
    .launch()
    .newPage()
    .setViewport({ width: 1600, height: 1200 })
    .goto('https://github.com/NimaSoroush/differencify')
    .waitFor(1000)
    .screenshot()
    .toMatchSnapshot()
    .result((result) => {
      console.log(result); // Prints true or false
    })
    .close()
    .end();
  
  // or unchained
  
  const target = differencify.init({ chain: false });
  await target.launch();
  const page = await target.newPage();
  await page.setViewport({ width: 1600, height: 1200 });
  await page.goto('https://github.com/NimaSoroush/differencify');
  await page.waitFor(1000);
  const image = await page.screenshot();
  const result = await target.toMatchSnapshot(image)
  await page.close();
  await target.close();

  console.log(result); // Prints true or false
})();

See more examples here

Usage with JEST

Only need to wrap your steps into it() function

const differencify = new Differencify();
describe('tests differencify', () => {
  it('validate github page appear correctly', async () => {
    await differencify
      .init()
      .launch()
      .newPage()
      .goto('https://github.com/NimaSoroush/differencify')
      .screenshot()
      .toMatchSnapshot()
      .close()
      .end();
  });
});

As you can see, you don’t need to return result as toMatchSnapshot will automatically validate result. See more jest examples here.

Test PASS

Test FAIL

Same way as Jest snapshots testing, to update the snapshots, run jest with --updateSnapshot or -u argument.

Usage with other test frameworks

If you are using other test frameworks you can still validate your tests. Differencify will return true or false by the end of execution. This could be used to assert on. look at the example

To Create/Update reference screenshots, simply set environment variable update=true and run the same code.

> update=true node test.js

Debugging

It is possible to debug your tests execution by passing debug:true as global config in Differencify class. See full list of configs below

const differencify = new Differencify({ debug: true });

Visible mode

By default differencify runs chrome in headless mode. If you want to see browser in non-headless mode set headless:false when launching browser. See more details here

const differencify = new Differencify();
(async () => {
  await differencify
    .init()
    .launch({ headless: false })
    .newPage()
    .goto('https://github.com/NimaSoroush/differencify')
    .screenshot()
    .toMatchSnapshot()
    .close()
    .end();
})();

API

See API.md for full list of API calls

GlobalOptions

Parameter type required description default
debug boolean no Enables console output false
imageSnapshotPath string no Stores reference screenshots in this directory ./differencify_reports
saveDifferencifiedImage boolean no Save differencified image to testReportPath in case of mismatch true
mismatchThreshold integer no Difference tolerance between reference/test image 0.001

TestOptions

Parameter type required description default
testName string no Unique name for your test case test
chain boolean no Whether to chain differencify commands or not. More details on examples true

Steps API

See API.md for full list of API calls and examples

Interested on Docker image!

A Docker base image available for local and CI usage based on this Dockerfile. To see an example look at this Dockerfile

Usage:

FROM nimasoroush/differencify
RUN npm install differencify
...

See examples for usages and CI integration with jest

Visit project Gitter Chat for general Q/A around project

See CONTRIBUTING.md if you want to contribute.

Read this article that explain simple usage of this library

Article about how to use Differencify in Docker

Gist example with vanilla node