Introduction:

What is CasperJS?

• Casperjs is an open source initiative for navigation scripting and testing utility written in javascript for the phantomjs web kit headless browser.

• Casperjs acts more as a wrapper over phantomjs to extend its functional capability to perform better handling of automation frameworks.

• Headless automation does not involve direct interaction of the browser when running automation. It is more of CLI (Command Line Interface) based where the user can see the test suites running.

Let us begin with the setting up casperjs on your machine. Follow the required steps to set up casperjs. Since I am a mac user these are the following steps to install casperjs.

Step-1: $ brew update

Step-2: $ brew install casperjs –devel (Recommended to install the development version)

Step-3: $ brew install casperjs (For stable version). If you want to upgrade to the latest version then just do

Step-4: $ brew upgrade casperjs

To check whether phantomjs is installed properly in your system

For installing in linux systems these are the following steps

Step-1: First of all you need to install phantomjs in your system. You would require phantomjs version 1.9.2 or above. Please go through the required steps

a) $ cd /usr/local/share

b) $ sudo wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.7-linux-86_64.tar.bz2

c) $ sudo tar xjf phantomjs-1.9.7-linux-86_64.tar.bz2

d) $ sudo ln -s /usr/local/share/phantomjs-1.9.7-linux-86_64.tar.bz2/bin/phantomjs /usr/local/share/phanotmjs

e) $ sudo ln -s /usr/local/share/phantomjs-1.9.7-linux-86_64.tar.bz2/bin/phantomjs /usr/local/bin/phanotmjs

f) $ sudo ln -s /usr/local/share/phantomjs-1.9.7-linux-86_64.tar.bz2/bin/phantomjs /usr/bin/phanotmjs

Step-2: Once phantomjs is installed properly in your system just run the command $ phantomjs -v to check whether it is properly installed in your system or not.

Step-3: $ git clone git://github.com/n1k0/casperjs.git
Step-4: $ cd casperjs
Step-5: $ ln -sf `pwd`/bin/casperjs /usr/local/bin/casperjs

Step-6: To verify if casperjs is installed properly in your system just run the command $ casperjs -v

Your system is up and running to run your test cases in casperjs. You just need an editor to code your automation suite.

Some of the functionalities that I have used in my code snippet are as follows.

Declaring a test suite in casperjs

casper.test.begin(‘Accept_Invite’,0,function suite(test){ }

casper.test.begin is the function that you use to initiate a test suite. You write the corresponding test cases inside this function.

The following are the parameter that are used for this method

a) Name of the test suite which I have used ‘Accept_Invite’

b) Probable number of test cases inside the test suite. If you are not sure about how many test cases are going to be there you can specify 0 as I have done.

c) A function for the test suite.

The three keywords casper.test.begin means the following

1. casper signifies a casper function so that it could be recognised by casperjs as a casper function when running the test suite.

2. test signifies that is a test instance and casperjs would run according to that.

3. begin signifies start execution of the test suite.

Declaring the beginning of a test case

This is the following way to declare a test case casper.start(url,function(){ }

1. casper signifies a casper function so that it could be recognised by casperjs as a casper function when running the test case.

2. start signifies starting of a test case.

Using xpaths in casperjs

Standard-way[1]

The first standard way of using xpath in casperjs is by the following way.

var x = require(‘casper’).selectXPath;

This functionality is used if you are trying to helper function selectXpath from the casper module in order to explicitly make casperjs understand an xml path.

I have used the functionality of xpath in this manner

var path = x(“//a”);

//Will display the anchor tag selected

console.log(“Anchor Tag: ” + path);

//The variable link gets the content of the href tag and stores it in the variable link

var link = casper.getElementAttribute(path, “href”);

Standard-way[2]

The second standard way of using xpath in casperjs is by declaring the type and the path within the function. This is legitimate but is kind of exhaustive. Every time you need to declare an xpath you have to declare the type as first. Better you use the first method where you can directly declare an instance of the helper function xpath used under the casper module function.

this.test.assertExists(
{
  type: 'xpath',
  path: '//div[@class="mailview"]//a[contains(text(),"Accept invite")]',
}, 'The element for clicking on Accept invite exists');

Taking screenshot using casperjs

This is the following way how a screenshot can be taken

this.capture(relative path + “Name of the file.extension”);

Switching inside an iframe in casperjs

This is the following way how to switch inside an iframe using casperjs casper.withFrame(‘pass the value of the attribute name inside iframe tag’, function(){ }

Access page content having http access

If there is an http authentication for a particular page casperjs can be used to handle it in the following way

//Set the Http authentication username and password

casper.setHttpAuth(‘username’,’password’);

Wait for a resource function

Casperjs has this unique and dynamic ability to pause the execution unless a resource has been loaded on the page i.e unless a particular resource has been loaded for a page no further execution is possible for functionalities written inside the wait for resource method

//Wait for the resource mailinatorguy.png before taking the screnshot

casper.waitForResource(“mailinatorguy.png”,function(){

//Capture the screenshot

this.capture(screenshot + “Click_Accept_Invite.png”);

});

You can run your test suite in casperjs in the following way $ casperjs test and if you would like casperjs to generate junit based xml report then you just simply need to fire this command $ casperjs test googletesting.js –xunit=

Well these are some of the useful functionalities that has been used by me in writing a test scenario using casperjs. For further details and implementation here is the following linkhttps://github.com/Corefinder89/CasperJS/blob/master/Accept_Invite.js