nightwatch-imagination is a "plugin" for NightwatchJS which allows CSS Regression tests.

It's based on gm for GraphicsMagick/ImageMagick support and on Version 2 of Resemble.js (for NodeJS) for screenshot comparison. It also supports remote management of screenshots baselines and screenshot comparison using aplitools

Installation

npm i nightwatch-imagination -S

Initialization

const settings = require('../../Settings');
require('nightwatch-imagination').init(settings);

Initialization should happen during bootstrap and before the tests begin to run.

After initializing with init() you can use the assertion isVisualMatching() within your tests:

module.exports = {
  'Ensure "form" is visually consistent': function(browser) {
    // defaults
    const config = {
        gm: true, // disable GraphicsMagick and use ImageMagick instead
        ref: false, // always compare against solid references (_ref.png)
        path: 'screenshots', // relative from CWD or absolute from everywhere
        remote: false // Use local comparison instead or aplitools remote comparison
    };
    browser.initScreenshotComparison(); // Initialize a new comparison session
    browser.assert.isVisualMatching(config, {
        selector: 'form', // The selector of the element to take screenshot of
        uniqueName: 'myName', // A unique name for this baseline screenshot image
        threshold: 1.3 // The image diff threshold which should be accepted
    }); // Check Visual Change Assertion
    browser.closeScreenshotComparison(); // Close the comparison session
  }
};

Why use this tool?

nightwatch-imagination leverages NightwatchJS (Webdriver → Selenium) so you can compare screenshots from multiple browser types.

Screenshot comparison can be managed and performed locally or using remote management of screenshots baselines and comparisons using aplitools