How to perform Cross Browser Automated Testing using Protractor?

Abstract:

This article is targeted to the users who wish to know the necessity of doing cross-browser automation testing for the web application. This article explains to us how Protractor works and how it automates for cross-browser testing. I assume you might have basic knowledge of protractor.

Introduction:

Cross-browser testing is basically running the same set of test cases multiple times on different browsers. This type of repeated task is best suited for automation.

Cross-Browser Testing goal is to provide quality assurance for web application across multiple browsers. In this article, we will be looking into details about how it helps to do cross-browser test automation with different browsers.

Cross Browser Testing

Why Cross-Browser Testing:

As we know web-based applications are totally different from windows based applications. If we have a web application, so we need to make sure that it works consistently with the same behavior across all browsers. To make sure that our app or web works fine in all browsers, we can use automated cross-browser testing.

For example, some people prefer to open any application in chrome browser, while some users open in Firefox, IE and Edge. So we need to check that the web application will work as expected in all browsers.

Reason For Cross-Browser Testing:

• Font size can appear differently from browser to browser.

• JavaScript behavior can be different on different web browsers.

• CSS, HTML may behave in a different manner.

• Some browser does not support HTML5 tags

• Page alignment and div size is different

• Image orientation is not proper.

• Browser incompatibility with OS.

In order to run protractor tests on multiple browsers, Protractor offers multi-capabilities configuration option. These options must be defined as an array of objects.

Every web and mobile apps quality assurance company would love to use automation testing leveraging protractor capabilities to cut short testing time and cost. This in turn, results into a quicker market release of the product.

We can run protractor specs on different browsers by setting the browser name property of the capabilities in the conf.js file. We can execute on chrome browser by specifying “browserName” as ‘chrome’ or ‘firefox’ to execute on the Firefox browser or whichever browser we need as given below:-

Capabilities in Protractor:

In Protractor conf file, all browser setup is written within the capabilities object. This object is pass directly to the Webdriver builder.

capabilities:[
{
‘browserName’ ‘ chrome’ ,
}
],

Handling multiple browsers:

Protractor has a new capability called “multiCapabilities”: which let our existing test run in parallel without needing to do any code change.

multiCapabilities: [
{
‘browserName’: ‘ chrome’,
},
{
‘browserName’: ‘ firefox’,
},
],

We can also specify browser-specific options in the chrome Options/Firefox Options object.

For example, while invoking the chrome browser, there is info bar appears under address bar, with information “Chrome is being controlled by automated test software”. If you want to disable this bar, we can pass an argument to disable this information bar.

This is how, we can do using ‘capabilities’:

capabilities:[
{
‘browserName’ ‘ chrome’ ,
chromeOptions : {
‘args’ : [‘disable-infobars’]
}
}
],

This is how, we can do using multi-capabilities:

multiCapabilities: [
{
‘browserName’: ‘ chrome’,
chromeOptions : {
‘args’ : [‘disable-infobars’]
}
},
{
‘browserName’: ‘ firefox’,
‘moz: firefoxOptions’ : {
‘args’ : [‘–safe-mode’]
}
},
], 

Executing Protractor tests on headless chrome browser:

Headless browser is similar to normal browser and the only difference is that it does not have a GUI (Graphical User Interface) that means, you cannot see browser on the screen on which the automation script is running as it runs the script in the background. Other than that, the headless browser behaves the same as the traditional browsers like (Chrome, Firefox, MS-edge etc)

Why we need a headless browser?

In the headless browser, running the automation script is very useful in terms of saving time during regression testing, mainly when the automation script is running in a cloud/server environment. and there is no need for UI(user interface). It also helps us when we are busy with the browser for debugging the script. We can run the script in the background along with other modules of our Project.

Also, running the script is faster in the headless browser as compare to regular browsers.

Using headless Chrome:

If we want to start Chrome in Headless mode then we can use –headless flag.

As in Chrome version 58, you need to set –disable-gpu, though this may change in future versions. Also, changing the window size during a test will not work in headless mode, but you can set it on the command line like this –window-size=800,600.

capabilities: [
{
‘browserName’: ‘ chrome’,
chromeOptions : {
‘args’ : [“–headless”,‘–disable-gpu’, ‘–window-size=1400,1400’]
}
}
],

Using headless Firefox:

If we want to start Firefox in headless mode then we have to start Firefox with the –headless flag.

multiCapabilities: [
{
‘browserName’: ‘ chrome’,
chromeOptions : {
‘args’ : [“–headless”,‘–disable-gpu’, ‘–window-size=1400,1400’]
}
},
{
‘browserName’: ‘ firefox’,
‘args’ : [‘–headless’]
},
],

Let us execute simple spec in parallel on multiple browsers (In Chrome and Firefox browsers)

First create a simple spec like below:

 

describe(‘Check Login Functionality’, function(){

it(‘Login should be successfull’ , function(){

browser.get(‘https://www.amazon.com/’);

element(by.id(‘name’)).sendKeys(‘xyz’);

element(by.id(‘pass’)).sendKeys(‘xyz123’);

element(by.id(‘submit’)).click();

element(by.className(‘option-text’)).click();

expect(element(by.className(‘ng-tns’)).isPresent())

})

})

Now create a conf.js file like below:

“use strict”;

Object.defineProperty(exports, “__esModule”, {value: true});

var protractor_1 = require(“protractor”);
var path = require(“path”);
var dotEnv = require(“dotenv”);
var dateFormat = require(‘dateformat’);
var now = new Date();
/**
* Load environment variables from .env file, where API keys and passwords are configured.
*/
dotEnv.config({path: path.join(__dirname, ‘../.env’)});
exports.config = {

// directConnect: true,
seleniumAddress: process.env.SERVER,
eleniumServerJar: ‘E:/TestAutomation/TestAutomation/selenium-server-standalone-3.14.0.jar’,
getPageTimeout: 50000,
allScriptsTimeout: 500000,
ignoreUncaughtExceptions: true,
specs: [
“../features/*.feature”,
],
multiCapabilities: [
{
‘browserName’: ‘chrome’,
shardTestFiles: true,maxInstances: 1,
chromeOptions:{
args:[“–headless”,‘–disable-gpu’, ‘–window-size=1400,1400’],
},
},
{‘browserName’: ‘firefox’},

 

{‘browserName’: ‘MicrosoftEdge’},
{‘browserName’: ‘internet explorer’,
‘platform’: ‘ANY’,
‘version’: ’11’,
‘nativeEvents’: false,
‘unexpectedAlertBehaviour’: ‘accept’,
‘ignoreProtectedModeSettings’: true,
‘enablePersistentHover’: true,
‘disable-popup-blocking’: true,
‘ignoreZoomSetting’: true,
shardTestFiles: true
}

],

maxSessions: 1,
sequential: true,
// parallelCapability: false,
framework: ‘custom’,
frameworkPath: require.resolve(‘protractor-cucumber-framework’),
onPrepare: function () {
browser.waitForAngularEnabled(false);
browser.ignoreSynchronization = true;
browser.driver.get(process.env.ENVIRONMENT);
browser.driver.manage().window().maximize();
browser.driver.manage().timeouts().implicitlyWait(6000);browser.executeScript(‘window.localStorage.clear();’);
browser.executeScript(‘window.sessionStorage.clear();’);
browser.driver.manage().deleteAllCookies();
},

For efficient testing, techniques and tools are always in top priority of a good quality assurance company and protractor automation tool fits well here, offering automated testing across headless browsers. 

About Author:
Author Madan Singhal is an Automation Test Engineer currently working with QSS Technosoft Pvt Ltd. He has completed his Bachelor’s degree in Computer Science.

About QSS:
QSS Technosoft is a global provider of high-quality quality assurance and testing services delivering world-class software solutions to SMEs focused on data analytics, big data, process automation, desktop and web solutions, e-commerce solutions, mobile applications & Digital marketing services. We have grown organically to a team of over 100+ skilled professionals. QSS provides industry-specific and niche technology solutions for businesses. Our identity is founded on a deep-rooted culture of excellence and a continued commitment to delivering high-quality software services to our customers. We take pride in our ability to deliver excellent software solutions to our clients around the world.

Renovate unique Business Processes into Digitally Transformed solutions with QSS Technosoft!!

Do you want to remove manual operations, acting as impediment to your business growth? Realize your ideas into reliable web and mobile software solutions with our professional services. Take first step to launch your project by filling the form.

Let's computerize your business process


or Call Us