CasperJS UI test on TeamCity – Step by step

CasperJS is a javascript based test utility, that can be used to drive a headless Webkit browser to perform automated UI testing of web applications. This blog post describes how to make CasperJS based UI testing a part of a TeamCity based continuous integration environment for your web application.

Project

First we’ll create a basic MVC4 web application in Visual Studio 2012 with some functionality that we can test.

Add a HomeController and two views to go along with it:

ControllerAndViews

HomeController.cs

Index.cshtml

Echo.cshtml

Hit F5 and see what we have:

Echo1

Echo2

This is the web application we want to test.

We have created a local IIS website called CasperJsDemo which can be accessed from “http://casperjsdemo” and set TeamCity up to publish to that website.

Getting CasperJS into the project

The next step is to get our first CasperJS testcase up and running.

Since we want to run the automated UI tests as part of our continous integration framework, we will not be installing CasperJS or PhantomJS, but rather we will include the necessary parts in the build, so it runs on any machine that checks out the repository, especially the TeamCity server.

Create a folder in the root of the project folder for the test code. We’ll call it “Test”. Create subfolders for PhantomJS (PhantomJsBin), CasperJS (CasperJsBin) and your CasperJS testcode (CasperJs).

Download the installation package for PhantomJS, which is the headless browser used by CasperJS and extract only the file phantomjs.exe into “Test/PhantomJsBin”.

Download the installation package for CasperJs, and extract “batchbin”, “modules”, “tests” and “package.json” into “Test/CasperJsBin”.

Copy “bin/bootstrap.js” from the installation package to “Test/CasperJsBin”.

Copy “bin/usage.txt” into a folder called “Test/bin” to get helpfull commandline hints about the usage.

FileStructure

Edit “Test/CasperJsBin/casperjs.bat” like shown below, so it points to phantomjs.exe and bootstrap.js in the locations we selected in the previous steps:ChangesToCasperJsBat
Open a command line and cd to “CasperJsBin” and execute the command casperjs. Hopefully you should see something like this:

You now have a self-contained CasperJS/PhantomJS environment in your project.

 Creating the first CasperJS test case

Now we are ready to create our first CasperJS test. Go to “Test/CasperJs” and create the testfile “TestEcho.js”

Go to the command prompt and run the test:

If all is well, the results should look like this

If you look in the folder “Test/CasperJsBin/batchbin” you can even see screenshots taken by the test script.

Run CasperJS from TeamCity

Now that we have a fully functional web application, a functional CasperJS UI test and I’m assuming you have set up automatic build and deployment in TeamCity, all that’s left is to make TeamCity run the CasperJS test as part of the build and make TeamCity recognize the output from CasperJS.

Luckily, CasperJS can output test results in a format that Teamcity can understand.

To run our CasperJS test we add a build step like this:

CasperBuildStep

The xunit=… option makes Casper save the test output in an xml file.

To read that xml-file go to Build steps => Additional build steps => Add Build feature and add XML report processing as a build feature:

AdditionalBuildFeatures

Now, when teamcity runs, we can see the test output in the build log:

Now, if we change our code to make the tests fail by echoing the string backwards:

We can see that TeamCity picks up on the failing test cases:

TestResultFailing

That’s it, we now have CasperJS based automatic UI test as part of our TeamCity integration and deployment setup.

 

This Post Has One Comment

  1. Thanks for this article, just what i was needing!
    I have some casperjs testscripts for my https pages, Could you post some other casperjs CI with Teamcity!

Leave a Reply

Close Menu