index.js

var fs = require('fs');
var readline = require('readline');
var imageDiff = require('image-diff');
var exec = require('child_process').exec;

var createRefrenceImages = false;

var urls = [
    'https://jsbin.com/yutoho',
    'https://jsbin.com/toruge'
];

var breakpoints = [
    [1440, 900],
    [320, 568]
];


var execPhantomjs = function() {
    var cmd = 'node_modules/.bin/phantomjs test/create-screenshots.js ';
    var urlsAndBreakpointsArg = urls.join() + '-' + breakpoints.join();
    var setExpectedArg = createRefrenceImages ? ' -set-expected' : '';

    exec(cmd + urlsAndBreakpointsArg + setExpectedArg, function(err, stdout, stderr) {
        if (err) {
            console.log(err)
        } else if (!createRefrenceImages) {
            diffImages();
        }
    });
}

var diffImages = function() {
    urls.forEach(function(url) {
        var filename = url.replace(/https?:\/\//, '').replace(/\//g, '-');

        breakpoints.forEach(function(breakpoint, i) {
            imageDiff({
                actualImage: 'test/new/' + filename + i + '.png',
                expectedImage: 'test/expected/' + filename + i + '.png',
                diffImage: 'test/diff/' + filename + i + '.png'
            }, function(err, imagesAreSame) {
                if (imagesAreSame) {
                    console.log(url + ' is fine');
                } else {
                    console.log('There has been some changes, please check test/diff/' + filename + i + '.png');
                }
            });
        })
    })
}


if (!fs.existsSync('test/expected')) {
    var rl = readline.createInterface(process.stdin, process.stdout);
    rl.question('You don\'t have reference images to test against.\nDo you want to create the reference images to represent how your app should look like?\n(y/n)', function(answer) {
        if (answer && answer.toLowerCase() == 'y') {
            createRefrenceImages = true;
        }
        rl.close();
        execPhantomjs();
    });
} else {
    execPhantomjs();
}