Differencify
Regression Testing suite!
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 |
---|---|
![]() |
![]() |
Note: Differencify uses async/await and targets Node v7.6.0 or greater
Install the module:
npm install differencify
import Differencify from 'differencify';
const differencify = new Differencify(GlobalOptions);
Differencify matches Puppeteer's API completely. Look at API.md for more details.
(async () => {
const result = await differencify
.init(TestOptions)
.launch()
.newPage()
.setViewport({ width: 1600, height: 1200 })
.goto('https://github.com/NimaSoroush/differencify')
.wait(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.wait(1000);
const image = await page.screenshot();
const result = await page.toMatchSnapshot(image)
await page.close();
await target.close();
console.log(result); // Prints true or false
})();
See more examples here
Only need to wrap your steps into it()
function
import Differencify from 'differencify';
const differencify = new Differencify();
describe('tests differencify', () => {
it('validate github page appear correctly', async () => {
await differencify
.init()
.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.
Same way as Jest snapshots testing, to update the snapshots, run jest with --updateSnapshot
or -u
argument.
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
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 });
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();
})();
See API.md for full list of API calls
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 |
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 |
See API.md for full list of API calls and examples
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