Pop Ups in Selenium Webdriver

In HTML pages we have different kind of pop ups, we will discuss about 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

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

All the alerts are formed using javascript inside HTML page, there are three kind of alerts in HTML. Alerts takes 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 perform any other operation o WebPage

We can consider as not alert if any of the above property mismatches, When alert is present on 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 an memory address, obvious we can access the methods present in side, but this object doesnot 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 the we would be using browser object to create a Object to Alert class, so that Alerts class will know that, it has to perform 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 donot have to provide type explicily
										let abc = browser.switchTo().alert();			
										

JavaScript Alerts

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

Alert :

The alert() method displays an alert box with a message and an OK button, 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 same irrespective of user operation whether he clicks OK or 'X' icon.

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

alert-on-chrome-selenium-webdriver

Video Tutorial for Alerts in protractor

Confirmation Box :

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

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

The confirm() method returns true if the user clicked "OK", and false otherwise('X' icon and 'Cancel') to 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 does alerts occur in a page : It can occur on a page on any time but most of the it happens on below timing of the webpage

  • On Webpage Load
  • On Webpage close
  • On click of a 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 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, 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)
  • Look varies from browser to browser

Solution to Authentication Pop Up : We have to pass the user name and pass word 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. Doesnot work for https protocol
2. It doesnot work when user name 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 know as dialog or overlay.
Overlay is triggered when application user performs certain tasks like clicking a button, submitting 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 java Script popup
  • We can resize and customize the content of the pop up
  • If 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 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 operation on webpage until we close pop up, if we try to access selenium throws ElementNotClickable Error

Video tutorial for handling Hidden division pop in protractor

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 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
								});
							});
							

About Author

Myself KarthiQ, I am the author of this blog, I know ways to write a good article but some how I donot have the skills to make it to reach people, would you like help me to reach more people By sharing this Article in the social media.

Share this Article Facebook
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions
  • Vikas
    Nice article
    Reply
  • Copyright © CherCher Tech