Handling Waits In WebdriverIO

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................