<<Previous Post                          << Complete Tutorial>>                             Next Post>>

WebDriverIO – Handling Alerts 

WebDriverIO Handles Alert very well like any other Automation Framework plus commands of Handling Alerts are very simple.

There are four commands to Handle Alerts in WebDriverIO which are as follows:-

1. acceptAlert()
2. dismissAlert()
3. getAlertText()
4. sendAlertText()

So, now we will learn them one by one and do exercises related to it.

acceptAlert() :- acceptAlert() command Accepts Alert box or dialogue box came across Application while performing automation on that web application. In Simple words Accept Alert accepts the alert box or dialog box if present otherwise throws error.

Usage:- browser.acceptAlert()

Pre-requisite: Have ‘Visual Studio Code’ IDE installed in your machine (Click here to install if not installed in your machine)

Here is the small Exercise to understand acceptAlert Command by clicking on button which generates an AlertBox while Automating the Application and then Accepting/closing it, using acceptAlert command of WebDriverIO.

Using acceptAlert() Command

First, I will demonstrate the exercise where we will open URL in browser window, then click on Button which generates an Alert Box on Screen and then Accepts it or close it using acceptAlert() command, followed by practically demonstrating the WebDriverIO Automation code for achieving it.

Exercise:-

1)  Navigate to http://omayo.blogspot.com/

2)  Clicking on ClickToGetAlert Button on Omayo.blogspot.com Web Application.

3) Now Accepting/Closing the Alert/Dialogue Box.

Practical Demonstration:

Following are the Steps to Perform above Exercise (i.e. click on Button which generates an Alert Box on Screen and then Accepts it or close it using acceptAlert() command) using WebDriverIO Automation code in ‘Visual Studio Code’ IDE:

Pre-requisite: Download the Project from here (Click here to Download) and Unzip it.

1)  Open Visual Studio Code on your system.

2)  Click on File and Select Open Folder. Select the project folder on which your workspace is present.

3)  Expand ‘test’ from the Explorer, right click on the displayed ‘specs’ and select ‘New File’ option as shown below:

4) Give any name of the newly created file say “acceptAlert_Command_test.js” and copy the below given code into the newly created file as shown below and save the file:

The following is the WebDriverIO sample code to click on button to generate Alert Box on Screen and Accept or close it on ‘Omayo.blogspot.com’ Web application.

You can understand this code, by reading the comments provided in the below code:

Copy the code from here:-

describe('This Example show usage of acceptAlert() command in webdriverio', () => {
    it('should accept Alert Box', ()=> {
    browser.url('http://omayo.blogspot.com');
    $('#alert1').click(); //Click on Alert Button 
    browser.acceptAlert(); //Accept the Alert/Dialogue Box
    browser.pause(3000);
    });
});

5) Click on ‘wdio.conf.js’ to open in the IDE, and make sure the Test file name is updated properly and browser name should be changed from firefox to chrome in this file as shown below and save it:

6) Click on Terminal and Open New Terminal.

7) By Default, Powershell Terminal will open, change it to git bash as shown below:

8) Open Another Terminal in the same way we did in the step 6 and run below command in terminal

.\node_modules\.bin\wdio .\wdio.conf.js

Observe that the ‘acceptAlert_Command_test.js’ will get executed successfully, the firefox Browser will launch, and open URL given in code and respective action will be taken by WebDriverIO Automation code.

And also, the result will be displayed as ‘Passed’ in the terminal as shown below:

This is how, we can take help of acceptAlert() Command of WebDriverIO to accept Alert Box which appears on screen. Likewise, I will explain other commands to perform different operations on Web Pages using WebDriverIO in the upcoming Articles.

Next Steps:

> To learn more about WebDriverIO, continue to the next post (Click on Next Post link below)

> Check complete WebDriverIO Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning ?

About Me > Ajay Lunia 

Connect to me on LinkedIn (Click here)

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                          << Complete Tutorial>>                             Next Post>>