Pop Ups in Selenium Webdriver

In HTML pages we have a different kind of pop ups, we will discuss them in this tutorial. Different popups will have a 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

Alerts in 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 HTML page, there is three kinds of alerts in HTML. Alerts take the focus away from the current window and forces the browser 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 provide 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();			
										

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 user, nothing more.

alert-on-chrome-selenium-webdriver

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 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. confirm-chrome-selenium-webdriver

Prompt :

Prompt is used to get value from the user in text format. Prompt provides textbar for user input, Prompt is rarely used alert type. prompt-selenium-webdriver

accept() Alert in protractor :

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

accepts methods is 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, 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 Cancel button but it clicks on '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();
						});
					});
					
get-text-alert-protractor

sendKeys() to Alerts in protractor :

We can set the value to the prompt type javascript alerts using sendkeys method in protractor, as it expects input from 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 click 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

Authentication Pop Up

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 : authentication-pop-up-selenium-webdriver

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 url to handle the authentication pop in selenium webdriver. Please find the syntax to pass the username and password


											driver.get(protocol://Usename:Password@URL 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:webdriver@chercher.tech/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:webdriver@chercher.tech/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 below page on the browser. result-authentication-popup-selenium-webdriver


Limitations:

1. Does not work for 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 Up

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
hidden-division-modal-selenium-webdriver


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.


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
inspect-hidden-popup-selenium-webdriver

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

content-hidden-division-popup-selenium-webdriver


Limitations:

1. We cannot perform an operation on the webpage until we close 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 :


Upload Pop in Protractor

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. upload-popup-protractor

So the end of the thing, we are just setting the path(file name) 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 value you can click 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:\\Users\\user\\Desktop\\OpenCherCherTech.java")
									browser.sleep(10000)
									// adding sleep just to check whether it entered text of not
								});
							});
							

Protractor Interview Questions

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
  • Nethravathi Jayaram
    Thankyou
    Reply
  • Nethravathi
    Thankyou
    Reply
  • Reply
  • Reply
  • Vikas
    Nice article
    Reply
  • Protractor Training

    new tutorial I am starting new Protractor training batch on Weekends. It is two days course from 01-june-2019 to 02-june-2019 based on class room (BANGALORE)

    Interested people can confirm the seat by calling to +91 8971673487 or whatsapp to +91 9003381224

    Find the course content : View Content