WebDriverIO Tutorial: Handling Alerts & Overlay in Selenium

is a NodeJS-based open source mechanisation essay model that supports both mobile and web covering automation. WebDriverIO is managed by the OpenJS foot. WebDriverIO is feature-rich; it provides a lot of features to users, such as extensile, a lot of in-built newsperson, web application testing support, mobile application support, etc. WebDriverIO uses and Chrome DevTools Protocol under the hood.

You can automate almost all features of your web application using WebDriverIO. The complicated scenarios, such as and overlays, also can be automated employ WebDriverIO.

Understand about WebDriverIO, and how to handle alarm & amp; overlayer in selenium with this guidebook.

What is the Alert Popup in a Web Application?

The alert boxes are typically invoked by JavaScript; these are system dialogs exhibit to the user. The system dialog is not constituent of the web page that is being shown in the browser, and it doesn & # 8217; t moderate any HTML or CSS codification behind it. The appearance look on the current browser and operating system. These types of popups are also known as JavaScript popup loge. As the scheme dialogs are native to the browser and operating system, unlike other web page elements, you can not visit and write the automation code.

Types of alerts pop-ups

• Alert box:Alert box display only text with the OK button
• Confirmation box:The confirmation box displays text with two buttons; the exploiter can either click on OK or CANCEL
• Prompt Box:The Prompt box provides the input region where the user can participate the required details and click on either OK or Cancel

What is an Overlay Pop-up in a Web Application?

Unlike Alert popups, the Overlays are not native to the browser or operating system. The overlays are typically designed using front-end frameworks such as materialUI, bootstrap, etc.

The Overlays are also name modal pop-ups; since this originated from the covering that is running on the browser, the modal popup or overlays can be inspected use the browser inspect instrument and automated in a usual way.

How to Handle Alerts in WebDriverIO?

As discussed before, there are three types of pop-ups; the Alert popup is one of them; alarm popup mechanization take a special mechanism to handle, as they grow from a browser or system. The WebDriverIO supply especial bidding or purpose to handle these alert popups.

Handling Alert box in WebDriverIO

Note:As a prerequisite installWebDriverIO.

The alert box hold text and one button. The alert box can be triggered habituate JavaScript

Example:

alert (& # 8220; I am an alarm box! & # 8221;);

The Typical Alert pop-up can be seen below.

The WebDriverIO provides special commands/functions to handle the Alert pop up

List of useable functions/commands to deal the alert popup in WebDriverIO

• acceptAlert ():This part copy the OK button clink on the alert box
• getAlertText ():This function returns the textbook of alert box (Ex: I am an alert box)
• isAlertOpen ():This function returns the boolean value. Returns true if the alerting is displayed, false otherwise.

Example code snippet for handling alert popup in WebDriverIO

//alert-popup.js
describe (& # 8216; Alert popup demo & # 8217;, () = & gt; {
it (& # 8216; should accept the alarm & # 8217;, async () = & gt; {
await browser.url (` https: //www.w3schools.com/js/tryit.asp? filename=tryjs_alert `);
await browser.pause (3000);
let frame = await browser. $ (& # 8216; # iframeResult & # 8217;);
await browser.switchToFrame (frame);
await $ (& # 8220; button=Try it & # 8221;) .click (); //triggers the alarm popup
await browser.pause (3000);
const isAlertOpen = await browser.isAlertOpen (); //get the status of awake open or not
if (isAlertOpen) {
const alertText = await browser.getAlertText (); //get the alert text
console.log (& # 8220; The alarm text is: & # 8220;, alertText) //logs the text to console
await browser.acceptAlert (); //accepts the alarm popup
}
});
});

Let & # 8217; s understand the above code snip

• await $ (& # 8220; button=Try it & # 8221;) .click ():The click () command triggers the alert box
• browser.isAlertOpen ():This method returns the if the alert popup is present on the browser or not
• await browser.getAlertText ():The getAlertText () entrance the alert box textbook and afterward we are log the textbook message to soothe using console.log
• browser.acceptAlert ():The acceptAlert () method simulates the click OK or in little it accepts the alert.

Execution flow:

1. The test first sail tohttps: //www.w3schools.com/js/tryit.asp? filename=tryjs_alert
2. Clicks on the Try it button, in turning, trigger the Alert popup
3. Outputs the alert textbook to console
4. Accepts the alarum

The above Webdriver alert popup demo test can be executed using the WebDriverIO run command syntax:

npx wdio wdio.conf.js & # 8211; spec & lt; path_to_spec_file & gt;

The console log output will be shown below

Handling Confirm Popup Alert in WebDriverIO

The confirm popup typically contains two push OK and CANCEL, This can be used to get the user confirmation. The confirm box can be triggered using JavaScript with confirm () method.

Example:

confirm (& # 8220; Press a button! & # 8221;)

A typically confirm popup can be seen below.

WebDriverIO users can simulate the popup actions such as tick on OK or CANCEL.

The WebDriverIO render the below functions to handle the confirm popup.

All the office which are available in the alert popup are available; in addition to that, the WebDriverIO provides another partdismissAlert ()to simulate the CANCEL push functionality.

List of available functions/commands to handle confirm popup in WebDriverIO

• isAlertOpen ():This function returns the boolean value. Returns true if confirm popup is displayed, false otherwise.
• getAlertText ():This function returns the text of confirm alerting box (Ex: Press a button)
• acceptAlert ():This mapping imitate the OK push click.
• dismissAlert ():This function or dictation simulates the CANCEL button click on the confirm box

Example code snippet to handle the confirm popup in WebDriverIO

//confirm-popup.js

describe (& # 8216; Confirm popup demo & # 8217;, () = & gt; {

it (& # 8216; should snap on natural button & # 8217;, async () = & gt; {

await browser.url (` https: //www.w3schools.com/js/tryit.asp? filename=tryjs_confirm `);

await browser.pause (10000);

let form = await browser. $ (& # 8216; # iframeResult & # 8217;);

await browser.switchToFrame (frame);

await $ (& # 8220; button=Try it & # 8221;) .click (); //triggers the confirm popup box

await browser.pause (10000);

//returns the position if confirm box open or not

const isAlertOpen = await browser.isAlertOpen ();

if (isAlertOpen) {

const confirmMessage = await browser.getAlertText (); //returns the confirm box textbook

console.log (& # 8216; The confirm content is: & # 8216;, confirmMessage) //logs the schoolbook

//Simulates the Cancel push

await browser.dismissAlert ();

//Simulates the OK button

// await browser.acceptAlert ();

}

});

});

Let & # 8217; s understand the above codification

• $ (& # 8220; button=Try it & # 8221;) .click ():This line of codification triggers the confirm popup box
• browser.isAlertOpen ():This command check if the alerting is opened or not
• browser.getAlertText ():This returns the confirm popup alarum text, the returned text is later logged as a console log.
• browser.dismissAlert ():This command simulates the CANCEL push click on confirm popup.

Note: If you want to use the OK button clink, you can use the await browser.acceptAlert (); as shown in commented code in the above example.

Let ’ s understand the execution flowing

1. The examination first navigates to the URLhttps: //www.w3schools.com/js/tryit.asp? filename=tryjs_confirm
2. Then tick the Try it button, which triggers the confirm popup box
3. The status of confirm popup box will be checked using isAlertOpen ()
4. If the confirm box is visible, the text will be captured and logged into the console
5. If the confirm box is visible in the browser, then the Cancel button will be chatter.

You can execute the above confirm prompt box example utilize the WebDriverIO execute command syntax:

npx wdio wdio.conf.js & # 8211; spec & lt; path_to_spec.js & gt;

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

The command line yield will be shown below

Handling the Prompt box in WebDriverIO

The prompt box is also cognize as the input alert box, the prompt box typically carry one exploiter stimulus field, the OK and CANCEL push. The prompting box is habituate for capturing user input. When the prompt box is displayed on the browser, either the exploiter can choose to enter the input field and click on the OK push or can snap on the CANCEL push.

The prompting () function in javascript triggers the prompt popup on the browser.

Example to trigger the prompting box in JavaScript:

let person = prompt (& # 8220; Please enter your name: & # 8221;);

The prompting box can be seen below.

The WebDriverIO cater the special command to typewrite the text in the prompt box. ThesendAlertText ()office can be used to enter the schoolbook in the prompt box.

All the functions/commands which are available for the confirm box are still useable to the prompt popup. The additionalsendAlertText ()part is provided to enter the text in the quick pop-up.

List of uncommitted functions/commands to handle straightaway popup in WebDriverIO

• isAlertOpen ():This office returns the boolean value. Returns true if the prompt popup is displayed, false otherwise.
• getAlertText ():This function render the schoolbook of the prompt alert box (Ex: Please recruit your gens:)
• acceptAlert ():This function simulates the OK button dog.
• dismissAlert ():This office or dictation simulates the CANCEL button click on the confirm box
• sendAlertText ():This part sets the input battleground text to given twine

Example codification to handle the prompting popup in WebDriverIO

describe (& # 8216; Prompt popup & # 8217;, () = & gt; {

it (& # 8216; should type in prompt and accept & # 8217;, async () = & gt; {

await browser.url (` https: //www.w3schools.com/js/tryit.asp? filename=tryjs_prompt `);

await browser.pause (7000);

let frame = await browser. $ (& # 8216; # iframeResult & # 8217;);

await browser.switchToFrame (frame);

await $ (& # 8220; button=Try it & # 8221;) .click (); //triggers prompt box

await browser.pause (7000);

const isPromptOpen = await browser.isAlertOpen (); // chit if prompt is open

if (isPromptOpen) {

await browser.sendAlertText (& # 8220; BrowserStack & # 8221;); // types the textbook BrowserStack

await browser.pause (1000);

const promptboxText = await browser.getAlertText (); //returns the schoolbook of prompt box

await console.log (& # 8220; The prompt box schoolbook is: & # 8220;, promptboxText); //logs the schoolbook

//Click on OK in prompting box

await browser.acceptAlert (); //accepts the prompt box

}

await browser.pause (7000);

//To drop the prompt box

//await browser.dismissAlert ();

});

});

Let & # 8217; s interpret the above code,

• browser.isAlertOpen ():Checks if the prompt is open or not
• browser.sendAlertText (& # 8220; BrowserStack & # 8221;):Types the text in quick box input field
• browser.getAlertText ():return the prompt box textbook, and later it will be logged to the console output
• browser.acceptAlert ():Accepts the prompt box, same as clicking the OK button.

Execution flow

1. Navigates to the URLhttps: //www.w3schools.com/js/tryit.asp? filename=tryjs_prompt
2. Clicks on the Try it button, which in crook shows the prompt popup box
3. Checks if the prompt box is open
4. If the prompt box is open, then set the stimulant battleground to BrowserStack
5. Gets the prompt box text and logs to the console.
6. Accepts the prompt box

You can execute the above confirm prompting box illustration using the WebDriverIO execute command syntax:

npx wdio wdio.conf.js & # 8211; spec & lt; path_to_spec.js & gt;

The console output will be establish below.

Talk to an Expert

Handling overlay box in WebDriverIO

The overlayer box is handled by the application, though for a user, it feels like a popup; it doesn ’ t originate from the system or browser, so the overlay popup or modal can be inspected using the browser inspector tool and automated.

The typical overlay popup looks like below.

Just like any other HTML factor, the modal can be inspected, and get the text, shut the popup or click theX button.

Example code to handle the overlayer popup in WebDriverIO

describe (& # 8216; Overlay pop up & # 8217;, () = & gt; {

it (& # 8216; should shut the overlay pop up & # 8217;, async () = & gt; {

await browser.url (` https: //www.w3schools.com/bootstrap/tryit.asp? filename=trybs_ref_js_modal & amp; stacked=h `);

await browser.pause (3000);

let frame = await browser. $ (& # 8216; # iframeResult & # 8217;);

await browser.switchToFrame (frame);

await $ (& # 8220; button=Open Modal & # 8221;) .click (); //opens the modal popup

await browser.pause (1000);

await $ (& # 8220; button.close & # 8221;) .click (); //closes the modal popup

await browser.pause (7000);

});

});

Let & # 8217; s understand the code

•  $ (& # 8220; button=Open Modal & # 8221;) .click ():This codification opens the overlay modal popup
• $ (& # 8220; button.close & # 8221;) .click ():This line of code closes the modal popup

As you can see from the above code, there is no special mechanism required to treat the modal pop-up in WebDriverIO

Execution flow

1. Navigates to the URLhttps: //www.w3schools.com/bootstrap/tryit.asp? filename=trybs_ref_js_modal & amp; stacked=h
2. Clicks on the Open Modal push
3. Clicks on the Modal close (X) button

How to Perform Cross Browser Testing on BrowserStack

• Install the@ wdio/browserstack-servicewith the command

npm install @ wdio/browserstack-service

• Login to the Browserstack account and copy the Access Key and Username
• Open the wdio.conf.js configure the key and user

user: & # 8220; & lt; user_name & gt; & # 8221;,

key: & # 8220; & lt; access_key & gt; & # 8221;

Example:

exports.config = {

user: & # 8220; gasomeooemekj & # 8221;,

key: & # 8220; asdfjsadfiekkdl & # 8221;,

• Configures services pick

service: [

[& # 8216; browserstack & # 8217;, {

browserstackLocal: true

}]

],

• Configure the capabilities as shown below

capability: [{

maxInstances: 5,

browserName: & # 8216; chrome & # 8217;,

& # 8216; bstack: options & # 8217;: {

buildName: & # 8216; browserstack-webdriverIO-build & # 8217;,

os: & # 8216; OS X & # 8217;,

 

},

acceptInsecureCerts: true,

excludeDriverLogs: [& # 8216; * & # 8217;], // pass & # 8216; * & # 8217; to exclude all driver session logs

// excludeDriverLogs: [& # 8216; bugreport & # 8217;, & # 8216; server & # 8217;],

}],

Putting everything together

//wdio.conf.js

exports.config = {

exploiter: & # 8220; lorem_ipsum & # 8221;,

key: & # 8220; lorem_ipsum & # 8221;,

service: [

[& # 8216; browserstack & # 8217;, {

browserstackLocal: true

}]

],

capabilities: [{

maxInstances: 5,

browserName: & # 8216; chrome & # 8217;,

 

& # 8216; bstack: options & # 8217;: {

buildName: & # 8216; browserstack-webdriverIO-build & # 8217;,

os: & # 8216; OS X & # 8217;,

 

},

acceptInsecureCerts: true,

excludeDriverLogs: [& # 8216; * & # 8217;],

 

}],

specs: [

& # 8216; ./test/specs/ * * / * .js & # 8217;

],

exclude: [

],

maxInstances: 10,

logLevel: & # 8216; still & # 8217;,

bail: 0,

baseUrl: & # 8216; https: //www.browserstack.com & # 8217;,

 

waitforTimeout: 10000,

connectionRetryTimeout: 120000,

connectionRetryCount: 3,

framework: & # 8216; mocha & # 8217;,

reporters: [& # 8216; spec & # 8217;],

mochaOpts: {

ui: & # 8216; bdd & # 8217;,

timeout: 60000

},

}

• Execute test with WebDriverIO execution dictation,

npx wdio wdio.conf.js & # 8211; spec & lt; path_to_spec.js & gt;

 

The WebDriverIO supports all major browsers and operating systems. is easy in WebDriverIO compared with any other automation model. However, cross browser and need a stable environs and infrastructure. Setting up infrastructure and maintaining them is the about hard job and involves cost. The cloud-based testing platform such as BrowserStack, make it easy by providing thousands of real device. A user but needs to change the constellation file options, and the existing test cases can be run on various without making any changes. The cross-browser testing increase the confidence of stakeholders and ensures minimal bug in production.

Related Guides