Continuous local WebdriverIO testing with 'onchange' and 'node-notifier'

I've been building out a bunch of content for my WebdriverIO course recently and wanted to share a neat idea (I think so anyways) for a minor addition to your WebdriverIO suite.

Update: WebdriverIO now supports "watch" mode out of the box

Using two NPM packages and a little bit of scripting, we can run our tests automatically on file change, and send a system notification on test failure (similar to how grunt-watch or Chimp's 'watch' configuration work).

Here's what it looks like:

To achieve this, do three things:

  1. Install 'onchange' and 'node-notifier': npm install --save-dev onchange node-notifier
  2. Add this line to your package.json scripts property: "test:watch": "onchange 'src/**/*.[css,js,html]' 'test/**/*.js' -- wdio"
  3. Add the following to your wdio.conf.js file:
var notifier = require('node-notifier');

exports.config = {  
    // ...All your other configs...
    onPrepare: function (config, capabilities) {
        notifier.notify({
            title: 'WebdriverIO',
            message: 'Test run started'
        });
    },
    afterTest: function (test) {
        if (!test.passed) {
            notifier.notify({
                title: 'Test failure!',
                message: test.parent + ' ' + test.title
            });
        }
    },
    onComplete: function(exitCode) {
        notifier.notify({
            title: 'WebdriverIO',
            message: 'Tests finished running.'
        });
    }
}

You can then run your 'watch' script with npm run test:watch and your tests will execute every time you make a change.

This might be overkill for some type of dev work, but can be handy in specific situations, especially when you're debugging a test.

I go in to this step by step in Module 5, Lesson C of my WebdriverIO course if you want further details.