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.