waitFor* commands/methods in WebdriverIO

In our previous post, we have seen global waits and timeouts applicable for Page, script or test wise.

WebdriverIO provides some more wait methods applicable to individual elements based on specific conditions and they are as follows –

waitForClickable

waitForExist

waitForEnabled

waitForDisplayed

Note – all these above methods are applicable for the element level not on browser level, means we can apply this above methods on an element.

Let’s see them one by one.

waitForClickable()

This above method will wait for an element to be clickable or not clickable if it takes some time.

Syntax –

await $(selector).waitForClickable({ timeout, reverse, timeoutMsg, interval })

timeout – how much time to wait for the element to be clickable or not clickable, if time is over then throw error.

reverse – default to false, if true then wait for the element to not clickable.

timeoutMsg – message to throw on console if timed out.

interval – polling time or interval in between each check, default to 500ms.

Note – all these parameters / options are optional.

example –

await $('Next').waitForClickable({timeout: 2000, timeoutMsg: "button not clickable after 2 sec"})

wdio will wait for 2 sec for the Next button to be clickable, it will check in every 0.5 sec if the element is clickable.

await $('Next').waitForClickable({timeout: 2000, reverse: true, timeoutMsg: "button is still clickable after 2 sec"})

Currently the Next button is clickable, but wdio will wait for 2 sec for the Next button to NOT to be clickable, it will check in every 0.5 sec if the element is not clickable.

Note – reverse parameter is set to true

waitForExist()

wdio will wait for an element to exist or not on the DOM.

the options / parameters are same as waitforClickable()

example –

await $('Home').waitForExist({timeout: 2000, timeoutMsg: "Home is not present / identified even after 2 sec"})

wdio will wait for the Home button to appear on screen with in 2sec, else it will throw error with text as mentioned in the timeoutMsg parameter.

await $('Refresh').waitForExist({timeout: 2000, reverse: true, timeoutMsg: "loader button is still present even after 2 sec"})

Think of a situation where we navigating to a new screen and loader appeared till the data loads on the screen, so we can use this method with reverse: true, so wdio will wait for the loader button to disappear from screen with in 2sec (else it will throw error with text as mentioned in the timeoutMsg parameter.)

waitForEnabled()

wdio will wait for an element to be enabled or disabled.

The options / parameters are same as waitforClickable()

await $('Continue').waitForEnabled({timeout: 2000})

wdio will wait for the element to be enabled or disabled.

waitForDisplayed()

wdio will wait for an element to be displayed or hidden

The options / parameters are same as waitforClickable()

Example –

Think of a situation where we are logging in and on successful login, we should see the Welcome element/text.

await $('Welcome').waitForDisplayed({timeout: 2000})

wdio will wait for the Welcome element/text to be displayed with in 2sec.

Note – if you don’t want to specify the wait time / timeout for each waitfor* methods, then you can leave this parameter blank and wdio will use the waitforTimeout: 10000 of wdio.conf.ts file.

syntax – await $('Home').waitForExist({timeoutMsg: "Home button is not present / identified even after 2 sec"})