Functional testing is an important aspect of web development. However the lack of simple and platform agnostic tools makes this task hard for front-end developers. Fortunately for us, the landscape is evolving.

Functional testing is a quality assurance process that should mimic user interactions in order to test the correct behaviour of a system (web page/app).

Together with unit testing, functional testing should help you assure that your web page is behaving correctly. Moreover by automating this tasks, you can spot potential bugs and regressions sooner.

However, while there are a lot of great tools, documentation and examples for unit testing in JavaScript (QUnit, Mocha, …), functional testing is somewhat underdeveloped or related to a specific platform/framework (Capybara and Ember testing for instance).

Hopefully, during past year this situation began to change. Some new (and very promising) tools were released and the community around these tools is growing (and there is a W3C specification for WebDrivers so in future functional testing will be more fun and less buggy!).

Few names: Intern 2.0, Nightwatch.js, Webdriver.io, Casper.js

Choosing the right tool

What I was looking for was a somewhat standalone solution to test front-end code, not related to any backend/front-end technology. After trying the above 4 solutions I’ve chosen Intern because:

  • it tests real browsers through WebDrivers (missing in Casper.js)
  • it handles both unit and functional tests (missing in Nightwatch.js/Webdriver.io)
  • it has a nice chained & promise-based API (missing in Webdriver.io/Casper.js)
  • thanks to Leadfoot, it handles some WebDrivers quirks automatically
  • it is Selenium-server independent. If you run your tests only in Chrome/Android you just need ChromeDriver. Selenium server (35MB) and its dependency, Java JDK (510MB), is optional.

To be honest, Nightwatch.js is great too and I’d really love some of its features implemented in Intern, like:

  • ease to create custom commands
  • test tags, to run only particular tests
  • some built-in commands like waitForElementVisible

One criticism that I can raise against Intern is that the functional testing documentation is superficial. For instance it lacks:

  • an introduction to Leadfoot, the API you will use to drive the browser
  • an explanation on how to add custom commands/sequences (and the Page object example returns a promise)
  • a suggestion on how to automate a WebDriver start/stop, plus the test runner section is “disconnected”
  • some stuff is actually better explained in the tutorial, so go and read it.

 Get up and running

Install ChromeDriver:

brew install chromedriver

Install Intern and create the recommended directory structure:

npm install intern

Add the intern.js configuration file (use the official example as a starting point) and then add the Intern task to Grunt:

Gruntfile.js
module.exports = function (grunt) {

  // Load the Intern task
  grunt.loadNpmTasks('intern');

  grunt.initConfig({
    // ...
    intern: {
      options: {
        runType: 'runner', // defaults to 'client'
        config: 'tests/intern', // your intern.js file
      },
      all: {
        // my functional task, defaults
      },
    },
    // ...
  });

  grunt.registerTask('test', ['intern:all']);
}

Your first test

Now it’s time for your first test. Follow the official Intern tutorial to have a comprehensive overview on how to write a simple test. Once you are happy with your code, start chromedriver and run:

grunt test

The tests results will appear. Happy functional testing!!
On a final note, if you are looking for a way to automate the WebDriver start/stop, I’ve got a solution.