Table of content

• Pop-Ups in Protractor
• Alerts
• Authentication Pop Up
• Hidden division Pop Up
• Upload Pop in Protractor

In HTML pages, we have different kinds of pop-ups; we will discuss them in this tutorial. Different popups will have different properties.


Types of Pop-Ups :

• Alert Pop Up
• Confirmation Pop Up
• Authentication Pop Up
• Hidden-Division Pop Up
• Calendar Pop Up
• Download Pop UP
• Upload Pop Up

Alerts on the webpage used to get the attention of the user to perform some operation on the alert or on the webpage; sometimes, alerts expect input from the user.

All the alerts are formed using javascript inside the HTML page; there are three kinds of alerts in HTML. Alerts take the focus away from the current window and force the user to read the message.

Alert prevents the user from accessing other parts of the web page until the box is closed.

Alert Types :

• Alert
• Confirmation dialog
• Prompt

Properties of Alert/Confirmation/Prompt with respect to Protractor :

• We cannot identify alerts using inspect tools
• We cannot write xpaths for alerts
• It is not a Window
• We cannot handle alerts using JavaScript Executor.
• It will not allow to performing any other operation o WebPage

We can consider as not alert if any of the above property mismatches when an alert is present on the webpage we cannot proceed further without handling the popup, and if we try to perform any operation it throws UnhandledAlertError

If there is no Alert present in Webpage but if try to handle it then you may face NoSuchAlertError

Alerts Class :

Alerts class provides few methods to handle the alerts present in the webpage; using these methods, we can accept, dismiss, get the details of the alerts, and we can set some values as well.

Methods present in Alerts class:

• accept()
• dismiss()
• getText()
• sendKeys()

We have to create the object to the Alert class, as usual, we can create it like Alert al = new Alert(), but this object represents just a memory address, obvious we can access the methods present inside, but this object does not know, where or on which page this operation should be performed

So we have to explicitly tell the object where to perform the Operation because of that we would be using browser object to create an Object to Alert class, so that Alerts class will know that, it has to perform the operation on the browser(I mean firefox, chrome) opened by this browser Object.

We can create object alerts like below:

let abc:Alert = browser.switchTo().alert();
// typescript assigns the type dynamically, so do not have to provide type explicitly
let abc = browser.switchTo().alert();

Calendar / Datepicker

JavaScript Alerts

Before jumping into the code, let's understand why we are using javascript alerts.

Alert :

The alert() method displays an alert box with a message and an OK button, an alert box is often used to inform a user about a particular operation like details saved in Database, right-click disabled, Loaded successfully such kind of messages.

Alert is formed using alert("message") in javascript, alert considers the same irrespective of user operation whether he clicks OK or 'X' icon.

The Alert's sole purpose is to inform users, nothing more.

Video Tutorial for Alerts in protractor

Subscribe to my youtube channel :

Confirmation Box :

A Confirmation box is the second kind of alert, it displays a dialog with OK and Cancel button

Confirmation box informs the developer about user choice whether the user pressed OK or Cancel.

The confirm() method returns true if the user clicked "OK", and false otherwise('X' icon and 'Cancel') to the developer.

Prompt :

Prompt is used to get value from the user in text format. Prompt provides text bar for user input; Prompt is rarely used alert type.

accept() Alert in protractor :

accept() method accepts the given alert and brings back the focus to the web application.

accepts methods are applicable for all the javascript alerts, like alert, confirmation box, prompt.

• Open Url : https://chercher.tech/practice/practice-pop-ups-selenium-webdriver
• Click on Alert button; the application throws an Alert box
• Switch to the alert using driver.switchTo().alert(), we save this object in Alert type variable 'ale'

let ale:Alert = browser.switchTo().alert();
// clicks 'OK' button
ale.accept();

• We can accept the alert by using accept() non-static method from the alert API; this closes the popup.

// clicks 'OK' button
ale.accept();

Complete program for accepting alerts.

import { browser, element, by, ExpectedConditions} from 'protractor'
import { Alert } from 'selenium-webdriver';
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('Alerts operation', function() {
		browser.manage().timeouts().implicitlyWait(30000)
		browser.get("https://chercher.tech/practice/practice-pop-ups-selenium-webdriver");
		element(by.name("alert")).click();
		let ale:Alert = browser.switchTo().alert();
		// clicks 'OK' button
		ale.accept();
	});
});

Send emails using NodeMailer

Steps to send eMail

dismiss() Alert in protractor :

dismiss() method closes the alert; it will not click on the Cancel button, but it clicks on the 'X' icon on the alert.

dismiss() method is also applicable for all the javascript alerts like alert, confirmation box, prompt.

import { browser, element, by, ExpectedConditions} from 'protractor'
import { Alert } from 'selenium-webdriver';
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('Alerts operation', function() {
		browser.manage().timeouts().implicitlyWait(30000)
		browser.get("https://chercher.tech/practice/practice-pop-ups-selenium-webdriver");
		element(by.name("confirmation")).click();
		let ale:Alert = browser.switchTo().alert();
		// clicks 'X' button
		ale.dismiss();
	});
});

getText() from Alerts in protractor :

getText() method fetches the text present in the javascript alert; it returns the values as String promise. We have to resolve the promise to get the values out of it.

getText() method is also applicable for all the javascript alerts like alert, confirmation box, prompt.

import { browser, element, by, ExpectedConditions} from 'protractor'
import { Alert } from 'selenium-webdriver';
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('Alerts operation', function() {
		browser.manage().timeouts().implicitlyWait(30000)
		browser.get("https://chercher.tech/practice/practice-pop-ups-selenium-webdriver");
		element(by.name("confirmation")).click();
		let ale:Alert = browser.switchTo().alert();
		// get text from the alert
		ale.getText();
	});
});

Timeouts in Protractor

sendKeys() to Alerts in protractor :

We can set the value to the prompt type javascript alerts using the sendkeys method in protractor, as it expects input from the user.

sendKeys method is not applicable for alert and confirmation box.

import { browser, element, by, ExpectedConditions} from 'protractor'
import { Alert } from 'selenium-webdriver';
describe('Protractor Typescript Demo', function() {
	browser.ignoreSynchronization = true; // for non-angular websites
	it('Alerts operation', function() {
		browser.manage().timeouts().implicitlyWait(30000)
		browser.get("https://chercher.tech/practice/practice-pop-ups-selenium-webdriver");
		element(by.name("confirmation")).click();
		let ale:Alert = browser.switchTo().alert();
		// set text to the prompt
		ale.sendKeys("hello");
	});
});

When do alerts occur in a page : It can occur on a page on any time, but most of the time it happens on below timing of the webpage

• On Webpage Load
• On Webpage close
• On click of an element
• On Right-click (when right-clicking disabled)
• On wrong entry of a field
• On information save

Technical Tip : Now day developer are using overlays/hidden division popups rather than javascript popups

Sendkeys for selecting a value

When we open password-protected pages, we tend to get Authentication pop up. Authentication pop up will have username and password fields, the UI look of the pop up may vary browser to browser.

Visit URL selenium webdriver Auth : https://chercher.tech/auth, the site expects you to provide credentials.

Credentials :
username - selenium
password - webdriver

Authentication Popup :

Properties of the Authentication Pop up :

• Pop up displayed on Page load
• We can move the pop up (except in chrome)
• We cannot inspect the pop up with browser inspection tools like (firepath or dev tools)
• The Look varies from browser to browser

The Solution to Authentication Pop Up : We have to pass the user name and password along with the URL to handle the authentication pop in selenium webdriver. Please find the syntax to pass the username and password

											driver.get(protocol://Usename:[email protected] Address);
											

Protocols: Http, Https, Ftp,..

To Access the https://chercher.tech/auth page, you need to pass username and password like below.

											browser.get(https://selenium:[email protected]/auth);
											

Complete program to handle Authentication popup

											import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
											import { Alert } from 'selenium-webdriver';
											describe('Protractor Typescript Demo', function() {
												browser.ignoreSynchronization = true; // for non-angular websites
												it('Alerts operation', function() {
													browser.manage().timeouts().implicitlyWait(30000)
													browser.get("https://selenium:[email protected]/auth");
													browser.getTitle().then(function(title){
														if(title == "Authentication Successful"){
															console.log("Login successful")
														}else{
															console.log("Login Falied")
														}
													})
												});
											});
											

If login is successful, you will see the below page on the browser.

it block in Jasmine


Limitations:

1. Does not work for the https protocol
2. It does not work when username or password contains special characters like : '@' , ':'

JSON format Logging using winston in Protractor

Hidden division pop is nothing but HTML code which is hidden initially, hidden division pop up also known as dialog or overlay.
An Overlay is triggered when the application user performs certain tasks like clicking a button, submitting a form, or on page load...


Examples :

1. Calendar Popups
2. Contact forms
3. Error and success Messages



Properties of Hidden division Pop up :

• Cannot be moved here and there
• We can inspect the overlay
• This is not JavaScript popup
• We can resize and customize the content of the pop-up
• If the content is more then the pop-up size, pop shows scroll bar
• When hidden division pop is opened, pop takes the focus from the application.
• When pop up is closed, focus automatically goes to the application
• Hidden division popup could be nested, i.e., a hidden division pop can have another hidden division pop up
• Hidden division pop can hold other pop-ups/ alerts on it.

Methods in element & element.all


Handle Hidden division Pop Up :
1. Navigate to https://chercher.tech/practice/hidden-division-popup
2. Click on View Pop-Up button
3. Application opens a Model


4. Write XPath for the Name text bar : //input[@type='text']
5. Send text for the Name, using sendKyes in selenium.
6. No Special Operation required to handle hidden division popup.

Complete program for handling hidden division pop up in selenium webdriver

                import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
				import { Alert } from 'selenium-webdriver';
				describe('Protractor Typescript Demo', function() {
					browser.ignoreSynchronization = true; // for non-angular websites
					it('Hidden Division operation', function() {
						browser.manage().timeouts().implicitlyWait(30000)
						browser.get("https://chercher.tech/practice/hidden-division-popup");
						element(by.className("cd-popup-trigger")).click()
						element(by.xpath("//input[@type='text']")).sendKeys("Hello hidden division")
						browser.sleep(10000)
						// adding sleep just to check whether it entered text of not
					});
				});
              

Even though pop up content is present but pop is not present on UI until we click a button, for this reason, it is called as hidden division popup.

Open Webpage in protractor


Limitations:

1. We cannot perform an operation on the webpage until we close the pop-up if we try to access selenium throws ElementNotClickable Error

Video tutorial for handling Hidden division pop in protractor

Subscribe to my youtube channel :

Sometimes we may need to upload files to the web; in those cases, when we click browse/Choose file button, it will open an Operating System based pop up.

In this Operating system based pop, we have to select the file that we want to upload; once we choose, we may see like following.

So the end of the thing, we are just setting the path(filename) to the field, Am I right ?

So instead of breaking heads, just think which methods set a text to fields. Obviously, you are right, it is sendkeys() method

After setting the value, you can click the upload button or submit the form.

							
							import { browser, element, by, ExpectedConditions, protractor} from 'protractor'
							import { Alert } from 'selenium-webdriver';
							describe('Protractor Typescript Demo', function() {
								browser.ignoreSynchronization = true; // for non-angular websites
								it('Upload operation', function() {
									browser.manage().timeouts().implicitlyWait(30000)
									browser.get("https://chercher.tech/practice/practice-pop-ups-selenium-webdriver");
									element(by.name("upload")).sendKeys("C:UsersuserDesktopOpenCherCherTech.java")
									browser.sleep(10000)
									// adding sleep just to check whether it entered text of not
								});
							});
							

Protractor Interview Questions

Recommended Readings

• DatePicker/Calendar Popup in Protractor
• Dynamic table | Custom Element in Protractor
• Mouse Actions in Protractor
• iFrames / Frames in Protractor | browser.switchTo.frame()
• TimeOuts in Protractor
• Waits in Protractor
• Protractor restartBrowserBetweenTests
• Conf JS file in Protractor

I am Pavankumar, Having 8.5 years of experience currently working in Video/Live Analytics project.