Introduction
In this article we will look at different Wait functions we can use in WebdriverIO Test Automation Project.
Pre-requisite
WebDriverIO Test Automation project setup needs to be done.
When we develop Test automation scripts and run and see in our machine sometimes we may face synchronization issues. Some developers/testers use default wait which is thread.sleep() for a specific action to occur at a certain step in their code. This is bad practice to handle synchronization. So to handle these synchronization issues we use the concept of waits.
A good thing about these javascript Test automation frameworks(playwright, cypress, webdriverIO) implicitly handles these waits.
For some conditions in our code, we may need to define them explicitly.
Below are the types of wait commands in WebDriverIO
- pause()
- waitForDisplayed
- waitForEnabled
- waitForExist
- waitForClickable
- waitUntil
pause() Function
The pause command will halt the execution of script for x amount of time. It takes time in milliseconds as an argument. This is equivalent to the thread.sleep(5000) method in selenium with java. This function will help you to identify timeout related issues. The pause function is not encouraged to be used in your test automation scripts. Because you may tend to put these functions at many steps and the execution time of your test will become higher. So use it only for debugging purpose.
Usage
browser.pause(5000)
waitForDisplayed
This function is used to check if the element is displayed on the screen.
usage
await $('#test').waitForDisplayed({timeout:1000})
waitForClickable
This function is used to check if the element is clickable on the screen. We can use them for button and links.
usage
await $('#button').waitForClickable({timeout:1000})
waitForEnabled
This function is used to check if the element is enabled/disabled on the screen. We can use it for input field.
Usage
await $('#button').waitForEnabled({timeout:1000})
waitForExist
This function is used to check if the element is present in the DOM.
await $('#button').waitForExist({timeout:1000})
Note
The default timeout for all the wait commands is set in the wdio.config.file which is 10000 milliseconds(10 seconds). We can either set at global level in configuration file or at the test level.
While execution of the script, all the wait command executes and returns a boolean value. Depending upon the boolean value the next steps of the scripts will execute.
For example when the statement await $('#test').waitForDisplayed({timeout:1000}) returns true then it goes ahead and executes the next lines of code. If it returns false then it will throw a failure.
waitUntil
waituntil commands checks for a particular condition to occur. This wait is equivalent to explicit waits in selenium.
It will check for the boolean value return from the condition that you have added.
waituntil commands will check for a particular condition for a specific timeout.
We need to add a timeout message to get to know a proper descriptive error message.
We can also have a custom timeout for the waitcommand also.
Conditions may be waiting for the text message to appear on the screen.
usage
await browser.waituntil(async function() {
let text = await $('#successmessage').getText();
return text === "Success";
}, {
timeout: 5000,
timeoutMsg: 'success text not found'
})
Summary
Hope you got good knowledge on different wait commands available in webdriverIO. So use it whenever it is required for a particular condition.
Thanks............
Happy learning................