browser-diff

Quickly assert visual differences between browsers.

Parameters

• options Object: browser-diff options
• options.server String: Selenium WebDriver URL
• options.url String: URL to test
• options.drivers[] Object: Selenium WebDriver withCapabilities options

Example using BrowserStack's WebDriver

var browserDiff = require('browser-diff');
 
browserDiff({
    server: 'http://hub-cloud.browserstack.com/wd/hub',
    url: 'https://www.npmjs.com',
    drivers: [{
        'browserstack.user': '',
        'browserstack.key': '',
        'browserName': 'IE',
        'browser_version': '10.0',
        'os': 'Windows',
        'os_version': '7',
        'resolution': '1024x768'
    }, {
        'browserstack.user': '',
        'browserstack.key': '',
        'browserName': 'Chrome',
        'browser_version': '51.0',
        'os': 'Windows',
        'os_version': '7',
        'resolution': '1024x768'
    }]
}).then(function (result) {
    console.log(result);
});

{
    "differences": 91486,
    "imagePath": "/diff-4dcb9f2f-388b-48dc-be41-7bd49c621669.png"
}

This could easily be adopted to your own Selenium WebDriver server.

Diff image example:

Using browser-diff in tests

// Fail if differences exceed an arbitrary value of 10000
if (result.differences > 10000) {
    test.fail('Difference exceeds threshold in ' + result.imagePath);
}

Notes

When you're done with the diff image, you should delete it to avoid clutter.

var browserDiff = require('browser-diff');
 
browserDiff(/* ... */).then(function (result) {
    result.removeDiffImage();
});