Join us on :

Alerts in WebdriverIO

Alerts (aka Javascript alerts) are basically popups that take your focus away from the current browser and forces you to read the alert message. You need to do some action such as accept or Cancel the alert to resume your task on the browser.

Browser will not let you to perfom your task if you donot handle the alert whether you doing it manually or in automation.

There are three types of Javascript alerts present in Webpage

  • Alert
  • Confirmation box
  • Prompt


Properties of Alert/Confirmation/Prompt with respect to WebdriverIO

  • 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 on WebPage

Types of Alerts in WebdriverIO

Before learning how to handle alerts, lets understand what are the alert types.

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

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

Handle Alerts in WebdriverIO

If you are from other selenium technologies, then you might think like, we need to switch to the alert to handle the alert. But WebdriverIO takes care of the switchng part, so we can directly use the method to handle alerts.

Alerts functions in WebdriverIO.

  • acceptAlert()
  • dismissAlert()
  • getAlertText()
  • sendAlertText(text)

First three functions are common for all the java script Alerts but sendAlertText is only applicable for prompts.

acceptAlert() in webdriverIO

acceptAlert() function accepts the given alert/presses OK button, and brings back the focus to the web application.


									browser.acceptAlert()
									


Complete Scenario for accepting the alert

  • Open Url : https://chercher.tech/practice/popups
  • Click on Alert button, application throws an Alert box
  • We can accept the alert by using accept() non-static method from the alert api, this closes the popup.

describe('Cherchertech Home Page', () => {
	it('Get title of cherchertech Home page', () => {
		browser.url('https://chercher.tech/practice/popups')
		$("//input[@name='alert']").click()
		browser.acceptAlert()
	})
})

dismissAlert() in webdriverIO

dismissAlert() funtion closes the alert using (X) present in the alert, dismissAlert() never presses the cancel button

Dismiss the alert using below code


browser.url('https://chercher.tech/practice/popups')
$("//input[@name='confirmation']").click()
browser.dismissAlert()									

getAlertText() in webdriverIO

getAlertText() fetches the text from the alert and we can use this text for required verification

Fetch the text from the confirmation box with webdriverIO.


browser.url('https://chercher.tech/practice/popups')
$("//input[@name='confirmation']").click()
const alertText = browser.getAlertText()	
console.log("Text is : " +alertText)				
alert-text-webdriverio

sendAlertText() in webdriverIO

We can Set the Text to the prompt using sendAlertText(), (with latest release of HTML 5, sendAlertText stopped working)


browser.url('https://chercher.tech/practice/popups')
$("//input[@name='prompt']").click()
browser.sendAlertText("This is Chercher Tech")									
sendAlertText-in-webdriverio-not-working

Errors

WebdriverIO will throw error if we try to perform any operation without closing the popup, it becomes mandatory to hadle the popup. You will face below error if you try to perform any operation without handling Javascript alerts.

Request failed due to Error: unexpected alert open

There is another case, which is, if you try to handle the alert when there is no aler present then you will get below error.
Request failed due to no such alert

Screenshoot of an Alert in WebdriverIO

We cannot perform any operation on the webpage untill we handle the alert.

In below example, we are trying to take screenshot of the browser but which throw error. Not only screenshot, you cannot perform any operation untill you either dismiss or accept the alert.


									describe('Cherchertech Home Page', () => {
										it('Get title of cherchertech Home page', () => {
											browser.url('https://chercher.tech/practice/popups')
											$("//input[@name='prompt']").click()
											browser.saveScreenshot('screenshot.png');
										})
									})
									
Request failed due to Error: unexpected alert open: {Alert text : I am prompt unexpected-alert-open-webdriverio

About Author

Article is written by Pavan (a) KarthiQ. Well, I am serving notice period in an MNC, Bangalore. I thought to enrich every person knowledge a little, I always have a feeling, when we teach something, we will learn more than what you know. Knowledge is the only thing that doubles when you spend it.

I have also created the reporter for Protractor Jasmine. Use for your projects without any hesitation

Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions