How To Handle Alerts And Popups In Protractor With Selenium?

Why Do You Need To Test Alerts And Popups?

  • To show a message or important alert to the user
  • To notify the user about an update.
  • To show error and notify the user in case of incorrect data entry.
  • To show a message on saving of certain information.

Handling Alerts in Selenium Protractor

  • The Alerts in the protractor framework are not part of a window therefore they cannot be handled by utilization of JavaScript Executor.
  • In Alerts one cannot write Xpaths and the same cannot be identified through inspecting tools.
  • The characteristic of Alerts block the operation webpage and does not allow the performance of any task on the web page unless the alert is handled on a priority basis.
  • If a user attempts to proceed on the webpage without prior handling of the Alert popup then they may receive “Unhandled Alert Error”.
  • Prompt
  • Alerts
  • Confirmation Dialogue

Prompt

Alert

Confirmation Dialogue

Handling Alerts In Selenium Protractor Using Alert Class

  • dismiss()
  • accept()
  • sendKeys()
  • getText()
Alert alert = new Alert() ;
var abc :Alert = browser.switchTo().alert();
// dynamic javascript to switch to alert
var abc = browser.switchTo().alert();

dismiss() Alert Class Methods in Selenium Protractor

driver.switchTo().alert().dismiss();
// import the required modules from the library for handling alerts and popups in Selenium Protractor tutorial//

import { browser, element, by, ExpectedConditions} from 'protractor'

import { Alert } from 'selenium-webdriver';

var script = require (‘protractor’) ;

var webdriver = require (‘selenium-webdriver’) ;

var alert = new Alert();

// defining the test scenario for the use case in protractor //

describe(' Protractor Javascript Selenium Alert Test ', function() {
// ignore synchronization //
browser.ignoreSynchronization = true;

// information about the test case //
it('Dismiss Alert types in Protractor', function() {
// set the wait timeout to 10 secs //
browser.manage().timeouts().implicitlyWait(10000)
browser.get("http://the-internet.herokuapp.com ");
element(by.name("confirmation")).click();
alert = browser.switchTo().alert();
alert.dismiss();
});
});

accept() Alert Class Methods in Selenium Protractor

var myAlert = browser.switchTo().alert();
// clicking the 'OK' button will confirm the action //
myAlert.accept();
// import the required modules from the library for handling alerts and popups in Selenium Protractor tutorial //

import { browser, element, by, ExpectedConditions} from 'protractor'

import { Alert } from 'selenium-webdriver';

var script = require (‘protractor’) ;

var webdriver = require (‘selenium-webdriver’) ;

var myAlert = new Alert();

// defining the test scenario for the use case in protractor //

describe(' Protractor Javascript Selenium Alert Test ', function() {
// disable synchronization //
browser.ignoreSynchronization = true;
// information about the test case //
it(' Accept Alert types in Protractor ', function() {
// set the wait timeout to 10 secs //
browser.manage().timeouts().implicitlyWait(10000)
browser.get("http://the-internet.herokuapp.com ");
element(by.name("alert")).click();
myAlert = browser.switchTo().alert();
// clicking the 'OK' button will confirm the action //
myAlert.accept();
});
});

sendKeys() Alert Class Methods in Selenium Protractor

// import the required modules from the library for handling alerts and popups in Selenium//

import { browser, element, by, ExpectedConditions} from 'protractor'

import { Alert } from 'selenium-webdriver';

var script = require (‘protractor’) ;

var webdriver = require (‘selenium-webdriver’) ;

var myAlert = new Alert();

// defining the Selenium test automation scenario for handling alerts and popups in Selenium //

describe(' Protractor Javascript Selenium Alert Test ', function() {

browser.ignoreSynchronization = true; // disable synchronization //
// it contains information about the test case //
it(' Send Keys Alert types in Protractor ', function() {
// set the wait timeout to 10 secs //
browser.manage().timeouts().implicitlyWait(10000)
browser.get("http://the-internet.herokuapp.com ");
element(by.name("confirmation")).click();
myAlert = browser.switchTo().alert();
// set text to the prompt
myAlert.sendKeys("Protractor Test Successful");
});
});

Handling Popups in Selenium Protractor

  • Download popups
  • Authentication popups
  • Confirmation popups
  • Alert popups
  • Hidden Division popups
  • Upload popups
  • Calendar popups

Hidden Division Popups

  • It is not a form of JavaScript pop-up
  • It can integrate another division of pop-up with the initial alert dialogue.
  • It can be customized to contain a scroll bar for extended content.
  • Hidden division popups are customizable and resizable
  • These popups are locked in a single space and cannot be moved by the user.
  • These popups can be inspected
  • These popups do not allow the user to operate further until the alert is handled.
  • Non-handling the popup triggers selenium to throws ElementNotClickableError
// import the required modules from the library or handling popups in Selenium //

import { browser, element, by, ExpectedConditions, protractor} from 'protractor'

import { Alert } from 'selenium-webdriver';

var script = require (‘protractor’) ;

var webdriver = require (‘selenium-webdriver’) ;

var myAlert = new Alert();

// defining the Selenium test automation scenario for the use case in protractor for or handling popups in Selenium//

describe(' Protractor Javascript Selenium Alert Test ', function() {
browser.ignoreSynchronization = true; // disable synchronization //

// it contains information about the Selenium test automation case for or handling popups in Selenium//
it(' Hidden Division Alert types in Protractor ', function() {
// set the wait timeout to 10 secs //
browser.manage().timeouts().implicitlyWait(10000)
browser.get("http://the-internet.herokuapp.com ");
element(by.className("cd-popup-trigger")).click()
element(by.xpath("//input[@type='text']")).sendKeys(" Protractor hidden division alert in Test ")
// adding sleep for validation purposes //
browser.sleep(5000);
});
});

Authentication Popups

  • The elements of the authentication pop-up overlay cannot be inspected by the user.
  • This pop-up is displayed on the occurrence of the loading of the web-page.
  • The page can only be accessed through the input of valid credentials.
  • The pop-up may or may not be movable as per the browser configuration.
  • The UI of the pop-up is highly customizable.
driver.get(protocol://Usename:Password@URL Address);
// import the required modules from the library for handling popups in Selenium //

import { browser, element, by, ExpectedConditions, protractor} from 'protractor'

import { Alert } from 'selenium-webdriver';

var script = require (‘protractor’) ;

var webdriver = require (‘selenium-webdriver’) ;

var myAlert = new Alert();

// defining the Selenium test automation scenario for the use case in protractor for handling popups in Selenium //

describe(' Protractor Javascript Selenium Alert Test ', function() {
browser.ignoreSynchronization = true; // disable synchronization //

// it contains information about the Selenium test automation case //
it(' Authentication Alert types operation in Protractor ', function() {
// set the wait timeout to 10 secs //
browser.manage().timeouts().implicitlyWait(30000)
browser.get("http://the-internet.herokuapp.com/basic_auth");
browser.getTitle().then(function(title){
if(title == "Selenium Authentication is Successful"){
console.log("Login successful")
}
else{
console.log("Login Failed")
}
})
});
});

Upload Popups

// import the required modules from the library for handling alerts and popups in Selenium //

import { browser, element, by, ExpectedConditions, protractor} from 'protractor'

import { Alert } from 'selenium-webdriver';

var script = require (‘protractor’) ;

var webdriver = require (‘selenium-webdriver’) ;

var myAlert = new Alert ();

// defining the Selenium test automation scenario for the use case in protractor for handling popups in Selenium //

describe(' Protractor JavaScript Selenium Alert Test ', function() {
browser.ignoreSynchronization = true; // disable synchronization //

// it contains information about the Selenium test automation case //

it(' Upload Alert types operation in Protractor ', function() {
// set the wait timeout to 10 secs //
browser.manage().timeouts().implicitlyWait(30000)
browser.get(" https://www.google.com ");
element(by.name("upload")). sendKeys("myfile.txt")
// adding sleep for validation purposes //
browser.sleep(10000)

});
});

Integrating With Cloud Selenium Grid And Other Tools

// test_config.js //

// The test_config.js file servers as a configuration file for our test case for handling alerts and popups in Selenium //

LT_USERNAME = process.env.LT_USERNAME || "irohitgoyal"; // Lambda Test User name
LT_ACCESS_KEY = process.env.LT_ACCESS_KEY || "123456789"; // Lambda Test Access key

exports.capabilities = {
'build': ' Automation Selenium Webdriver Test Script ', // Build Name to be display in the test logs
'name': ' Protractor Selenium Test on Chrome', // The name of the test to distinguish amongst test cases //
'platform':'Windows 10', // Name of the Operating System
'browserName': 'chrome', // Name of the browser
'version': '79.0', // browser version to be used
'visual': false, // flag to check whether to take step by step screenshot
'network':false, // flag to check whether to capture network logs
'console':false, // flag to check whether to capture console logs.
'tunnel': false // flag to check if it is required to run the localhost through the tunnel
};

// setting required for the config parameters for handling alerts and popups in Selenium //
exports.config = {
directConnect: true,

// Desired Capabilities that are passed as an argument to the web driver instance for handling alerts and popups in Selenium.//
capabilities: {
'browserName': 'chrome' // name of the browser used to test //
},

// Flavour of the framework to be used for our test case //
framework: 'jasmine',

// The patterns which are relative to the current working directory when

protractor methods are invoked //

specs: ['test_script.js'],
// overriding default value of allScriptsTimeout parameter //
allScriptsTimeout: 999999,
jasmineNodeOpts: {
// overriding default value of defaultTimeoutInterval parameter //
defaultTimeoutInterval: 999999
},
onPrepare: function () {
browser.manage().window().maximize();
browser.manage().timeouts().implicitlyWait(5000);
}
};


// test_script.js //

// import the required modules from the library //

import { browser, element, by, ExpectedConditions} from 'protractor'

import { Alert } from 'selenium-webdriver';

var script = require (‘protractor’) ;

var webdriver = require (‘selenium-webdriver’) ;

var myAlert = new Alert();

// Build the web driver that we will be using in Lambda Test
var buildDriver = function(caps) {
return new webdriver.Builder()
.usingServer(
"http://" +
LT_USERNAME +
":" +
LT_ACCESS_KEY +
"@hub.lambdatest.com/wd/hub"
)
.withCapabilities(caps)
.build();
};


describe(' Protractor Javascript Selenium Alert Test ', function() {
// disable synchronization //
browser.ignoreSynchronization = true;


// adding the before an event that builds the driver and triggers before the test execution for handling alerts and popups in Selenium//
beforeEach(function(done) {
caps.name = this.currentTest.title;
driver = buildDriver(caps);
done();
});

it(' Accept Alert types in Protractor ', function() {
// set the wait timeout to 10 secs //
browser.manage().timeouts().implicitlyWait(10000)
browser.get("http://the-internet.herokuapp.com ");
element(by.name("alert")).click();
myAlert = browser.switchTo().alert();
// clicking the 'OK' button will confirm the action //
myAlert.accept();
});
});

Wrapping It Up!

--

--

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
Praveen Mishra

Praveen Mishra

I am a Computer Science Engineer by degree, and a Digital Marketer by heart who works at LambdaTest. A social media maven!!