Created
August 27, 2014 14:25
-
-
Save richard-flosi/8a5d2e10b6609ab9d06a to your computer and use it in GitHub Desktop.
Nightwatch with Visual Regression testing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// assertions/compareScreenshot.js | |
var resemble = require('resemble'), | |
fs = require('fs'); | |
exports.assertion = function(filename, expected) { | |
var screenshotPath = 'test/screenshots/', | |
baselinePath = screenshotPath + 'baseline/' + filename, | |
resultPath = screenshotPath + 'results/' + filename, | |
diffPath = screenshotPath + 'diffs/' + filename; | |
this.message = 'Unexpected compareScreenshot error.'; | |
this.expected = expected || 0; // misMatchPercentage tolerance default 0% | |
this.command = function(callback) { | |
// create new baseline photo if none exists | |
if (!fs.existsSync(baselinePath)) { | |
console.log('WARNING: Baseline Photo does NOT exist.'); | |
console.log('Creating Baseline Photo from Result: ' + baselinePath); | |
fs.writeFileSync(baselinePath, fs.readFileSync(resultPath)); | |
} | |
resemble | |
.resemble(baselinePath) | |
.compareTo(resultPath) | |
.ignoreAntialiasing() | |
.onComplete(callback); // calls this.value with the result | |
return this; | |
}; | |
this.value = function(result) { | |
var diff = new Buffer(result.getImageDataUrl().replace(/data:image\/png;base64,/,''), 'base64'); | |
fs.writeFileSync(diffPath, diff); | |
return parseFloat(result.misMatchPercentage, 10); // value this.pass is called with | |
}; | |
this.pass = function(value) { | |
var pass = value <= this.expected; | |
if (pass) { | |
this.message = 'Screenshots Matched for ' + filename + | |
' with a tolerance of ' + this.expected + '%.'; | |
} else { | |
this.message = 'Screenshots Match Failed for ' + filename + | |
' with a tolerance of ' + this.expected + '%.\n' + | |
' Screenshots at:\n' + | |
' Baseline: ' + baselinePath + '\n' + | |
' Result: ' + resultPath + '\n' + | |
' Diff: ' + diffPath + '\n' + | |
' Open ' + diffPath + ' to see how the screenshot has changed.\n' + | |
' If the Result Screenshot is correct you can use it to update the Baseline Screenshot and re-run your test:\n' + | |
' cp ' + resultPath + ' ' + baselinePath; | |
} | |
return pass; | |
}; | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// commands/compareScreenshot.js | |
exports.command = function(filename, expected, callback) { | |
var self = this, | |
screenshotPath = 'test/screenshots/', | |
resultPath = screenshotPath + 'results/' + filename; | |
self.saveScreenshot(resultPath, function(response) { | |
self.assert.compareScreenshot(filename, expected, function(result) { | |
if (typeof callback === 'function') { | |
callback.call(self, result); | |
} | |
}); | |
}); | |
return this; // allows the command to be chained. | |
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = { | |
'My Test': function(browser) { | |
browser | |
.url('http://www.google.com') | |
.compareScreenshot('compare-google-screenshot.png') | |
.end(); | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I Used the code for nightwatch-cucumber framework . It worked except that if the images do not match, the message is received correctly but the test case is still marked as passed. how can we fix this? Also has anyone tried visual regression in browserstack? Any pointers would be appreciated.