Taking web application screenshots with CasperJS

When you need to take screenshots of a web application, the normal route is to navigate to a page, fill in the forms with sample data, use the Print screen (or Alt+Print screen) key to take the screenshot, then crop and export it with a normal application like GIMP… which is quite time consuming… and god forbid if you need to do it again, with a slightly different data or page design…

A better route would be to automate the whole process. Let me show you how to do it with CasperJS!

Lets start!

NB if you need some help installing CasperJS, see the end of this article.

I’ll be using my home page as an example.

Create a simple casper test script that captures the entire page inside the file example.js:

// set the viewport size to include all our page content.
casper.options.viewportSize = {width: 700, height: 600};

casper.test.begin("test", function(test) {
  // step 1: open the page.
  casper.start("http://ruilopes.com", function() {
    // do an example test.
    test.assertTitle("rui lopes home");
  });

  // step 2: take some screenshots.
  casper.then(function() {
    // capture the entire page.
    casper.capture("page.png");

    // capture the nav element.
    casper.captureSelector("selector.png", "nav");
  });

  // actually run the steps we defined before.
  casper.run(function() {
    test.done();
  });
});

NB As you can see its quite self-explanatory; but you should really read The Fine Manual.

Run casper:

casperjs test example.js

Should output something like:

Test file: example.js
# test
PASS Page title is: "rui lopes home"
PASS 1 test executed in 0.087s, 1 passed, 0 failed, 0 dubious, 0 skipped.

And look at the generated screenshots.

the entire page

the nav element

Mouse Cursor

CasperJS uses PhantomJS uses QtWebKit in headless mode. But, unfortunately, this combo does not seem to support the mouse cursor. So I had to roll my own solution by creating casperjs-screenshooter. It simulates the mouse cursor by adding an img element with id screenshooterCursor to the page DOM and the hover class into a element to simulate the hover effect.

Lets see how we can use it:

// step 3: take some screenshots with the mouse over a element.
screenshooter.thenMoveCursor("pointer", "a[href='http://blog.ruilopes.com/']", function() {
    // capture the area taken by the h1 and mouse cursor elements.
    screenshooter.capture("multiple-selector-with-mouse-cursor.png", "h1, #screenshooterCursor");
});

NB by default, you can use the following cursor names: default, pointer, text, help or none. You can add more yourself by using cur2png or png2json (you can download the binaries too).

NB the default cursors come from the excellent Ubuntu Human theme.

NB with screenshooter.capture (instead of casper.capture) you can capture the area taken by several elements, each selected by a different selector separated by a comma.

And the resulting screenshot image:

And thats it… see the full source and let me known what you think!

– RGL

Install on Ubuntu

NB I’m using Ubuntu 14.04; but it should be the same on other versions.

Run the following commands:

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
sudo npm install -g casperjs

Install on Windows

On Windows (I’m using 8.1), we need to jump through some hoops… download the installer (e.g. node-v0.10.26-x86.msi) from:

http://nodejs.org/download/

And install it (I’ve installed mine at C:\Development\nodejs).

Next, open a Command Prompt, and make sure you can run node. If you didn’t let the installer modify your PATH, you need to add the directories manually with:

set PATH=%PATH%;C:\Development\nodejs;%APPDATA%\npm

NB %APPDATA% should expand to something like C:\Users\rgl\AppData\Roaming.

Check the installed node version:

node --version

Should output something like:

v0.10.26

Check the installed npm version:

npm --version

Should output something like:

1.4.3

Install CasperJS with:

npm install -g casperjs

And check its version:

casperjs --version

Should output something like:

'python' is not recognized as an internal or external command,
operable program or batch file.

Errr what? needs python? Oh well… as I found out its possible to run without it, lets add the needed directories into the PATH:

set PATH=%APPDATA%\npm\node_modules\casperjs\bin;%APPDATA%\npm\node_modules\casperjs\node_modules\phantomjs\lib\phantom;%PATH%

NB You need to add the caspjerjs\bin directories before the ones we’ve set before.

NB If this sounds too hackish, install python and add it into your PATH.

And try again:

casperjs --version

Should finally output something like:

1.1.0-beta3