Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Take screenshots at different viewport sizes using CasperJS
/*
* 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;
}
@nhoizey
Owner
nhoizey commented Dec 3, 2012

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."
@dpashkevich

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?

@dpashkevich

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

@dpashkevich

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.

@spacebeers

Very very nice.

@aristretto

@dpashkevich, probably to make sure external dependencies have loaded

@augbog
augbog commented Jun 8, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment