Testing with CasperJs – Introduction


(Crossposting from vgaltes.com )

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.


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

Project template
Project template

And now chose the internet application template



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

Web site creation
Web site creation

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

project properties
project properties

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:

1 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:

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

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.

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

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

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

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

1 casperjs testCasperJs.js

And we will see the result of our script

script result
script result


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!


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *