javascript integration testing for one page applications

Question

I am currently developing a one page javascript application using Sinatra Ruby on server side and Backbone.js, jQuery, jQuery UI for the client side. The application main purpose is to allow a customer to view/edit different kind of items, each item view being a more or less complicated form.

To make sure everything works right I am planning to do:

• unitary tests using QUnit
• functional/integration tests

What frameworks/tools do you recommend for integration testing in this case ? I started with Selenium but I didn't like it too much. I just started to look at PhantomJS and CasperJS and they seem pretty nice for basic stuff like navigating, clicking on links, ...

What's your advice ?

Answer 1

You didn't say what you didn't like about Selenium, but I'm guessing you are confident with JavaScript, so my recommendation would be to use CasperJS as the main tool. It does work well with one-page web apps, and comes with its own testing tool. The code can still get a bit convoluted at times, when using nested wait clauses; deal with that by making sure you don't try to do too much in each test, and then if still complex, refactor. And don't forget design-for-testing: if your selector is horribly complex, consider adding a <span id="xxxx">...</span> around it, so your tests can go straight to it!

You can use CasperJS with both PhantomJS and SlimerJS. My preference is for SlimerJS currently, as:

• PhantomJS 1.x is stuck on an old WebKit (equivalent to Safari 5.1 and Chrome 13), so testing any more modern features is frustrating.
• SlimerJS can either work with the Gecko engine, or directly with a version of Firefox you have installed. This allows you to configure a Firefox profile with extra plugins, security certificates, etc.
• SlimerJS is written in JavaScript, so easier to hack if you have the need.

Once PhantomJS 2.0 comes out (around the end of 2013, hopefully), or if your site does not rely on any recent HTML5 APIs, you can run CasperJS twice, to get double coverage. (BTW, PhantomJS is naturally headless; SlimerJS needs to use Xvfb, which is Linux or Mac only.)

What Selenium gives you extra is you can control other browsers, IE in particular. (Though of course for IE you need to run a Windows machine.) Selenium, like SlimerJS, needs Xvfb to be headless (again, excluding Windows). (BTW, the Selenium docs on supported browsers has not been updated in ages, but I'm assuming later versions of each browser have at least the same support shown there.)