{"id":106354,"date":"2020-08-20T10:00:50","date_gmt":"2020-08-20T07:00:50","guid":{"rendered":"https:\/\/www.javacodegeeks.com\/?p=106354"},"modified":"2020-08-10T16:29:30","modified_gmt":"2020-08-10T13:29:30","slug":"webdriverio-tutorial-handling-alerts-overlay-in-selenium","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2020\/08\/webdriverio-tutorial-handling-alerts-overlay-in-selenium.html","title":{"rendered":"WebDriverIO Tutorial: Handling Alerts & Overlay In Selenium"},"content":{"rendered":"

You\u2019d hardly find a website these days without alerts and pop-ups! The alert boxes warn you whenever you perform a wrong action or to enter details to access a website. These alert boxes stop you from performing any other browser functions till the alert is resolved. This is why it becomes important that you handle them in your Selenium test automation scripts.<\/p>\n

In this WebDriverIO tutorial on alert handling in Selenium, I\u2019ll show you how to handle alerts & pop-ups as well as overlay modal in WebDriverIO. I will also cover the different types of alerts you will face during automation and what are the key points you need to follow for alert handling in Selenium using WebDriverIO.<\/p>\n

Types Of Alerts In WebDriverIO<\/h2>\n

Alerts and pop-ups are pretty common in any website development, and while performing Selenium test automation you have to handle them as well. These alerts or rather javascript alerts, are pop up that takes your attention away from the current browser and forces you to read them. You won\u2019t be able to perform any further browser action if you don\u2019t know how to handle the alerts, this stands true for both manual and automation.<\/p>\n

It is important to note that you can\u2019t identify alerts using devtools or by XPath. Also, since they can\u2019t be handled as a window, this is why it gets a bit tricky to handle them, but don\u2019t worry, you\u2019d find more about this in the latter section of this WebDriverIo tutorial.<\/p>\n

There are three types of alerts that you\u2019d need to handle in WebDriverIO.<\/p>\n

    \n
  1. Alert pop up<\/li>\n
  2. Confirmation Alert<\/li>\n
  3. Prompt pop up<\/li>\n<\/ol>\n

    Alert Pop Ups<\/h3>\n

    The alert pop up or alert() method displays an alert box with just a message and \u2018OK\u2019 button. This alert used to inform the user about some information. There is only one button \u2018OK\u2019 displayed with the text of information. Here, the user has only one option to press the OK button. Below is the example of alert pop up.<\/p>\n

    \n
    \"\"
    Image Source<\/a><\/em><\/figcaption><\/figure>\n<\/div>\n

    Confirmation Alert<\/h3>\n

    The confirmation alert is the second type of alert with a message, where it gives the user the option to press OK or Cancel. Here is the example of a confirmation alert.<\/p>\n

    \n
    \"\"<\/figure>\n<\/div>\n

    Prompt Pop up<\/h3>\n

    The prompt pop up is the last alert where this used to let the user give input for the website. Here, the user can give input and press the OK button or press Cancel to avoid giving input. Below is the example of the prompt pop up.<\/p>\n

    \n
    \"\"<\/figure>\n<\/div>\n

    Apart from these in-built javascript alerts, there is also one more pop up which is known as modal. The main difference between an alert and modal is that alert can not go off without requested actions e.g, OK, or Cancel. In the modal, it is made using the < div ><\/code> tag by giving special CSS code. This modal can go off by clicking somewhere other than the modal.<\/p>\n

    \n
    \"\"<\/a><\/figure>\n<\/div>\n

    Overlay Modal<\/h3>\n

    This modal is built using the client-side framework e.g bootstrap, ReactJS. A developer can be used to display some information, pop up, and form. There is no special<\/p>\n

    Here is an example of Overlay Modal:<\/p>\n

    \n
    \"\"<\/figure>\n<\/div>\n

    Now, that you are familiar with a different kind of alert and modal available in javascript. I\u2019ll show you more about alert handling in Selenium in this WebDriverIO tutorial.

    <\/div> <\/div><\/p>\n

    WebDriverIO Tutorial: Run Your First Automation Script<\/a><\/p>\n

    Alert Handling In Selenium Using WebDriverIO<\/h2>\n

    If you are familiar with alert handling in Selenium test automation with other frameworks, you\u2019d assume that you\u2019d have to switch to the alert before alert handling in Selenium. .For example in Java, you have to create switchTo() method and then need to access the alert() method in order to perform an action. This is not the case here, you\u2019ll see how as we further progress in this WebDriverIO tutorial. For Selenium C# lovers, we have previously covered and article on alert handling in Selenium C#<\/a> , feel free to check it out.<\/p>\n

    For example,<\/p>\n

    \n
    \n\n\n\n
    \n
    1<\/div>\n<\/td>\n
    		\n
    \n
    driver.switchTo().alert().accept();<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

    Similarly, dismiss(), sendkeys() methods are also accessible.<\/p>\n

    Since you do not have to use the switchTo() method before alert handling in Selenium, it gets a tad bit easier to perform Selenium test automation.<\/p>\n

    The methods you\u2019d need for alert handling in Selenium for automated browser testing<\/a> are:<\/p>\n