How To Handle Alerts And Popups In Protractor With Selenium?

Why Do You Need To Test Alerts And Popups?

Alerts and pop-up are widely used to issue warnings to the user or asking permissions from them. They allow us to take user’s permission for certain actions on the web page.

  • 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 purpose of alerts on a webpage is to drive the attention of the user. If an alert is present on a webpage the user may have to input operation in order to address such alerts.

  • 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”.
  • Alerts
  • Confirmation Dialogue

Prompt

The prompt alert is utilized to derive value from the user in a text format. It contains a text bar in which the user can input their values. This alert type is not commonly used in webpage alerts.

Alert

This type of alert() method ideally displays a message box with an “OK” button integrated with the dialogue box. This method is utilized with the intent to inform the target user of any specific operational details or changes therewith. Examples of alerts can be : Successfully Loaded webpage or any other database information alerts.

Confirmation Dialogue

The confirmation alert is based on the incidence of the dialogue box information being true or false. This alert type is embedded with two commands “OK” or “Cancel”. This is a choice based command box in which the user determines the correctness of the information by clicking on “OK” or “Cancel”.

Handling Alerts In Selenium Protractor Using Alert Class

In Alert Class, the user is presented with four methods in handling alerts in Selenium Protractor. The user may dismiss, accept, retrieve details, or send key values with intent to handle the alerts on a web page.

  • 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

The dismiss() alert class method is used to close the alert for handling alerts in Selenium. It operates by clicking on the “X” button in the prompt. This method is functional for all alert types: prompt, alert and confirmation dialogue box. The protractor web driver uses a void dismiss() command to cancel the alert.

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

The accept() alert class method is used to accept an alert and continue with the webpage operation. The accept alert can be utilized for all JavaScript alert types.

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

The sendKeys() command can help the user to set certain values to the prompt. The nature of the sendKeys() command is to input value based responses. It can handle all the JavaScript based alerts.

// 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

Popups are windows that pop up on your screen when you perform a certain action on the web application. These can be when you download a file, or when you enter a password protected website, there are several such cases and i’ll share them with you in the next section of this Selenium Protractor tutorial.

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

Hidden Division Popups

Hidden division popup is the newer version of protractor alert that has gained preference with new developers. This alert is an HTML code that stays hidden at the beginning of the loading of a webpage. The execution of the hidden division pop-up is activated by clicking on a pre-set trigger tab. popups such as contact forms; error messages are the most common form of hidden division popups.

  • 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 key usage of authentication popups is to authenticate user access. These popups are generally observed in password-protected pages and consist of a username and password dialogue boxes.

  • 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

The upload pop-up is an alert type that is triggered when the user needs to upload a certain file to the web-page. This pop-up is customized to initially ask permission for local storage access to browse files that need to be uploaded. The upload command box consists of the “browse/choose” tab. clicking on the tab triggers a system based operation in which the local storage of the user is opened.

// 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

We constantly look for ways to help us increase our test coverage and enhance our test case while running our Selenium test automation scripts. To support this, there are several tools to scale our testing efforts. The Protractor is capable of integrating with many other popular tools and platforms such as Github, Jenkins, Selenium Grid etc. It’s best that we utilize this capability of Protractor to scale your testing efforts.

// 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!

Now, this takes us to the conclusion of this Selenium Protractor tutorial on handling alerts and popups in Selenium protractor. There are several options for notifying users with critical information about the web application flow and it should be kept in mind while writing scripts for automated browser testing. I explored how browsers have native alert dialogs that can be used to give prompts using JavaScript and also create our own custom alerts and popups. But you need to keep in mind that the ability to show messages to the user is not overused as this may annoy the user and ruin their experience.

--

--

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