On past projects I have relied on WebDriver to automate and write User Journey tests. This involved using either .Net or Java, which is fine, however much to my delight I was informed that there is a JavaScript version! Here’s a brief outline on how to get started with WebDriverJS and let the good times roll!
If you have node installed then you are good to go. If not, off you go ahead and install it now (you can build it from source too if you are that way inclined).
- open up your favourite terminal window and install selenium webdriver using npm:
npm install selenium-webdriver - WebDriverJS uses Mocha as it’s test runner, so go ahead and install that next:
npm install -g mocha - You will also need the selenium standalone server (I suggest you put the selenium stand alone server jar in a vendor folder in your project).
That’s all the software you will need, but before we get stuck in, I like to to follow a folder structure that looks a little like this:
vendor
test
functional
helpers
unit
Right let’s write some code! I’ll start off with a few helper node modules (these live in test/functional/helpers) that’ll make things a little bit more re-usable. Let’s start with a helper to start the selenium server:
var assert = require('assert'),
fs = require('fs'),
remote = require('selenium-webdriver/remote'),
SELENIUM = '../vendor/selenium/selenium-server-standalone-2.32.0.jar',
server;
exports.setUpServer = function () {
var jar = process.env.SELENIUM;
if(!jar) {
jar = SELENIUM;
}
assert.ok(!!jar, 'SELENIUM variable not set');
assert.ok(fs.existsSync(jar), 'The specified jar does not exist: ' + jar);
server = new remote.SeleniumServer({ jar: jar, port: 4444 });
server.start();
return server;
}
And now for the WebDriver helper:
var webdriver = require('selenium-webdriver');
exports.setUpWebDriver = function(server) {
return new webdriver.Builder().
usingServer(server.address()).
withCapabilities({ 'browserName': 'firefox' }).
build();
};
exports.By = webdriver.By;
This setup assumes you have FireFox installed, as it’s the simplest browser to get started with, but you can use a bunch of different ones. Now for our test, which will go to a page and assert the value of a title is correct.
var assert = require('assert'),
test = require('selenium-webdriver/testing'),
serverHelper = require('./helpers/server.helper'),
webDriverHelper = require('./helpers/webdriver.helper'),
driver,
server;
test.before(function () {
server = serverHelper.setUpServer();
driver = webDriverHelper.setUpWebDriver(server);
driver.get('http://www.google.co.uk/');
});
test.describe('Homepage view', function () {
test.it('should have the correct title', function () {
driver.getTitle().then(function (title) {
assert.equal(title, 'Google');
});
});
});
test.after(function () {
driver.quit();
server.stop();
});
This file lives in your functional test folder and let’s call it test-journey.js. It basically sets up the server and driver (i.e. starts our browser and navigates to Google), before running the simple title assertion and when done, closes the browser and server. To run this test, in your terminal window inside test/functional, type:
mocha -R list test-journey.js
Keep your fingers crossed and after a few moments FireFox should fire up and run the test. If the test passed, then your console should display something like this:
. Homepage view should have the correct title: 407ms
1 test complete (13 seconds)
Pretty straightforward, no?