A Simple grunt-backstopjs Plugin
30 Dec 2016

Lately I had to support our front end team by adding the visual regression test tool BackstopJS to their build environment. Since they used already Grunt as their build tool, the simple task was to run BackstopJS from Grunt. As it turned out, with the new 2.* version of BackstopJS this is far simpler than expected.

Previous versions of BackstopJS use Gulp under the hood. Consequently existing Grunt plugins for BacktopJS simply invoke the corresponding Gulp tasks.

With the new BackstopJS version we can install BackstopJS locally, i.e. it is very easy to build an integration for Grunt like this:

1. Install BackstopJS for the current project with
   npm install --save-dev backstopjs
2. Add the following lines to Gruntfile.js

var backstopjs = require('backstopjs');
grunt.registerTask('backstop', 'BackstopJS integration', function(cmd) {
    // cmd is either 'reference', 'test', or 'openReport'
    var done = this.async();
    backstopjs(cmd).then(function() {
        done(true);
    }).catch(function() {
        done(false);
    });
});

With this we can use the Grunt tasks

• backstop:reference for creating the reference images
• backstop:test for running the tests
• backstop:openReport for displaying the test result

Simple, isn't it? No need for an external plugin!

I'm interested in your feedback. Send me a mail or ping me on twitter.