development icon

CasperJS is a program that makes it easy to simulate the navigation of a website

Chauncey Thorn, Senior Developer
#Development | Posted

Again what is casperJS?

CasperJS is a program that makes it easy to simulate the navigation of a website: clicking around, submitting to forms, uploading of files and even screenshots. It is written in Javascript and runs on top of PhantomJS which is a headless browser.

HOW TO: Install CasperJS

To install CasperJS, you can follow the installation instructions here.

At this point we’re going to assume you have casperjs and phantomjs installed and you’re ready to start taking screenshots of your responsive pages to ensure they render as expected.

Method: capture()

Signature: capture(String targetFilepath, [Object clipRect, Object imgOptions])

  • targetFilepath – parameter for the file path and filename.
  • clipRect – parameter for automatically setting page.

Quick example from the CasperJS site:

casper.start('http://www.google.fr/', function() {

    this.capture('google.png', {

        top: 100,

        left: 100,

        width: 500,

        height: 400

    });

});

 

casper.run();

 

How I used the capture() method.

Phase2 not long ago completed a mobile responsive upgrade to energy.gov and as the development process was proceeding I wanted to see what the site looked like under the various view modes defined and selected casperJS as the solution being aware of the Capsperjs capture() method. Having used casperjs to write behavioral test for my custom entity in this blog post: Behavorial Test For Custom Entity Using CasperJS.

Not wanting to reinvent the wheel, before I attempted to write a solution from scratch I looked to see if anyone was doing what I was attempting to do and I got lucky.

As a result, here I will focus on the key components of this code and you can download and read through the code below.

First we create a new Casper instance.

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

  verbose: false,

  logLevel: "debug"

});

 

Define viewports based on your requirements. For a extensive list of viewports visit this site here. I’ve taken a few of those viewports and created a JSON array.

    viewports = [

      {

        'name': 'samsung-galaxy_y-portrait',

        'viewport': {width: 240, height: 320}

      },

      {

        'name': 'samsung-galaxy_y-landscape',

        'viewport': {width: 320, height: 240}

      },

      {

        'name': 'iphone5-portrait',

        'viewport': {width: 320, height: 568}

      },

      {

        'name': 'iphone5-landscape',

        'viewport': {width: 568, height: 320}

      },

      {

        'name': 'htc-one-portrait',

        'viewport': {width: 360, height: 640}

      },

      {

        'name': 'htc-one-landscape',

        'viewport': {width: 640, height: 360}

      },

      {

        'name': 'nokia-lumia-920-portrait',

        'viewport': {width: 240, height: 320}

      },

      {

        'name': 'nokia-lumia-920-landscape',

        'viewport': {width: 320, height: 240}

      },

      {

        'name': 'google-nexus-7-portrait',

        'viewport': {width: 603, height: 966}

      },

      {

        'name': 'google-nexus-7-landscape',

        'viewport': {width: 966, height: 603}

      },

      {

        'name': 'ipad-portrait',

        'viewport': {width: 768, height: 1024}

      },

      {

        'name': 'ipad-landscape',

        'viewport': {width: 1024, height: 768}

      },

      {

        'name': 'desktop-standard-vga',

        'viewport': {width: 640, height: 480}

      },

      {

        'name': 'desktop-standard-svga',

        'viewport': {width: 800, height: 600}

      },

      {

        'name': 'desktop-standard-hd',

        'viewport': {width: 1280, height: 720}

      },

      {

        'name': 'desktop-standard-sxga',

        'viewport': {width: 1280, height: 1024}

      },

      {

        'name': 'desktop-standard-sxga-plus',

        'viewport': {width: 1400, height: 1050}

      },

      {

        'name': 'desktop-standard-uxga',

        'viewport': {width: 1600, height: 1200}

      },

      {

        'name': 'desktop-standard-wuxga',

        'viewport': {width: 1920, height: 1200}

      },

 

    ];

 

Use the cli() method to get the url we want to how it render under the various view modes.

if (casper.cli.args.length < 1) {

  casper

    .echo("Usage: $ casperjs screenshots.js http://example.com")

    .exit(1)

  ;

} else {

  screenshotUrl = casper.cli.args[0];

}

Use the start() method to connect to the site define via the cli.

casper.start(screenshotUrl, function() {

  this.echo('Current location is ' + this.getCurrentUrl(), 'info');

});

 

Use the each() method to iterate over the JSON array items. As the viewports array is being processed the viewport() method is called and we thenOpen() the screeshotUrl where we wait() for a few seconds for the page to completely load and we then() execute capture().

 

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

    });

  });

});

 

Use run().

NOTE: Casper script won’t run without this directive!!.

 

1

casper.run();

 

Example screenshots

 

Complete example.

Running the casperjs script..
screenshot of running casper script

I’ve made this claim before, and will make it again. If you haven’t had a chance to use CasperJS I highly recommend that you get started. For a business case checkout this post out: The Case for Automated Testing, and/or refer back to my previous post Behavorial Test For Custom Entity Using CasperJS. Also don’t forget the CasperJS documentation.

Chauncey Thorn

Senior Developer