Front-end Integration Testing with JavaScript

Update (20/09/2014): I've updated the following walkthrough because people are still using it. It was originally written back in 2012 and parts of it were really out of date e.g. almost all the installation process can now be replaced with "npm i -g casperjs phantomjs" (we have npm now, yay!). Give me a shout if something is still out of date. If you've commented (thank you <3) but your comments keep disappearing, that's my bad and I'm sorry. They will reappear. I just need to merge over all the existing comments from a previous platorm first.

Integration testing gives you peace of mind that everything is working the way it should. Normally when I speak to other engineers about work, we end up speaking about workflow, tools and release processes. I'm always surprised by the amount of front-end engineers that don't write integration test. When asked why, they give the following answers:

"I did have a look at Selenium, but it freaked me out. Getting it installed and ready to go looked a right pig!"

"The back-end guys usually just do that"

"I don't really get time to do any of that kind of stuff but I'd like to"

"Integration Testing? Say whaaaaattt?"

So rounding up the problems that people are facing, we get the following:

  • Time and effort it takes to get setup
  • Complex APIs and steep learning curves
  • General lack of exposure

Introducing PhantomJS & CasperJS

PhantomJS is a headless WebKit with JavaScript API. CasperJS is a navigation scripting & testing utility that runs on top/alongside of PhantomJS.

If you're thinking "headless WebKit??!!?", then it might be easier for you picture PhantomJS as a web inspector console that can be injected into any web page that you want, then accessed and used.

CasperJS makes it alot easier for you to navigate around a web page testing as you go. To be fair, my explanations don't do these two tools enough justice. Please visit http://phantomjs.org/ and http://casperjs.org/ for a better explanation and more advanced features that aren't covered here.

Both are really easy to use and extremely powerful!

Getting Started!

Requirements (for this walkthrough):

  • Mac OSX
  • Terminal app
  • Ruby
  • Homebrew

First things first, your Mac probably already has Ruby installed (You can check by running "ruby -v" in the terminal).

You will need Homebrew. Granted other package managers are out there, but you still need Homebrew in your life. I love Homebrew.

I've tried installing PhantomJS via other (non-package manager) methods and it was a shameful experience, trust me.

Don't worry installing Homebrew is pretty damn easy.

Step 1:

Open up the terminal and copy and paste the following into it. Hit enter. This may take a few minutes to finish.

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Step 2:

Confirm Homebrew is all up in your system.

brew --version && brew help

This will output the Homebrew (brew) version number and the help menu, should you fancy a quick rummage around.

Step 3:

Install PhantomJS. This may take a few minutes to run.

brew install phantomjs

Anyone one that tried and failed to install PhantomJS using the downloadable executable will be kicking themselves now (me included).

Step 4:

Has PhantomJS installed? Which version have I got?

phantomjs --version && phantomjs --help

This will do the same as Step 2 but for PhantomJS.

Step 5:

Install CasperJS by running the following commands one after another:

brew install casperjs

Check CasperJS is installed

casperjs --version

Now just to verify that everything is installed in a suitable place please run the following:

which brew && which casperjs && which phantomjs

Which should output something similar to the following:

/usr/local/bin/brew
/usr/local/bin/casperjs
/usr/local/bin/phantomjs

Now that everything is installed and ready to go we can get started with some basic tests. For example purposes only I'm going to run and build the test in a folder called "integration_tests" on the desktop (very imaginative I know). Normally, you would have them checked in to your project repo so other team members can add tests and use exisiting ones.

cd ~/Desktop
mkdir integration_tests
cd integration_tests
touch duckduck.js

Now open up duckduck.js with your favourite text editor e.g. sublime duckduck.js or mate duckduck.js

Copy and paste the following code and save the file:

Now run the following in the terminal:

casperjs test ~/Desktop/integration_tests/duckduck.js

You should get something cool like the following:

The above is just scraping the surface of what we can do. See http://phantomjs.org/ and http://casperjs.org/ for more information.

If you didn't get the above result then please let me know what went wrong and we can update this to help others. Also, if you think I made a mistake or think something would be easier to understand, please let me know!

Leave a comment -