Entity view (Content)

An Introduction to CasperJS

By cmcclure
Jun. 18, 2014

In the world of browser based applications, testing your applications' front-end requires the usage of certain tools. There are a number of options out there, such as Selenium, a traditional tool that utilizes a browser plugin to create tests. This great tool certainly gets the job done nicely; however, there is a lightweight and simple tool which can be run from the command line. It is called CasperJS.

I recently made use of this tool on a project to do fast smoke testing from the command line, and found it to be invaluable. This “safety net” is a great comfort provider when merging mass amounts of code from a 3rd party supplier, and during sprint cycles.

What is CasperJS?

From CasperJS's website:

“CasperJS is an open source navigation scripting & testing utility written in Javascript for the PhantomJS WebKit headless browser and SlimerJS (Gecko). It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks”

So, in other words, it is a toolkit for creating end-to-end tests for your application which can be run from the command line without having to start the browser.

What does the code look like?

Below is a simple CasperJS script (more of a scraping script, to be honest) which automates the action of visiting Appnovation's Blog and taking a screenshot at the choosen 1280x1024 screen resolution.

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

casper.start('http://appnovation.com/blog', function() {
    this.echo(this.getTitle());
    this.capture('blog-homepage.png')
}).viewport(1280,1024);

casper.run();

To run the above script (assuming installed), you simply open a terminal at the directory where script is residing and type: 'casperjs simple.js'. After execution you should find a message printed to terminal and a new file called 'blog-homepage.png' created.

Now if we wanted to turn this into a testing script ( making use of its own handy test runner), to verify that the H1 tag on the blog page was set to 'Appnovation Blog' for example, we would:

casper.test.begin("Verify blog title", 1, function (test) {
    casper.start('http://www.appnovation.com/blog').then(function () {
        test.assertEvalEquals(function () {
            return __utils__.findOne('h1').textContent;
        }, 'Appnovation Blog');

    }).run(function () {
        test.done();
    });
});

One would execute the above script via command line: 'casperjs test <<filename.js>>' and output from this would look something like the below image.

casperjs%20%E2%80%94%20bash%20%E2%80%94%20Solarized%20Dark%20xterm-256color%20%E2%80%94%20126%C3%9734

What are the Pro’s and Con’s

In my opinion, the following outlines the pro’s and con’s of CasperJS.

Pros:

  • Almost all developers write some JavaScrip; therefore, CasperJS will, very likely, increase productivity for all team members from day 1

  • Performance - less overhead and performs better than Selenium

  • Command line based headless execution

  • Taking screenshots of the whole page or part of the page

  • Ability to check low level HTTP responses, such as headers

  • Simple to read and understand

  • Abstraction of common functions into a common class include accelerating the creation of tests

  • Reduction in QA time spent performing repetitive regression testings

  • Can be plugged into almost any CI with ease

  • Flexible selectors, including CSS3 and XPath

  • Scripts can be written in CoffeeScript or JavaScript

Cons:

  • JavaScript is not necessarily core to anyone’s job, so there will have to be a mindset shift

  • PhantomJS uses QtWebKit which does not use the same engine as Chrome; hence, if you look for 100% confidence level, then CasperJS will not be able to offer such result, replacing a real browser

  • Drag and drop is catered to users in simple terms, but when it comes to setting precise coordinates, Selenium is a clear winner 

Tips / Tricks

  • Resurrectio - Chrome extension which records a sequence of browser actions and produces the corresponding CasperJS script.

  • GNU Parallel - Shell tool for executing jobs in parallel using one or more computers

  • Grunt Casper - Run Casper CLI scripts with Grunt

In Summary

CasperJS is a great tool for fast smoke testing, with a wide audience in most development teams due to the JavaScript language. In theory, both BE and FE could be writing these tests and with new version including Web Drivers, and, thus, Selenium support; cross browser testing is now possible making it a real world solution for fast paced development projects achieving 90% coverage of FE's arena.

I have barely scratched the surface of what is capable with CasperJS, but the intention was to build your appetite. So, if you would like to install this great tool and make use of it today in your project, head over to CasperJS's Download Page.

Post Tags: