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.