Take screenshots at different viewport sizes using CasperJS

screenshots.js

/*
* Takes provided URL passed as argument and make screenshots of this page with several viewport sizes.
* These viewport sizes are arbitrary, taken from iPhone & iPad specs, modify the array as needed
*
* Usage:
* $ casperjs screenshots.js http://example.com
*/

var casper = require("casper").create();

var screenshotUrl = 'http://google.com/',
    screenshotNow = new Date(),
    screenshotDateTime = screenshotNow.getFullYear() + pad(screenshotNow.getMonth() + 1) + pad(screenshotNow.getDate()) + '-' + pad(screenshotNow.getHours()) + pad(screenshotNow.getMinutes()) + pad(screenshotNow.getSeconds()),
    viewports = [
      {
        'name': 'smartphone-portrait',
        'viewport': {width: 320, height: 480}
      },
      {
        'name': 'smartphone-landscape',
        'viewport': {width: 480, height: 320}
      },
      {
        'name': 'tablet-portrait',
        'viewport': {width: 768, height: 1024}
      },
      {
        'name': 'tablet-landscape',
        'viewport': {width: 1024, height: 768}
      },
      {
        'name': 'desktop-standard',
        'viewport': {width: 1280, height: 1024}
      }
    ];

if (casper.cli.args.length < 1) {
  casper
    .echo("Usage: $ casperjs screenshots.js http://example.com")
    .exit(1)
  ;
} else {
  screenshotUrl = casper.cli.args[0];
}

casper.start(screenshotUrl, function() {
  this.echo('Current location is ' + this.getCurrentUrl(), 'info');
});

casper.each(viewports, function(casper, viewport) {
  this.then(function() {
    this.viewport(viewport.viewport.width, viewport.viewport.height);
  });
  this.thenOpen(screenshotUrl, function() {
    this.wait(5000);
  });
  this.then(function(){
    this.echo('Screenshot for ' + viewport.name + ' (' + viewport.viewport.width + 'x' + viewport.viewport.height + ')', 'info');
    this.capture('screenshots/' + screenshotDateTime + '/' + viewport.name + '-' + viewport.viewport.width + 'x' + viewport.viewport.height + '.png', {
        top: 0,
        left: 0,
        width: viewport.viewport.width,
        height: viewport.viewport.height
    });
  });
});

casper.run();

function pad(number) {
  var r = String(number);
  if ( r.length === 1 ) {
    r = '0' + r;
  }
  return r;
}

Comment from @JeremiePat :

Alors la spontanément, trois suggestions:

• Externaliser le parametrage des viewport dans un JSON externe pour rendre le script facilement paramétrable
• Possibilité de passer une largeur et une hauteur en argument pour prendre immédiatement un screenshot d'un taille custom.
• Possibilité de paramétré une liste d'URL dans un JSON pour automatiser la réalisation de screenshot sur un ensemble de pages récurrentes."

Do you know if I can specify automatic height so that I always get screenshots of the entire page, no matter how long it is?

Nevermind, I just don't specify the clipRect argument. I thought that setting viewport dimensions automatically clip the "visible" area

Why wait for 5 seconds? It really slows down your automated scripts if you want to take screenshots of multiple pages at different viewport sizes. It shouldn't be necessary unless you're waiting for some initial animation to kick in.

Very very nice.

@dpashkevich, probably to make sure external dependencies have loaded

Just a note if you are seeing a blank screen come out, it might be because of SSL protocol. CasperJS and PhantomJS both allow you to specify --ssl-protocol=any to cirvumvent that. See here