{{announcement.body}}
{{announcement.title}}

How to Perform Cross-Browser Automated Testing Using Protractor

DZone 's Guide to

How to Perform Cross-Browser Automated Testing Using Protractor

Learn all about cross-browser testing — including what it is, what it's used for, and how to use Protractor.

· Performance Zone ·
Free Resource

Image title

Learn how to perform cross-browser testing!

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 a basic knowledge of protractors.

You may also like: Skyrocket Your Cross-Browser Testing With Minimal Effort

Introduction

Cross-browser testing is 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's goal is to provide quality assurance for web applications 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.

browser chart

Why Cross-Browser Testing

As we know web-based applications are 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 differently.

• Some browser does not support HTML5 tags.

• Page alignment and div size are different.

• Image orientation is not proper.

• Browser incompatibility with OS.

To run protractor tests on multiple browsers, Protractor offers a 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 in 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 the Protractor conf file, all browser setup is written within the capabilities object. This object is passed directly to the Webdriver builder.

capabilities:[
{
'browserName' :  ' chrome' ,
}
],

Handling multiple browsers:


Protractor has a new capability called "multiCapabilities": which lets 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 an info bar that appears under the 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.

Executing Protractor Tests on Headless Chrome Browser

A headless browser is similar to the normal browser and the only difference is that it does not have a GUI (Graphical User Interface) which 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 the top priority of a good quality assurance company and protractor automation tool fits well here, offering automated testing across headless browsers.


Further Reading

How to Automate Cross-Browser Testing of Web Applications Using Selenium

Top 5 Features of Automated Cross-Browser Testing Tools

Increase Performance in Cross-Browser Testing With Zero Effort — Here's How

Topics:
automated testing ,cross browser testing tool ,cross browser testing ,protractor ,performance

Published at DZone with permission of SANJAY PANDEY . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}