Instantly share code, notes, and snippets.

Embed
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

This comment has been minimized.

Show comment
Hide comment
@nhoizey

nhoizey 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."
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

This comment has been minimized.

Show comment
Hide comment
@dpashkevich

dpashkevich Aug 30, 2013

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 commented Aug 30, 2013

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

This comment has been minimized.

Show comment
Hide comment
@dpashkevich

dpashkevich Aug 30, 2013

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

dpashkevich commented Aug 30, 2013

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

@dpashkevich

This comment has been minimized.

Show comment
Hide comment
@dpashkevich

dpashkevich Sep 7, 2013

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.

dpashkevich commented Sep 7, 2013

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

This comment has been minimized.

Show comment
Hide comment
@spacebeers

spacebeers Nov 8, 2013

Very very nice.

spacebeers commented Nov 8, 2013

Very very nice.

@aristretto

This comment has been minimized.

Show comment
Hide comment
@aristretto

aristretto Mar 20, 2014

@dpashkevich, probably to make sure external dependencies have loaded

aristretto commented Mar 20, 2014

@dpashkevich, probably to make sure external dependencies have loaded

@augbog

This comment has been minimized.

Show comment
Hide comment
@augbog

augbog 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

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