UI Testing With Casper JS

 

When you develop small or large application, testing is an important aspect of the development process. But how do you test reliably and continuously, when you don’t have people available to test your application every time it changes?

Over the years, developers use selenium, which works very well. But we’re always looking for newer, simpler ways to do what we do. So recently I’ve started to learn a promising new technology: PhantomJS

What Is PhantomJS?

PhantomJS is a headless WebKit with a JavaScript API. It has fast and native support for various Web standards: DOM handling, CSS selectors, JSON, Canvas, and SVG.

What Is CasperJS?

Casper is a navigation scripting and testing utility for PhantomJS, written in JavaScript. It allows us to test websites a lot like JUnit allow us to test our code.

Features

CasperJS has a range of features. In this article, I’ll focus on the Tester API. It has a range of functions and assertions that you expect from a good testing API, including:

  • assertTextExists
  • assertTitle
  • assertHttpStatus
  • assertDoesntExist
  • assertUrlMatch

I’ll use these assertions to show how CasperJS works. It also contains a set of other features, but I’m not going to focus on them in depth only enough to make a working example.

Requirements

If you haven’t already, install PhantomJS or CasperJS before we continue on.

Example

When I first loaded the ‘Home’ page on the Fear Ticket site, it looked like the image below. I’ve highlighted the starting point of the signup form.​​​​​​​