Nightwatch with Visual Regression testing

readme.md

Synopsis

This forked example has been updated with the recent npm modules. Its fully working.

Installation

Create empty folder and install the following modules

• npm i nightwatch
• npm i node-resemble-js

Selenium setup

http://nightwatchjs.org/guide#installation

Issues

If you are encountering any issues with canvas; follow this [guide] (https://github.com/Automattic/node-canvas/wiki/Installation---Windows)

Setup

• copy assertions-compareScreenshot.js to ./assertions/compareScreenshot.js
• copy commands-compareScreenshot.js to ./commands/compareScreenshot.js
• copy mytest.js to .tests/mytest.js
• copy sample nightwatch.json to project root directory

Example run

nightwatch --test tests/mytest.js

End note

I'll try to simpify the code and add new functionalities to it. Thanks to richard-flosi for the original script.

assertions-compareScreenshot.js

// location: ./assertions/compareScreenshot.js
var resemblejs = require('node-resemble-js'),
    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));
        }

        resemblejs
            .outputSettings({
                errorColor: {
                  red: 225,
                  green: 0,
                  blue: 255
                },
                errorType: 'movement',
                transparency: 0.1,
                largeImageThreshold: 1200
              });

        resemblejs(baselinePath).compareTo(resultPath)
            //.ignoreAntialiasing()
            //.ignoreColors()
            .onComplete(callback);

        return this;
    };

    this.value = function(result) {
        result.getDiffImage().pack().pipe(fs.createWriteStream(diffPath));
        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;
    };
};

commands-compareScreenshot.js

// Location: ./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.
};

mytest.js

module.exports = {
    'My Test': function(browser) {
        browser
        .url('http://www.google.com')
        .compareScreenshot('compare-google-screenshot.png')
        .end();
    }
};

nightwatch.json

{
  "src_folders" : ["tests"],
  "output_folder" : "reports",
  "custom_commands_path" : "./commands",
  "custom_assertions_path" : "./assertions",
  "page_objects_path" : "",
  "globals_path" : "",

  "selenium" : {
    "start_process" : false,
    "server_path" : "",
    "log_path" : "",
    "host" : "127.0.0.1",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver" : "",
      "webdriver.ie.driver" : ""
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "selenium_port"  : 4444,
      "selenium_host"  : "localhost",
      "silent": true,
      "screenshots" : {
        "enabled" : false,
        "path" : ""
      },
      "desiredCapabilities": {
        "browserName": "firefox",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    },

    "chrome" : {
      "desiredCapabilities": {
        "browserName": "chrome",
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    }
  }
}

Sweet 👍

Thank you for share this.
Cheers.

Thank you.

I've seen new project going on here:
https://github.com/Rykus0/nightwatch-visual-regression

Looks very promising. It's allowing you to ignore some css'es while doing a screenshot must-have feature, for me at least.

The only thing missing is admin panel.. :)