Testing the responsiveness of a website in an array of different screen sizes.

capture.js

/*
  requires: phantomjs, async
  usage: phantoms capture.js
*/
var site = 'http://localhost:3000/index.html';

var async = require('async'),
    sizes = [
      [320, 480], //iphone
      [384, 640], //LG Optimus
      [768, 1024], // iPad Mini
      [1280, 800], // MDPI screen
      [1440, 900], // HiDPI screen
      [2560, 1440] // iMac
    ];

function capture(sizes, callback) {
  var page = require('webpage').create();
  page.viewportSize = {
    width: sizes[0],
    height: sizes[1]
  };

  page.zoomFactor = 1;
  page.open(site, function(status) {
    var filename = sizes[0] + 'x' + sizes[1] + '.png';
    page.render('./screenshots/' + filename);
    page.close();
    callback.apply();
  });
}

async.eachSeries(sizes, capture, function (e) {
  if (e) console.log(e);
  console.log('done!');
  phantom.exit();
});