Nautical Pace Marker

    browser-diff

    1.1.2 • Public • Published

    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:

    npm.js diff

    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();
    });

    Keywords

    none

    Install

    npm i browser-diff

    DownloadsWeekly Downloads

    0

    Version

    1.1.2

    License

    ISC

    Last publish

    Collaborators

    • thomaslindstr_m