Testing with CasperJS - Part 1

Reading time ~2 minutes

Today we will start a serie of tutorials about testing websites using CasperJS. We will cover installation and basic error detection, integration with a Team Foundation Server build and executing tests.

What is CasperJS?

In words of its creators, CasperJS is an open source navigation scripting & testing utility written in Javascript and based on PhantomJS — the scriptable headless WebKit engine. It eases the process of defining a full navigation scenario and provides useful high-level functions, methods & syntactic sugar for doing common tasks.

Installation

First of all we have to download the latest version of PhantomJS and extract the contact where you want. After that it's recommended to add this path to your PATH environment variable.

Now you can download the tag 1.0.2 of CasperJS repository on GitHub. You can clone the repository and checkout this tag:

$ git clone git://github.com/n1k0/casperjs.git
$ cd casperjs
$ git checkout tags/1.0.2

or you can download directly from here.

As before, it's recommended to add the path where you have downloaded CasperJS to your PATH environment variable. But don't add the base path, add the batchbin folder.

First steps

To test CasperJS we will use the web site created by the MVC internet application template of Visual Studio 2012. If you are not a .Net developer, please create a simple website with your prefered technology, and skip this step.

For .Net developers, open your VS2012 in administrator mode and create a new project with the MVC4 application project type

[caption id="attachment_32" align="alignnone" width="300"]Project template Project template[/caption]

And now chose the internet application template

ProjectCreation2

 

In order to facilitate our job, we will create a new web site on IIS and link it to our brand-new project. So please, open IIS manager and create a new website

[caption id="attachment_35" align="alignnone" width="599"]Web site creation Web site creation[/caption]

And now open the properties window of the web site application project in VS2012 and associate the project to the new web site we've just created

[caption id="attachment_36" align="alignnone" width="1199"]project properties project properties[/caption]

Now, add a folder under the Scripts folder and create a new JavaScript file called testCasperJS.js.

Working with CasperJS

All the scripts start with a call to 'create' method. The simplest way to do it is this:

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

You can pass a javascript settings object to this method with several parameters. For example, we could set the viewport size:

var casper = require('casper').create({
    viewportSize: {width: 1024, height: 768}
});

The next function we need to call is 'start'. This call could be without parameters or we could pass an Url and the function that will be called after the page downloading.

casper.start('http://localhost:8000/', function () {
    this.echo('page downloaded: ' + this.getCurrentUrl());
});

Now, we only need one more code block to end our first CasperJS script

casper.run(function () {
    this.echo("Done.").exit();
});

With this code, we are indicating to CasperJS that we want to run our script and that, when it finishes we  want to write 'Done' in the console and exit CasperJS.

Right now, we could save our script, open a Command Prompt, go where the script is located and write

casperjs testCasperJs.js

And we will see the result of our script

[caption id="attachment_42" align="alignnone" width="677"]script result script result[/caption]

Conclusions

In this post we have seen how to install CasperJS and how to make a very simple script. In the next posts of this series, we will see more operations to use and how to integrate all these scripts in a build for our Team Foundation Server.

See you soon!

 

 

 

 

 

Calling a Step Function

Until now we've seen how to create a Step Function, but we've always called them using the serverless framework. In this article we're go...… Continue reading