nightwatchcss icon indicating copy to clipboard operation
nightwatchcss copied to clipboard

How to compare 2 images?

Open rahuldpi opened this issue 9 years ago • 0 comments

I have a set of images extracted from the layout pdf and I would like to compare it with the screenshot taken from the site. How can I compare them?

// init WebdriverJS
var client = require('webdriverjs');

var nightwatchcss = require('nightwatchcss');

module.exports = {

	"Init nightwatchcss": function (browser) {
		nightwatchcss.init(browser, {
			screenshotRoot: 'screenshot',
			failedComparisonsRoot: 'diffs',
			misMatchTolerance: 0.05,
			screenWidth: [1200]
		});
	},

	"I am a basic test": function (browser) {
		browser
			.url("https://example.com")
			.waitForElementVisible('body', 15000)
			.resizeWindow(1200, 800)
			.execute(function () {
				moveNext(1);
			})
			.pause(5000)
			.saveScreenshot('./screenshot/test-1-build.png')
			.execute(function () {
				moveNext(2);
			})
			.pause(5000)
			.waitForElementVisible('body', 15000)
			.saveScreenshot('./screenshot/test-2-build.png')
			.webdrivercss('homepage', {
				elem: 'body',
				screenWidth: [1200]
			}, function (err, res) {
				assert.equal(err, null);

                // this will break the test if screenshot differ more then 0% from
                // the previous taken image
                assert.equal(res.misMatchPercentage < 0, true);
			})
			.end();
	}
};

rahuldpi avatar Dec 13 '16 12:12 rahuldpi