PhantomCSS example with Gulp

phantomcss.md

npm install gulp-phantomcss --save

gulpfile.js

var phantomcss      = require('gulp-phantomcss');

// PhantomCSS
gulp.task('phantomcss-desktop', function () {
  return gulp.src('./testsuite.js')
  .pipe(phantomcss({
    screenshots: 'desktop',
    viewportSize: [1000, 1100]
  }));
});

gulp.task('phantomcss-mobile', function () {
  return gulp.src('./testsuite.js')
  .pipe(phantomcss({
    screenshots: 'mobile',
    viewportSize: [320, 600]
  }));
});

gulp.task('phantomcss', function () {
  gulp.start('phantomcss-desktop', 'phantomcss-mobile');
});

testsuite.js

casper.
  start('http://localhost:2368/').
  then(function() {
    phantomcss.screenshot('.site-header', 'site-header');
  });

casper.run();

Good Read https://css-tricks.com/visual-regression-testing-with-phantomcss/
Another tool https://github.com/gemini-testing/gemini