Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Headless Automation Using CasperJS

DZone's Guide to

Headless Automation Using CasperJS

Read on to learn how to use CasperJS, a JavaScript-based testing framework that is easy to use, and just as friendly as the ghost for which it was named.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

  • 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 with the browser when running. It is more of a CLI (Command Line Interface) based where the user can see the test suites running.

Let us begin by 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 on a Mac: 

Step 1: $ brew update 

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

Step 3: $ brew install casperjs  (For stable version).

Step 4: If you want to upgrade to the latest version then just use the following command: $ brew upgrade casperjs 

For installing CasperJS on Linux-based systems, use 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 on your system, just run the following command:

 $ phantomjs -v  

This will 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 on your system just run the command:

$ casperjs -v


Your system is now able to run your test cases in CasperJS. You just need an editor to code your automation suite.

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 parameters that are used for this method:

a) The name of the test suite which I have used is ‘Accept_Invite’.

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

c) A function for the test suite.

The three keywords in casper.test.begin mean the following:

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

2. test signifies that it is a test instance and CasperJS should run according to that.

3. begin signifies start execution of the test suite.

Declaring the Beginning of a Test Case

To declare a test case, use the following: casper.start(url,function(){ }  

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

2. start signifies starting of a test case.

Using XPaths in CasperJS

The Standard Way, Option 1

The first standard way of using XPath in CasperJS is the following way:

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

This functionality is used if you are trying to get a helper function to select Xpath 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”);


The Standard Way, Option 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 first (I prefer the first method listed above, 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 Screenshots Using CasperJS

This is the 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 That Has 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 where 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 using $ casperjs test. If you would like CasperJS to generate a 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 I have used in writing test scenarios using CasperJS. For further details and implementation follow this link.

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
casperjs ,web dev ,automation testing ,javascript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}