Responsive Screenshots with CasperJS

19 Mar 2015 Written by David Walz

Reasons Why

So you don’t have to do it manually! CasperJS allows you to take screenshots of a website from different resolutions. It’s actually quite simple to take an array of different screenshots all in one run.

Tools within My Reach

Raspberry Pi
JavaScript
CasperJS on top of PhantomJS

Getting Started

First you’ll want to install PhantomJS and CasperJS. Use the links if you haven’t already done this.

Creating a Simple Script

nano responsive_screenshots.js

At the top of our program we need to include CasperJS.

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

Now we want to start up the browser and perform some actions.

casper.start('http://bitpi.co', function() {
	this.echo(this.getTitle());

	//Common Desktop Resolution
	this.viewport(1280,1024);
	this.capture('screenshots/desktop.png');
	this.echo('Desktop screenshot captured');

	//Common Tablet Resolution
	this.viewport(768,1024);
	this.capture('screenshots/tablet.png');
	this.echo('Tablet screenshot captured');

	//Common Mobile Resolution
	this.viewport(320,480);
	this.capture('screenshots/mobile.png');
	this.echo('Mobile screenshot captured');
});

Just a few pointers here..

.echo prints to the console
.viewport tells CasperJS what resolution to set the browser
.capture takes a screenshot and saves it as the file you define

Now we finish up the program with..

casper.run();

Its that simple.

Running the program

You’ll need to include ‘casperjs’ infront of the file name.

casperjs responsive_screenshots.js

After the program runs, you’ll find your screenshots in the screenshot folder it created.

Recommendation for heavy lifting

If you need a lot of viewport sizes, I recommend you place them in an array and create a loop or use casper.each(). But I simplified the program above just to show of the capture module.

Changing screenshot formats and quality level

You can save your screenshots in different formats and quality levels. Formats supported include: bmp, jpg, jpeg, png, ppm, tiff, xbm and xpm. Quality levels can be set by entering a percentage level.

this.capture('screenshots/desktop', {format:'jpg', quality:80});

The example above will save as a jpg file at 80% quality. More information on the capture module can be found here.

Viewing your screenshots from the command line

An easy way to view your screenshots is with the fim command. Install it if you haven’t already.

sudo apt-get update
sudo apt-get -y install fim

You can view an image by..

fim -a desktop.png

Questions?

Leave me any questions or suggestions in the comments below. Let me know if you have any ideas for what else CasperJS could be used for.

BitPi.co