November 14, 2013 / by Malte Warncke / / @

Set up Jenkins with CasperJS

This article will show you how to set up your Jenkins to run automated CasperJS tests. CasperJS provides an testing utility and can be used for scripted navigation tests.

First things first

Since CasperJS needs PhantomJS to run, we need to install PhantomJS first. It wouldn’t be fun, if this process where to easy. Luckily other people have fought the problems. We only need to use the console. Feel free to use any newer version.

cd /usr/local/share
wget http://phantomjs.googlecode.com/files/phantomjs-1.9.1-linux-x86_64.tar.bz2
tar xjf phantomjs-1.9.1-linux-x86_64.tar.bz2

sudo ln -s /usr/local/share/phantomjs-1.9.1-linux-x86_64/bin/phantomjs /usr/local/share/phantomjs

sudo ln -s /usr/local/share/phantomjs-1.9.1-linux-x86_64/bin/phantomjs /usr/local/bin/phantomjs

sudo ln -s /usr/local/share/phantomjs-1.9.1-linux-x86_64/bin/phantomjs /usr/bin/phantomjs

After we downloaded and unziped PhantomJS and created a few symlinks, we can proceed with installing CasperJS. Its the basicly the same. But you need to edit two placeholders. <filename> is the name of the downloaded file and <casperjs foldername> the name of the unziped folder.

cd /usr/local/share
wget https://github.com/n1k0/casperjs/tarball/1.0.3

tar xvf <filename>
sudo ln -s /usr/local/share/<casperjs foldername>/bin/casperjs /usr/local/share/casperjs
sudo ln -s /usr/local/share/<casperjs foldername>/bin/casperjs /usr/local/bin/casperjs
sudo ln -s /usr/local/share/<casperjs foldername>/bin/casperjs /usr/bin/casperjs

It is important that you check the Version after installing with

casperjs --version

It needs to be (at least) 1.0.3. In my case it didn’t work. I had the Version 1.0.2, although I downloaded 1.0.3 with wget https://github.com/n1k0/casperjs/tarball/1.0.3. But something mysterical happend and I got 1.0.2. The problem was CasperJS wouldn’t run with that version.
If you haven’t this problem please proceed to next capter. For all those cursed people like me, don’t panic, there is a solution. Remove all the files you just downloaded and created and start again with the master branch (or the 1.1.0-beta1 version (or any newer)):

cd /usr/local/share
wget https://github.com/n1k0/casperjs/tarball/master
tar xvf <filename>
sudo ln -s /usr/local/share/<casperjs foldername>/bin/casperjs /usr/local/share/casperjs
sudo ln -s /usr/local/share/<casperjs foldername>/bin/casperjs /usr/local/bin/casperjs
sudo ln -s /usr/local/share/<casperjs foldername>/bin/casperjs /usr/bin/casperjs

Thats it! Now you can use CasperJS on Jenkis.

Things you need to do, when …

… you want automated tests for your development branch:

1. Has Jenkins a web server?
2. Are the vhosts and other hosts files correct?
3. Are the logs and cache folders writable?

… you want to execute the casperjs test during Jenkins’ build process:

1. Create a bash script which calls the casperjs tests, but don’t forget to log your results

   #!/bin/bash
   #
   casperjs test --xunit=path/to/build/casperjs_tests/log.xml casperjs_tests/my_test/execute_casperjs_tests.js
   

   If you face a path probleme use relative path insted of absolute paths. The bash script would look like this for example:

   #!/bin/bash
   #
   cd casperjs_tests/my_test
   casperjs test --xunit=path/to/build/casperjs_tests/log.xml ./execute_casperjs_tests.js
   

2. Now you need set up Jenkins to call the script. Choose configuration from the project menu and add the build step “execute shell”. Now you can call your bash script.

   sh path/to/bash_script 
   

   Instead of calling the bash_script you can call casperjs directly. Do what you like. But I prefere to call a script, since changing a file is easier than changing a configuration in your Jenkins set up.

3. Finaly we need to evaluate the log.xml which contains the CasperJS test results. You need to create a new post build event. Select “Publish Performance test result report”, add a new JUnit report and point to your CasperJS log.xml.
   DONE!

… you face path problems during test execution

When you split testcase and testdata, which I highly recommend, CasperJS might not able to find your testcase file. In that case it might help to use an absolute path with PhantomJS’ require function.
When this fails

var myTest = require('myTest');

The fs.absolute() function should help:

var myTest = require(fs.absolute('myTest'));

Have fun and keep crafting!

Src: CasperJS