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:
HomeController.cs
Index.cshtml
Echo.cshtml
Hit F5 and see what we have:
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.
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:
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:
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:
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:
That’s it, we now have CasperJS based automatic UI test as part of our TeamCity integration and deployment setup.