Cross browser testing — Learn how to automate your integration tests in 3 steps

When I started working as web developer one of the things I faced hurdles with was cross-browser and cross device compatible development and testing. With leading competition in e-commerce field you wouldn’t want to miss out revenue from any customer just because your website couldn’t perform across various devices and web browsers out there.

Will your app serve all the customers out there ?

Testing your website features with every web browser/mobile devices out there is time consuming and waste of capital. In the below article I have explained basic things needed to automate cross browser testing.

Step 1 : Setting up selenium web driver for node.js

npm install -g webdriver-manager

Once you’ve installed webdriver-manager, run an update.

webdriver-manager update

This will install basic browser specific drivers required (chrome, firefox, ie). It also provides mobile emulators, specific versions of browsers. For more details on the same refer to this link.

Step 2 : Running automated tests locally

The next step is to create a basic test suite. You can use selenium-webdriver directly to interact with various components on your page. However I would like to introduce a wrapper on top of it called “webdriver-io”. This provides better understandable syntax, also it has a better documentation on all of the APIs provided by it. (please refer to this link for more details on the same)

npm install --save webdriverio

Create new file “test.js” and copy paste the following code in it.

var webdriverio = require('webdriverio');
var options = {
desiredCapabilities: {
browserName: 'chrome'
}
};
webdriverio
.remote(options)
.init()
.url('https://www.example.com') //your website name here
.getTitle().then(function(title) {
console.log('Title was: ' + title);
})
.end()
.catch(function(err) {
console.log(err);
});

Start selenium server in your terminal.

webdriver-manager start

Open a new terminal window and run your test.

node test.js

You will see title of your page displayed on terminal. And voila, you’ve successfully written and executed your first automated test.

Step 3 : Running automated tests on browser stack

I have chosen browser stack as a cloud based cross browser testing tool. For more details on services (and range of device/browsers) provided by them please refer to this link.

Few other cloud based testing tools in market include : “Smart Bear”, “Sauce Labs”, “cross browser testing”, “Browser shots”

Install browserstack-local and webdriverio mocha framework. Mocha framework simply provides easier way to test and assert our results

npm install --save browserstack-local
npm install --save wdio-mocha-framework

Next step is to create a new file “conf.js”, this serves as config file for browser stack.

var browserstack = require('browserstack-local');exports.config = {
user: 'USER_NAME',
key: 'BROWSER_STACK_KEY',
specs: [
'./test.js'
],
capabilities: [{
browser: 'chrome',
'browserstack.local': false,
'browserstack.localIdentifier' : 'Test123'
}],
// Code to start browserstack local before start of test
onPrepare: function (config, capabilities) {
console.log("Connecting local");
return new Promise(function(resolve, reject){
exports.bs_local = new browserstack.Local();
exports.bs_local.start({'key': exports.config.key }, function(error) {
if (error) return reject(error);
console.log('Connected. Now testing...');
resolve();
});
});
},
// Code to stop browserstack local after end of test
onComplete: function (capabilties, specs) {
exports.bs_local.stop(function() {});
}
}

Go to your “test.js” file and change the previous test so that it could be run with browser stack. Copy paste the below code for the same.

var assert = require('assert');describe('My Page\'s Search Functionality', function() {
it('can find search results', function () {
browser
.url('https://www.example.com/')
.pause(5000);
assert(browser.getTitle().match(/Your-title/i));
});
});

Go to the terminal and execute the following command.

./node_modules/.bin/wdio conf.js

If everything is working as expected you will see the test running in browser stack automate tab. This helped you run a test in single browser, if you would like to run tests parallelly across various browsers and devices, change your config file accordingly, browser stack provides a detailed documentation on the same.

I hope this article helped you to get started with basic cross browser testing quickly. Webdriverio combined with cloud based testing tools really helps you in writing comprehensive integration tests in Node JS!!! You can scroll through the page, fill out forms, test various features present on your web page.

HAPPY TESTING!!

CODER | BLOGGER | ARTIST | GHOST

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store