Skip to content
This repository has been archived by the owner on Aug 16, 2023. It is now read-only.

GH-9 added dynamic screenshot folder #11

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
node_modules/*
.DS_Store
7 changes: 4 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,14 @@ Niffy is built on [Nightmare](https://github.com/segmentio/nightmare) and used i
To create a new Niffy differ:

```js
let niffy = new Niffy(basehost, testhost, nightmareOptions);
let niffy = new Niffy(basehost, testhost, options);
```

* `basehost` is the url that is assumed "good"
* `testhost` is the url that you are comparing to the base
* `nightmareOptions` can be seen [here in the Nightmare docs](https://github.com/segmentio/nightmare#nightmareoptions)
* `.threshold` is the maximum percentage difference for a passing test (default: 0.2%)
* `options` aside from the few specific niffy options, all nightmare options can be used. They can be seen [here in the Nightmare docs](https://github.com/segmentio/nightmare#nightmareoptions)
* `pngPath` is the folder the screenshots will be saved. It defaults to `./niffy`
* `threshold` is the maximum percentage difference for a passing test (default: 0.2%)

### .test(url[, fn])
This method instructs niffy to go to a `url` (and optionally take additional actions like clicking, typing or checkboxing via the `fn` argument), and test `basehost` vs. `testhost` screenshots for pixel differences, and output the diff-highlight image. Typically you'll use `.test(url, fn)` in the body of a mocha test, like this:
Expand Down
60 changes: 33 additions & 27 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ var thunkify = require('thunkify');
var defaults = require('defaults');
var sprintf = require('sprintf-js').sprintf;
var diff = require('./lib/diff');
var path = require('path');

/**
* Export `Niffy`
Expand All @@ -25,8 +26,9 @@ module.exports = Niffy;

function Niffy(base, test, options) {
if (!(this instanceof Niffy)) return new Niffy(base, test, options);
options = defaults(options, { show: false, width: 1400, height: 1000, threshold: .2 });
options = defaults(options, { show: false, width: 1400, height: 1000, threshold: .2, pngPath: './niffy' });
this.nightmare = new Nightmare(options);
this.pngPath = options.pngPath;
this.basehost = base;
this.testhost = test;
this.starts = {};
Expand All @@ -37,12 +39,12 @@ function Niffy(base, test, options) {
/**
* Generate a test function.
*
* @param {String} path
* @param {String} pngPath
* @param {Function} fn
*/

Niffy.prototype.test = function* (path, fn) {
var diff = yield this.capture(path, fn);
Niffy.prototype.test = function* (pngPath, fn) {
var diff = yield this.capture(pngPath, fn);
var pct = '' + Math.floor(diff.percentage * 10000) / 10000 + '%';
var failMessage = sprintf('%s different, open %s', pct, diff.diffFilepath);
var absolutePct = Math.abs(diff.percentage);
Expand All @@ -54,27 +56,27 @@ Niffy.prototype.test = function* (path, fn) {
/**
* goto a specific path and optionally take some actions.
*
* @param {String} path
* @param {String} pngPath
* @param {Function} fn
*/

Niffy.prototype.goto = function* (path, fn) {
Niffy.prototype.goto = function* (pngPath, fn) {
this.startProfile('goto');
yield this.gotoHost(this.basehost, path, fn);
yield this.gotoHost(this.testhost, path, fn);
yield this.gotoHost(this.basehost, pngPath, fn);
yield this.gotoHost(this.testhost, pngPath, fn);
this.stopProfile('goto');
};

/**
* goto for a specific host, optionally take some actions.
*
* @param {String} host
* @param {String} path
* @param {String} pngPath
* @param {Function} fn
*/

Niffy.prototype.gotoHost = function* (host, path, fn) {
yield this.nightmare.goto(host + path);
Niffy.prototype.gotoHost = function* (host, pngPath, fn) {
yield this.nightmare.goto(host + pngPath);
if (fn) {
yield timeout(1000);
yield fn(this.nightmare);
Expand All @@ -85,27 +87,27 @@ Niffy.prototype.gotoHost = function* (host, path, fn) {
/**
* capture a specific path after optionally taking some actions.
*
* @param {String} path
* @param {String} pngPath
* @param {Function} fn
*/

Niffy.prototype.capture = function* (path, fn) {
Niffy.prototype.capture = function* (pngPath, fn) {

/**
* Capture the screenshots.
*/

yield this.captureHost('base', this.basehost, path, fn);
yield this.captureHost('test', this.testhost, path, fn);
yield this.captureHost('base', this.basehost, pngPath, fn);
yield this.captureHost('test', this.testhost, pngPath, fn);

/**
* Run the diff calculation.
*/

this.startProfile('diff');
var pathA = imgfilepath('base', path);
var pathB = imgfilepath('test', path);
var pathDiff = imgfilepath('diff', path);
var pathA = this.imgfilepath('base', pngPath);
var pathB = this.imgfilepath('test', pngPath);
var pathDiff = this.imgfilepath('diff', pngPath);
var result = yield diff(pathA, pathB, pathDiff);
this.stopProfile('diff');

Expand All @@ -114,7 +116,7 @@ Niffy.prototype.capture = function* (path, fn) {
*/

result.percentage = result.differences / result.total * 100;
result.diffFilepath = imgfilepath('diff', path);
result.diffFilepath = this.imgfilepath('diff', pngPath);
return result;
};

Expand All @@ -123,18 +125,18 @@ Niffy.prototype.capture = function* (path, fn) {
*
* @param {String} name
* @param {String} host
* @param {String} path
* @param {String} pngPath
* @param {Function} fn
*/

Niffy.prototype.captureHost = function* (name, host, path, fn) {
Niffy.prototype.captureHost = function* (name, host, pngPath, fn) {

this.startProfile('goto');
yield this.gotoHost(host, path, fn);
yield this.gotoHost(host, pngPath, fn);
this.stopProfile('goto');

this.startProfile('capture');
yield this.nightmare.wait(1000).screenshot(imgfilepath(name, path));
yield this.nightmare.wait(1000).screenshot(this.imgfilepath(name, pngPath));
this.stopProfile('capture');
yield timeout(250);
};
Expand Down Expand Up @@ -181,11 +183,15 @@ Niffy.prototype.stopProfile = function (name) {
/**
* Utils
*/

function imgfilepath(name, path) {
var filepath = '/tmp/niffy' + path;
Niffy.prototype.imgfilepath = function (name, pngPath) {
var filepath = this.pngPath + pngPath;
if (filepath.slice(-1) !== '/') filepath += '/';
mkdirp(filepath);
if (filepath[0] === '.') {
filepath = path.join( __dirname, filepath.slice(1));
}
mkdirp(filepath, function (err) {
if (err) console.error(err.toString());
});
return (filepath + name + '.png');
}

Expand Down
1 change: 0 additions & 1 deletion lib/diff.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ module.exports = diff;
*/

function* diff(pathA, pathB, pathDiff) {

debug('starting img diffing %s', new Date());

var imgA = yield thunkify(readPNG)(pathA);
Expand Down