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!

 

 

 

 

 

Last week I attended to Agile Dev Practices, a brand-new conference done in Postdam, organized by Diaz Hilterscheid, the people behind the renowned Agile Testing Days. It was my third international conference (the first outside Spain) and the first one I have gone as a speaker.

I had the good fortune to assist to Carlos Blé tutorial about “Practical BDD for RIAs with JavaScript”. It was a great tutorial, more suitable to do in two days (or at least, one and a half) but equally great. I got useful insights and a lot of stuff to study.

That Monday at night, all the speakers went to the speakers dinner. I shared table with an amazing group of people like Jan Ehrhardt, Daniel Maslyn, Marko Taipale and Gáspár Nagy. A very funny and instructive dinner.

The conference itself went well. Maybe a little bit less people than expected, probably because of the coincidence with QCon conference and because of it was the first edition of the conference.

Some of the talks and the keynotes were really great, but the best, as always, was the possibility of knowing great professionals with tons of experience and be able to talk with them.

My session was on Wednesday. It consisted in three exercises to study the people’s behavior in a retrospective, ending with some advises to try to create a good environment in a retrospective. Here you have the extended version of the slides.

I encourage all of you to go to as many conferences outside your country you can. I know it could be a big expense, but sometimes a flight to a foreign country is cheaper than an internal one, and the hotels all expensive everywhere. But you will open your mind, meet great professionals and learn lots of things.

For my part, I take as homework to study Behavior Driven Development and Specflow in depth.