Chai-modshot NPM

chai-modshot

visual regression testing plugin for chai. Uses modshot to create screenshots and compare them

How to use

Can be used with the should, expect or assert interfaces.

// 1. testing an HTML file for visual regression
var htmlFilePath = require.resolve('./index.html');
return expect(htmlFilePath).to.be.consistentWith('html-file-1');

// 2. testing a marko template for visual regression
var templatePath = require.resolve('./template.marko');
return expect(templatePath).to.be.consistentWith('marko-template-1');

Installation and Setup

Do an npm install chai-modshot to get up and running. Then use it for assertions.

var chai = require('chai');
var chaiModshot = require('chai-modshot');

chai.use(chaiModshot);

Configuring chai-modshot

chai-modshot can optionally be configured using a configure function as shown below. This should be done before the assertions. Also, configuring chai-modshot multiple times overrides the previous configurations.

require('chai-modshot').configure({
    outDir: 'shots/units',
    tolerance: 5,
    port: 4567,
    templateType: 'marko',
    lassoConfig: {
        plugins: [
            'lasso-less',
            'lasso-autoprefixer',
            'lasso-marko'
        ],
        'url-prefix': '/static',
        outputDir: 'static',
        fingerprintsEnabled: false,
        minify: false,
        bundlingEnabled: false,
        resolveCssUrls: true,
        cacheProfile: 'development'
    }
});

The .configure function takes an object with the below keys as parameter:

outDir (Default: 'shots/units') the output directory for screenshots.
tolerance (Default: 5) the percentage deviation with original screenshots upto which, the assertions should not fail.
port (Default: 4567) the port to start the server on.
templateType (Default: 'marko') the template engine that should be used. Currently, marko and html are supported
lassoConfig the lasso configuration that should be passed to the template. The default configuration is as in the above example.

Assertions

consistentWith(useCase, selector, delay)

// 1. testing an HTML file for visual regression
var htmlFilePath = require.resolve('./index.html');
return expect(htmlFilePath).to.be.consistentWith('html-file-1', 'body', 1000);

// 2. testing a marko template for visual regression
var templatePath = require.resolve('./template.marko');
return expect(templatePath).to.be.consistentWith('marko-template-1');

Params

useCase the prefix for the file name for the screenshot
selector the css selector for the element to be checked for visual regression. Can be a string or an Array of selectors
delay the number of milliseconds to wait before taking the screenshot.