Handling Alerts And click Action functions In WebDriverIO

In this article, we will see how to handle alerts in Webdriver IO and action commands in WebDriver IO.

Prerequisite

  • Setup webdriver IO project.

We can handle alerts in Webdriver IO using the below functions

  • acceptAlert()
  • dismissAlert()
  • getAlertText()
  • sendAlertText()
  • isAlertOpen()

acceptAlert()

When user clicks on the button it displays the alert message in the browser. We can use the acceptalert() function to accept the alert.

This is equal to clicking the ok button in the alert popup.

describe('handle alerts',()=>{
    it('first test',async()=>{
          //open the application in the browser
          await browser.url('https://rahulshettyacademy.com/AutomationPractice/')
          //pause the script for 5seconds
          browser.pause(5000);
          //click on the button on the page.
          await (await $('#alertbtn')).click();
          //accept the alert using acceptalert function
          await browser.acceptAlert();  
         
    })

}) 

dismissAlert()

When user clicks on the button it displays the alert message in the browser. We can use the dismissAlert() function to dismiss the alert.

This is equal to clicking the cancel button in the alert popup.

describe('handle alerts',()=>{
    it('first test',async()=>{
          await browser.url('https://rahulshettyacademy.com/AutomationPractice/')
          browser.pause(5000);
          await (await $('#confirmbtn')).click();
          const text=await browser.getAlertText();
          console.log(text);
          browser.pause(10000);
          //dismiss the alert using dismissAlert function  
          await browser.dismissAlert();  
         
    })

}) 

getAlertText()

If the user wants to get the text which is present in the alert pop-up. We can use the getAlertText() function which will return the text inside the alert popup.

describe('handle alerts',()=>{
    it('first test',async()=>{
          //open the application in the browser
          await browser.url('https://rahulshettyacademy.com/AutomationPractice/')
          //pause the script for 5seconds
          browser.pause(5000);
          //click on the button on the page.
          await (await $('#alertbtn')).click();
          //using the getalerttext function to get the text present inside the alert pop up 
          const text=await browser.getAlertText();
          //printing the text in the console.
          console.log(text);
          //accept the alert using acceptalert function
          await browser.acceptAlert();  

         
    })

}) 

sendAlertText()

This function is used to send input to the textbox present on the alert pop-up. This function accepts string as parameter.

browser.sendAlertText("This is Input Text");

isAlertOpen()

This function is used to check whether an alert is visible or not. It returns a boolean value.

true means the alert is visible false means the alert is not visible

const isOpen = browser.isAlertOpen();
console.log(isOpen);

If the alert is not present while executing the scripts, NoAlertPresentException will be thrown.

Click Action functions

click

This function is used to click on the current element

$("#testid").click();

moveTo

This function will move the cursor of the mouse to the middle of the webelement.

$("#test").moveTo()

moveTo(xoffset,yoffset)

This function will move the cursor of the mouse to the required offsets of the webelement.

$(".test").moveTo(40,60)

doubleClick

This function is used to doubleclick on the webelement.

$(".test").doubleClick()

Drag and drop

This function is used to drag an element from its source and place(drop) it in the required destination.

This function also takes an additional optional argument duration, how long the drag should take place.

$("#test").dragAndDrop($("#testdestid"))

buttonDown and buttonUp

These functions are used to click and hold the mouse keys.

$("#test").moveTo()
browser.buttonDown()
$("#test").moveTo()
browser.buttonUp()

Hope this article helps you understand how to handle alerts in Webdriver IO and some click actions commands which will be handy while doing Test Automation.

Thanks

Happy learning.