WebdriverJS

What is WebdriverJS

Webdriverjs lets you control a browser or a mobile application with just a few lines of code. Creating automated tests is as easy as:

 1 var webdriverjs = require('webdriverjs');
 2 var options = { desiredCapabilities: { browserName: 'chrome' } };
 3 
 4 webdriverjs
 5     .remote(options)
 6     .init()
 7     .url('http://www.google.com')
 8     .title(function(err, res) {
 9         console.log('Title was: ' + res.value);
10     })
11     .end();

How does it work?

WebdriverJS is an open source testing utility for nodejs. It makes it possible to write super easy selenium tests with Javascript in your favorite BDD or TDD test framework. Even Cucumber tests are supported.

It basically sends requests to a Selenium server via the WebDriver Wire Protocol and handles with its response. These requests are wraped in useful commands, which provides callbacks to test several aspects of your site in an automated way.

Run your tests in the cloud

Services like Sauce Labs or BrowserStack provide selenium testing on remote hosts. Be able to run tests on a wide collection of plattforms, devices and browser combinations without any configuration in your enviroment.

Webdriverjs supports services like:

Sauce Labs BrowserStack TestingBot

Install

Either download from github or use NPM.

1 npm install webdriverjs

To run tests on your local machine, you have to download a selenium standalone server which executes the selenium commands. You find the latest version here. Or just use the selenium-standalone package to run a server easily.

Write Tests

Run selenium server first:

1 java -jar path/to/your/selenium-server-standalone-2.39.0.jar

WebdriverJS is just a simple library which enables Selenium testing for your TDD/BDD tests. It provides simple functions for navigating the web browser or mobile application and checking attributes and states of elements. Check out the examples.

Examples

BDD/TDD test framework:
 1 var webdriverjs = require('webdriverjs'),
 2     assert      = require('assert');
 3  
 4 describe('my webdriverjs tests', function(){
 5  
 6     this.timeout(99999999);
 7     var client = {};
 8  
 9     before(function(){
10             client = webdriverjs.remote({ desiredCapabilities: {browserName: 'phantomjs'} });
11             client.init();
12     });
13  
14     it('Github test',function(done) {
15         client
16             .url('https://github.com/')
17             .getElementSize('.header-logo-wordmark', function(err, result) {
18                 assert(err === null);
19                 assert(result.height === 32);
20                 assert(result.width  === 89);
21             })
22             .getTitle(function(err, title) {
23                 assert(err === null);
24                 assert(title === 'GitHub · Build software better, together.');
25             })
26             .getElementCssProperty('css selector','a[href="/plans"]', 'color', function(err, result){
27                 assert(err === null);
28                 assert(result === 'rgba(65,131,196,1)');
29             })
30             .call(done);
31     });
32  
33     after(function(done) {
34         client.end(done);
35     });
36 });
 1 var chai        = require('chai'),
 2     assert      = chai.assert,
 3     expect      = chai.expect,
 4     webdriverjs = require('webdriverjs');
 5  
 6 describe('my webdriverjs tests', function(){
 7  
 8     this.timeout(99999999);
 9     var client = {};
10  
11     before(function(){
12             client = webdriverjs.remote({ desiredCapabilities: {browserName: 'phantomjs'} });
13             client.init();
14     });
15  
16     it('Github test',function(done) {
17         client
18             .url('https://github.com/')
19             .getElementSize('.header-logo-wordmark', function(err, result) {
20                 expect(err).to.be.null;
21                 assert.strictEqual(result.height , 32);
22                 assert.strictEqual(result.width, 89);
23             })
24             .getTitle(function(err, title) {
25                 expect(err).to.be.null;
26                 assert.strictEqual(title,'GitHub · Build software better, together.');
27             })
28             .getElementCssProperty('css selector','a[href="/plans"]', 'color', function(err, result){
29                 expect(err).to.be.null;
30                 assert.strictEqual(result, 'rgba(65,131,196,1)');
31             })
32             .call(done);
33     });
34  
35     after(function(done) {
36         client.end(done);
37     });
38 });
 1 var buster      = require("buster"),
 2     webdriverjs = require('webdriverjs');
 3  
 4 buster.testCase("my webdriverjs tests", {
 5  
 6     'setUp': function() {
 7         this.timeout = 9999999;
 8  
 9         client = webdriverjs.remote({ desiredCapabilities: {browserName: 'phantomjs'} });
10         client.init();
11     },
12  
13     'test it': function (done) {
14         client
15             .url('https://github.com/')
16             .getElementSize('.header-logo-wordmark', function(err, result) {
17                 assert(err === null);
18                 assert(result.height === 32);
19                 assert(result.width  === 89);
20             })
21             .getTitle(function(err, title) {
22                 assert(err === null);
23                 assert(title === 'GitHub · Build software better, together.');
24             })
25             .getElementCssProperty('css selector','a[href="/plans"]', 'color', function(err, result){
26                 assert(err === null);
27                 assert(result === 'rgba(65,131,196,1)');
28             })
29             .call(done);
30     },
31  
32     'tearDown': function(done) {
33         client.end(done);
34     }
35 });
 1 Feature: Example feature
 2   As a user of webdriverjs
 3   I should be able to use different commands
 4   to get informations about elements on the page
 5  
 6   Scenario: Get size of an element
 7     Given I go on the website "https://github.com/"
 8     When I use getElementSize() on the element ".header-logo-wordmark"
 9     Then I should get a width of "89" and height of "32"
10  
11   Scenario: Get title of website
12     Given I go on the website "https://github.com/"
13     When I use getTitle() to get the title of this website
14     Then the command should return "GitHub · Build software better, together."
15  
16   Scenario: Get CSS property of element
17     Given I go on the website "https://github.com/"
18     When I use getElementCssProperty() to get the "color" attribute of an element with "css selector" "a[href='/plans']"
19     Then the command should return "rgba(65,131,196,1)"
 1 /**
 2  * to run these tests you need install Cucumber.js on your machine
 3  * take a look at https://github.com/cucumber/cucumber-js for more informations
 4  *
 5  * first, install Cucumber.js via NPM
 6  * $ npm install -g cucumber
 7  *
 8  * then go into the cucumber directory and start the tests with
 9  * $ cucumber.js
10  */
11  
12 var webdriverjs = require('webdriverjs'),
13     assert      = require('assert');
14  
15 var sharedSteps = module.exports = function(){
16  
17     var client    = webdriverjs.remote({ desiredCapabilities: {browserName: 'phantomjs'}, logLevel: 'silent' }),
18         tmpResult = null;
19     client.init();
20  
21     this.Given(/^I go on the website "([^"]*)"$/, function(url, next) {
22         client
23             .url(url)
24             .call(next);
25     });
26  
27     this.When(/^I use getElementSize\(\) on the element "([^"]*)"$/, function(className, next) {
28         client
29             .getElementSize(className, function(err, result) {
30                 assert(err === null, 'command getElementSize() returns with an error');
31                 tmpResult = result;
32                 next();
33             });
34     });
35  
36     this.When(/^I use getTitle\(\) to get the title of this website$/, function(next) {
37         client
38             .getTitle(function(err, title) {
39                 assert(err === null, 'command getTitle() returns with an error');
40                 tmpResult = title;
41                 next();
42             });
43     });
44  
45     this.When(/^I use getElementCssProperty\(\) to get the "([^"]*)" attribute of an element with "([^"]*)" "([^"]*)"$/, function(attribute, findBy, cssSelector, next) {
46         client
47             .getElementCssProperty(findBy, cssSelector, attribute, function(err, result) {
48                 assert(err === null, 'command getElementCssProperty() returns with an error');
49                 tmpResult = result;
50                 next();
51             });
52     });
53  
54     this.Then(/^I should get a width of "([^"]*)" and height of "([^"]*)"$/, function(width, height, next) {
55         assert(tmpResult.width  == width , 'width of element is ' + tmpResult.width + ' but should be ' + width);
56         assert(tmpResult.height == height, 'height of element is ' + tmpResult.width + ' but should be ' + height);
57         next();
58     });
59  
60     this.Then(/^the command should return "([^"]*)"$/, function(result, next) {
61         assert(tmpResult == result , ' result of command is "'+ tmpResult + '" but should be "'+ result);
62         next();
63     });
64 };
 1 var webdriverjs = require('webdriverjs');
 2  
 3 describe('my webdriverjs tests', function() {
 4  
 5     var client = {};
 6     jasmine.DEFAULT_TIMEOUT_INTERVAL = 9999999;
 7  
 8     beforeEach(function() {
 9         client = webdriverjs.remote({ desiredCapabilities: {browserName: 'phantomjs'} });
10         client.init();
11     });
12  
13     it('test it', function(done) {
14         client
15             .url('https://github.com/')
16             .getElementSize('.header-logo-wordmark', function(err, result) {
17                 expect(err).toBe(null);
18                 expect(result.height).toBe(32);
19                 expect(result.width).toBe(89);
20             })
21             .getTitle(function(err, title) {
22                 expect(err).toBe(null);
23                 expect(title).toBe('GitHub · Build software better, together.');
24             })
25             .getElementCssProperty('css selector','a[href="/plans"]', 'color', function(err, result){
26                 expect(err).toBe(null);
27                 expect(result).toBe('rgba(65,131,196,1)');
28             })
29             .call(done);
30     });
31  
32     afterEach(function(done) {
33         client.end(done);
34     });
35 });
 1 var webdriverjs = require('webdriverjs'),
 2     assert      = require('assert');
 3  
 4 module.exports = {
 5  
 6     setUp: function (callback) {
 7         client = webdriverjs.remote({ desiredCapabilities: {browserName: 'phantomjs'} });
 8         client.init();
 9  
10         callback();
11     },
12     test1: function (test) {
13         client
14             .url('https://github.com/')
15             .getElementSize('.header-logo-wordmark', function(err, result) {
16                 test.ok(err === null, 'getElementSize() should cause no error');
17                 test.ok(result.height === 32, 'logo height should be 32px');
18                 test.ok(result.width  === 89, 'logo width should be 89px');
19             })
20             .getTitle(function(err, title) {
21                 test.ok(err === null, 'getTitle() should cause no error');
22                 test.ok(title === 'GitHub · Build software better, together.', 'title should be "GitHub · Build software better, together."');
23             })
24             .getElementCssProperty('css selector','a[href="/plans"]', 'color', function(err, result){
25                 test.ok(err === null, 'getElementCssProperty() should cause no error');
26                 test.ok(result === 'rgba(65,131,196,1)', 'color is "' + result + '" but should be "rgba(65,131,196,1)"');
27             });
28  
29         test.done();
30     },
31     tearDown: function (callback) {
32         // clean up
33         client.end(callback);
34     }
35 };
 1 var vows = require('vows'),
 2     assert = require('assert'),
 3     webdriverjs = require('webdriverjs'),
 4     fs = require('fs');
 5  
 6 var client;
 7  
 8 // Create a Test Suite
 9 vows.describe('my github tests').addBatch({
10  
11     'init webdriverjs': {
12  
13         topic: function () {
14             client = webdriverjs.remote({ desiredCapabilities: {browserName: 'phantomjs'} });
15             client.init(this.callback);
16         },
17  
18         'starting webdriverjs successfully': {
19  
20             topic: function (init) {
21                 client.url('https://github.com/', this.callback);
22             },
23  
24             'check logo dimension': {
25  
26                 topic: function (url) {
27                     client.getElementSize('.header-logo-wordmark', this.callback);
28                 },
29  
30                 'getElementSize() should cause no error': function(err,result) {
31                     assert(err === null);
32                 },
33  
34                 'height is 30px': function(err,result) {
35                     assert(result.height === 32);
36                 },
37  
38                 'width is 94px': function(err,result) {
39                     assert(result.width === 89);
40                 }
41  
42             },
43  
44             'check title': {
45  
46                 topic: function() {
47                     client.getTitle(this.callback);
48                 },
49  
50                 'getTitle() should cause no error': function(err,result) {
51                     assert(err === null);
52                 },
53  
54                 'title should be "GitHub · Build software better, together."': function(err,result) {
55                     assert(result === 'GitHub · Build software better, together.');
56                 }
57  
58             },
59  
60             'check color of subheading': {
61  
62                 topic: function() {
63                     client.getElementCssProperty('css selector','a[href="/plans"]', 'color', this.callback);
64                 },
65  
66                 'getElementCssProperty() should cause no error': function(err,result) {
67                     assert(err === null);
68                 },
69  
70                 'color should be rgba(65,131,196,1)': function(err,result) {
71                     assert(result === 'rgba(65,131,196,1)');
72                 }
73  
74             }
75         },
76  
77         'end webdriverjs': {
78  
79             topic: function() {
80                 client.end(this.callback);
81             },
82  
83             'should end successfully': function(err,result) {
84                 assert(err === null);
85             }
86  
87         }
88     }
89  
90 }).run(); // Run it
Tweet