Blog

Posted July 16, 2012

Javascript testing in parallel with WD.js and Selenium

Like bow ties, Javascript is cool. People love it so much that they're bringing it everywhere (server, desktop UI, etc). If you do Javascript development, you probably love it for its funkiness - even if your code is pretty crazy. But that's ok, because your code base is (hopefully) extensively tested... But wouldn’t you love it if everything (tests included) were in Javascript? Ok, maybe your unit tests already are (more on this later), but what about the functional ones, too? Well, good news awaits. Now you can write your tests in Javascript with the WD.js (pronounced wood) node library and run them across multiple browsers in parallel using Selenium. Read on to learn more about three different projects to help with this.

Parallel WD and Synchronous Parallel WD

One of the biggest pains of web development is the heterogeneity of the platforms on which your code will run. Even if things are getting better with more people following a standard, things are far from perfect, especially with the rise of mobile web. One of the roles of automation and testing is to make it easier to check that your code is behaving correctly in all browsers. Up until recently, you could share the test logic, but you still had to set up the different browser and you had no way to run in parallel. These two libraries, Parallel WD and Synchronous Parallel WD, are designed to take the pain away and address those problems. This is achieved by letting you write your test once, declare the browsers in which you want the test run, and then let the libraries run it in parallel - all while keeping it as close to the same vanilla browser code. This library comes in two flavors. One is a classical Javascript asynchronous callback-based library. The vanilla asynchronous test looks like this:

1
var webdriver = require('wd'),
2
assert = require('assert');
3

4
var browser = webdriver.remote();
5

6
browser.on('status', function(info){
7
  console.log('\x1b[36m%s\x1b[0m', info);
8
});
9

10
browser.on('command', function(meth, path){
11
  console.log(' > \x1b[33m%s\x1b[0m: %s', meth, path);
12
});
13

14
browser.init({
15
    browserName:'firefox'
16
    , tags : ["examples"]
17
    , name: "This is an example test"
18
}, function() {
19

20
    browser.get("http://saucelabs.com/test/guinea-pig", function() {
21
	browser.title(function(err, title) {
22
	    assert.ok(~title.indexOf('I am a page title - Sauce Labs'), 'Wrong title!');
23
	    browser.elementById('comments', function(err, el) {
24
		el.sendKeys("this is not a comment", function(err) {
25
		    browser.elementById('submit', function(err, el) {
26
			el.click(function() {
27
			    browser.eval("window.location.href", function(err, title) {
28
				assert.ok(~title.indexOf('#'), 'Wrong title!');
29
				browser.elementById("your_comments", function(err, el) {
30
				    el.textPresent("this is not a comment", function(err, present) {
31
					assert.ok(present, "Comments not correct");
32
					el.text(function(err, text) {
33
					    console.log(text);
34
					    browser.quit();
35
					})
36
				    })
37
				})
38
			    })
39
			})
40
		    })
41
		})
42
	    })
43
	})
44
    })
45
});

The parallelized version looks like this:

1
var webdriver = require('wd-parallel-async')
2
  , assert = require('assert');
3

4
var parallelizer = webdriver.parallelizer();
5

6
parallelizer.run([{
7
    browserName:'chrome',
8
    tags: ["examples"],
9
    name: "This is an example test",
10
},{
11
    browserName:'firefox',
12
    tags: ["examples"],
13
    name: "This is an example test",
14
}], function(browser, desired) {
15
    browser.on('status', function(info){
16
	console.log('\x1b[36m%s\x1b[0m', info);
17
    });
18

19
    browser.on('command', function(meth, path){
20
	console.log(' > \x1b[33m%s\x1b[0m: %s', meth, path);
21
    });
22

23
    browser.init(desired, function() {
24

25
    browser.get("http://saucelabs.com/test/guinea-pig", function() {
26
	browser.title(function(err, title) {
27
	    assert.ok(~title.indexOf('I am a page title - Sauce Labs'), 'Wrong title!');
28
	    browser.elementById('comments', function(err, el) {
29
		el.sendKeys("this is not a comment", function(err) {
30
		    browser.elementById('submit', function(err, el) {
31
			el.click(function() {
32
			    browser.eval("window.location.href", function(err, title) {
33
				assert.ok(~title.indexOf('#'), 'Wrong title!');
34
				browser.elementById("your_comments", function(err, el) {
35
				    el.textPresent("this is not a comment", function(err, present) {
36
					assert.ok(present, "Comments not correct");
37
					el.text(function(err, text) {
38
					    console.log(text);
39
					    browser.quit();
40
					})
41
				    })
42
				})
43
			    })
44
			})
45
		    })
46
		})
47
	    })
48
	})
49
    })
50
});

As you can see, the test logic is identical. The only difference is declaring the array of browsers. The synchronous flavor follows exactly the same principals, but is based on the wd-sync library, which lets you write your tests in a more classical, procedural way. Here is an example:

1
var p_webdriver = require('wd-parallel');
2

3
var username = "<USERNAME>",
4
accessKey = "<ACCESS KEY>";
5

6
var browsers = p_webdriver.remote(
7
    "ondemand.saucelabs.com",
8
    80,
9
    username,
10
    accessKey
11
);
12

13
// Desired
14
var p_desired = [
15
    {tags: ["examples"], name: "parallel test 1/4", browserName: "firefox"},
16
    {tags: ["examples"], name: "parallel test 2/4", browserName: "chrome"},
17
    {tags: ["examples"], name: "parallel test 3/4", browserName: "firefox", platform: "LINUX"},
18
    {tags: ["examples"], name: "parallel test 4/4", browserName: "chrome", platform: "LINUX"}
19
]
20

21
// Test
22
browsers.test = function(browser, desired) {
23

24
    console.log("server status:", browser.status());
25
    browser.init(desired);
26

27
    browser.get("http://google.com");
28
    console.log("title is "+browser.title());
29

30
    var queryField = browser.elementByName('q');
31
    browser.type(queryField, "Hello World");
32
    browser.type(queryField, "\n");
33

34
    browser.setWaitTimeout(3000);
35
    browser.elementByCss('#ires'); // waiting for new page to load
36
    console.log(browser.title());
37

38
    browser.quit();
39
};
40

41
// Run
42
browsers.run(p_desired);

WD Unit

The last library I want to discuss is wd-unit. Earlier, I mentioned Javascript unit tests. There are a lot of great unit test frameworks out there, such as Jasmine, foounit and QUnit, to name a few. Since Selenium is for web browser automation, it's better suited for functional testing rather than unit testing. So what is this wd-unit and how can it help you? Selenium drives the web browsers that Javascript unit tests are run in, so it actually makes a lot of sense to pair them together. This is what wd-unit does - automate the running of your Javascript unit tests. Here's an example. Let's say you have a some foounit test cases. You could easily write a script that launches the browser aimed at the right page. But you still have two problems: how do you know when everything has finished and how do you get the results? This is where Selenium and wd-unit come in. They will run your tests and then output the results back to the console they were launched from. Additionally, using Selenium has some added benefits. You can run everything in the cloud with a service such as Sauce Labs across multiple browsers in parallel. This is what running the Jasmine example tests (remote) look like with Sauce:

1
var launcher = require('wd-unit');
2

3
var
4
username = 'username',
5
accessKey = 'accessKey';
6

7
var saucelabs = {
8
    host: "ondemand.saucelabs.com",
9
    port: 80,
10
    username: username,
11
    accessKey: accessKey
12
}
13

14
launcher.run({
15
    runner: 'jasmine',
16
    addr: 'pivotal.github.com',
17
    port: 80,
18
    page: 'jasmine',
19
    desired: [
20
	{browserName: 'firefox', name: "wd-unit jasmine 1/4"},
21
	{browserName: 'chrome', name: "wd-unit jasmine 2/4"},
22
	{browserName: 'firefox', platform: "LINUX", name: "wd-unit jasmine 3/4"},
23
	{browserName: 'chrome', platform: "LINUX", name: "wd-unit jasmine 4/4"}
24
    ],
25
    wd_args: saucelabs
26
});
27

This code, which runs on the Pivotal example page from the Sauce cloud, outputs the results to your console after running in parallel across Firefox and Chrome on Linux and Windows. You can run it across even more browsers in parallel by adding additional desired capabilities to the tests. To contribute to these projects, visit wd.js on Github. Happy testing!

Mathieu Sabourin

Published:

Jul 16, 2012

Topics

Product Updates

Test Automation Frameworks

Share this post

EEA

CCPA

Cookie Settings