Getting Started Guide to Browser Testing with WebDriver.IO and Mocha and Chai

After evaluating a handful of browser testing libraries, I settled upon WebDriverIO. The main reason I made the choice that I did was because of the documentation.

In my opinion the majority of browser testing libraries have documentation which is scarce at best. Some of the ones which I evaluated were ZombieJS, PhantomJS, and Selenium.

I really like Selenium, because it is more than just a headless browser for tests. With Selenium, I can change the browser engine quickly with one line like this:

var options = { desiredCapabilities: { browserName: ‘phantomjs’ } };

I haven’t really toyed around with this yet, but I assume that I could enumerate through a number of different browser engines at run time to run my tests against multiple different browsers to find out how it performs on different rendering engines.

Webdriver.io describes itself as webdriver bindings for Node. I’m not exactly sure what that means, but after agonizing over the setup of Selenium for several hours, I decided to ditch it and go with Webdriver.io instead.

The setup for Webdriver.io was surprisingly easy, and yet similar to Selenium at the same time. At the top of my test file I basically only needed these lines:

const chai = require('chai');
const expect = chai.expect;
const webdriverio = require('webdriverio');
var options = { desiredCapabilities: { browserName: 'chrome' } };
const client = webdriverio.remote(options);

Then off to the next challenge: figuring out how to use it. Compared to other browser testing suites, Webdriver.IO has beautiful documentation. Nevertheless, I still struggled over implementation for a while until a friend helped me figure it out. I think the issue is that I learn mostly by looking at sample code to understand how everything fits together. Finding good sample code is especially important to me when learning to do browser testing, because there are so many moving parts. You are not just learning the commands for your browser suite, but you are also (at least in my case,) learning to use a testing framework at the same time, in this case Mocha, and Chai. Being able to understand how they fit together is somewhat challenging.

I spent some time with my associate running through sample code and after an hour we had a running joke about how the only thing the sample code shows you how to do is get the title of the page. Its really not a joke. We must have looked at 10–15 different samples. Every single one showing this ridiculously simplistic example:

.getTitle().then(function (title) {                                       assert.strictEqual(title,'How people build software · GitHub');                                   })

Okay, so that’s how I get the title. How about something more meaningful? For example finding if an element exists on the page? I couldn’t find anything. Fortunetly, the documentation is very good. We decided that the best way to assert the existence of an element on the page was with this line:

it('It should display Title field', async () => {
const isExisting = await client.isExisting('#title');
expect(isExisting).to.be.true;
});

This works great, and takes advantage of async await. The only other thing we needed to add was the before and after blocks:

before((done) => {
client.init().url('http://localhost:3000/PostJob').then(() => done());
});
after(function(){
client.end();
});

Then putting it all together, here is a short example of a full test file which tests for the existence of one element:

const chai = require('chai');
const expect = chai.expect;
const assert = chai.assert;
const webdriverio = require('webdriverio');
var options = { desiredCapabilities: { browserName: 'phantomjs' } };
const client = webdriverio.remote(options);
describe('Post Job page', () => {
  before((done) => {
client.init().url('http://localhost:3000/PostJob').then(() => done());
});
  after(function(){
client.end();
});
  it('It should display Address field', async () => {
const isExisting = await client.isExisting('#address');
expect(isExisting).to.be.true;
});
});

I hope this guide helps you to get started easily with browser testing on Mocha and Chai.