The Lamp Post

A blog about life, productivity and front-end web development.

mail twitter rss2 youtube twitch steam2 github linkedin stackoverflow
The Web App Testing Guidebook - UI Testing of Real World Websites Using WebdriverIO

Functional Test Architecture with WebdriverIO

Save to Pocket

I wanted to record a brain dump of the architecture I've been using for my functional test suites. The main structure consists of three parts:

  1. Node.js
  2. WebdriverIO & WebdriverCSS
  3. Mocha & Chai

Node.js

Using WebdriverIO means using Node.js. This is actually a great thing for me as a front-end dev because:

  1. I'm already familiar with JavaScript, making it easier for to write test suites.
  2. Allows me to have a consistent development environment. I use Mocha/Chai for my unit tests as well. I use NPM for dependency management. And most importantly, I don't have to install and maintain of another language engine.

WebdriverIO

WebdriverIO (wdio for short) provides Selenium bindings for NodeJS. This allows me to control the browser using Selenium, which brings a lot of functionality to my test automation.

WebdriverCSS is a plugin to wdio, which provides the ability to do visual regression testing. I layer WebdriverCSS on top of WebdriverIO to provide extra functionality in my tests.

Mocha/Chai

Mocha, a JavaScript test framework, brings several features to my testing suite, including: CI integration, pre/post-test hooks, and the ability to configure specific test runs.

Chai is an assertion language that lets me write assertions in a more human-readable manner.

I use the 'expect' syntax for assertions. For example:

browser
	.title(function(err, res) {
		expect(res.value).to.equal("Inbox");
	});

All of these tools combined give me a great testing setup that doesn't require context-switching or extra maintenance.