Headless Testing with CasperJS

Nov 15, 2017 10:00:00 AM Mike

Illustration of computer and testing tools

Testing is a necessary part of the development process. Without sufficient testing, your project is going to run aground very quickly when you launch and that doesn’t make for many happy people. Human testing can be useful as you can get pretty quick feedback on obvious bugs and visual oddities. The problem is that humans can only test so much before they begin to go blind to little inconsistencies and start missing entire pages. Robots to the rescue!

Ghost in the Terminal

In this case, the robot we are going to use is going to be a testing framework. If you aren’t familiar, a testing framework is basically a system that you can build automated tests on. One of our favorites for the job is CasperJS. Casper is also a pretty friendly way to get into automated testing in general, so we would highly recommend you check it out if that is your thing. Writing simple tests for your site with Casper is pretty easy and you will see the benefits quickly.

Casper tests are simple on the surface. You can check that the right page is found after an action, whether or not text is visible, if certain elements exist on the page, and really anything else a user can see when viewing the website from a browser. What gives Casper this ability is the headless browser engine behind it, such as PhantomJS and SlimerJS. A headless browser is similar to a regular web browser, except this one has no graphical interface. It navigates the site according to directions sent to it (in this case from our Casper tests) and it is able to very closely reproduce the experience a live user would have. CasperJS can be installed with the npm terminal command which is available after installing NodeJS. If you aren’t interested in getting into Node right now, then there are other options for installing Casper and the docs are pretty detailed on how to get into it.

casperjs ghost laughing

Your bugs are hilarious

Conjure up some testing

Once you get Casper installed you’ll want to get in and start testing. Many spirited examples are present across the internet and especially on the casperjs.org site, but I would be happy give one or two more.


var siteUrl = "https://ashday.com";


casper.test.begin('Hello World Type Test', 2, function suite(test) {

casper.start(siteUrl).viewport(1366, 768).then(function() {

  test.assertHttpStatus(200, 'The site should respond without error.');

  test.assertTitleMatch(/Ashday Interactive Systems/, 'Our title should have our company name in it.');

});

casper.run(function() {

 test.done();

});

});


This little snippet of code is testing for two simple things and could prove useful early on in development. We are first establishing that the site responded without returning some unexpected code and then we are making sure that the title matches what we expect it to. When you run this in the command line, with casperjs test example.js, you get an output very similar to what you will see below. This output can be made more or less verbose as you go and can even be saved into an XML output if you are using some other automation utility that can read from it. At some point we’ll go into those a bit more in another post as those are quite a bit more involved.

Test file: example.js                                                     

# Hello World Type Test

PASS Hello World Type Test (2 tests)

PASS The site should load without issues.

PASS Our title should have our company name in it.

PASS 2 tests executed in 2.822s, 2 passed, 0 failed, 0 dubious, 0 skipped.

Automated testing is a wonderful thing. As you expand your testing tools, you will likely find you are no longer haunted by as many bugs and regressions on your sites. Ghost puns aside, you will really like how it feels to get automated and get into more testing. Headless browser testing is not a full test of your site and the functionality it has, so I would recommend backing it up with other types of tests or at least some human cross-browser testing.

MIKE OUT

New Call-to-action

Topics: Testing