With the rising popularity of PhantomJS, there has been an evolution of several projects that integrate with or are based on PhantomJS. Some of these are extensions that enhance the scripting ability of PhantomJS.

CasperJS is an open source extension for PhantomJS. It extends the API of PhantomJS to make tasks such as web scraping, testing, and DOM manipulation easier. CasperJS can be downloaded from http://casperjs.org.

Let us see some basic PhantomJS and CasperJS code in action.

var casper = require("casper").create();
casper.start("http://www.phantomjs.org", function(){
  this.echo(this.getTitle());
});

casper.run();

If you look closely at the previous code, there is no trace of any PhantomJS API code having been used, except for the require() function.

CasperJS still uses PhantomJS and depends on the PhantomJS API; however, it provides its own unique API. CasperJS modules come with a new set of API functions. These functions introduce new features by wrapping up the PhantomJS API.

Then, we've used the CasperJS start() function, which is comparable to the PhantomJS open() function. If we are going to investigate CasperJS source code for the start() function, we find that it also calls the PhantomJS open() function.

However, the CasperJS coding style and approach is quite different from that of PhantomJS. CasperJS uses a step-by-step coding approach, which is also called navigation scripting. In the preceding code, we can see that this is applied as we define our first step in the second line; however, we only perform all of the defined steps when the CasperJS run() function is called. If we don't include the run() call in our code, there will be no execution of the code. Let us add more steps to our previous example.

var casper = require("casper").create();
casper.start("http://www.phantomjs.org", function(){
  this.echo(this.getTitle());
});

casper.then(function(){
  var version = this.evaluate(function(){
    return document.querySelector('.version').innerText;
  });
  this.echo(version);
});

casper.run();

In the preceding code, we've added a new step using the then() function of CasperJS. This function will accept a new function definition which will be added to the queue of steps. In this function definition, we attempt to get the current version of PhantomJS by using the DOM querySelector() function. Finally, we print out the version text to the console using CasperJS's echo() function, which is similar to console.log().

Notice that we have a start() function followed by one or more then() functions, all started by the run() function. This represents the idiomatic way to write CasperJS scripts.

More than just an extension API, CasperJS can also be used to create test scripts that can be an alternative to Jasmine. It provides a very easy-to-use library that converts our script into a unit test. We'll modify our preceding script and insert some assertions:

var casper = require("casper").create();
casper.start("http://www.phantomjs.org", function(){
  this.echo(this.getTitle());
});

casper.then(function(){
  var version = this.evaluate(function(){
    return document.querySelector('.version').innerText;
  });
  casper.test.assertEquals(version, 'v1.9'),
});

casper.run(function(){
  casper.test.done();
  casper.test.renderResults(true, 0);
});

We've modified a few areas to make it a test script. In the preceding code snippet, we assert that the version string we scraped from the page equals to what we expect. Here, we use the casper.test.assertEquals function, which tests two objects for equality. We've also modified the casper.run() function and passed it with a closure, which will be called after all the steps are executed. This is the best location in our code to display the result of our tests because it runs at the very end. We call the capser.test.done() function to indicate that all the tests are executed and casper.test.renderResults() to display the summary of our tests. Running our new test script will give us the output shown in the following screenshot:

CasperJS is a nifty extension of PhantomJS, which can save us a lot of small and trivial code problems while writing scripts. It is also worth noting that developers are very prompt and visibly active in supporting and adapting new features of PhantomJS.