WebDriverIO – Wait Commands

<<Previous Post                          << Complete Tutorial>>                             Next Post>>

Wait Commands in WebDriverIO

Sometimes on testing a page we need to wait for something to happen on a page before we proceed. i.e., an element needs to appear or an element needs to go away before you do something.

WebdriverIO provides multiple commands to wait on elements to reach a certain state (e.g. displayed,enabled,existing). These commands take a selector argument and a timeout number which declares how long the instance should wait for that element to reach the state.

There are 4 types of wait commands in WebDriverIO which are as follows :-

1. waitForDisplayed
2. waitForEnabled
3. waitForExist
4. waitUntil

Let’s understand them one by one with example.

Pre-requisites:

Go through our previous articles on WebDriverIO if you are new to this Automation tool (Click here to view our complete tutorial)

waitForDisplayed

This command waits for an element for the provided amount of milliseconds to be displayed or not displayed.

Exercise:-

1. Navigate to https://the-internet.herokuapp.com/dynamic_loading/1.
2. Click on Start Button.
3. Assert the ‘Hello World’ Text.

Syntax:

$(selector).waitForDisplayed(ms, reverse, error)

ms - time in ms (default: 500) reverse - if true it waits for the opposite (default: false) error - if exists it overrides the default error message

Sample Code for waitForDisplayed:

const assert = require('assert');
   describe('waitForCommands', () => {
     it('waitForDisplayed', ()=> {
         browser.url('https://the-internet.herokuapp.com/dynamic_loading/1');
         $('#start button').click();
         $('#finish').waitForDisplayed();  //will wait for text present under ID finish to display.
         assert.equal( ($('#finish h4').getText()),'Hello World! ');
     });
});

waitForEnabled

This command waits for an element (selected by css selector) for the provided amount of milliseconds to be (dis/en)abled.

Exercise:-

1. Navigate to https://the-internet.herokuapp.com/dynamic_controls.

2. Click on Enable Button.

3. Wait for button to be enabled.

4. Add value test in enabled text box.

Syntax:

$(selector).waitForEnabled(ms, reverse, error)


ms - time in ms (default: 500) reverse - if true it waits for the opposite (default: false) error -  if exists it overrides the default error message

Sample Code for waitForEnabled:

const assert = require('assert');
describe('waitForCommands', () => {
it('waitForEnabled',()=> {
                         browser.url('https://the-internet.herokuapp.com/dynamic_controls');
                         $('#input-example button').click();
                         $('#input-example input').waitForEnabled();
                         $('#input-example input').addValue('test');
                         browser.pause(5000);
   });
});

waitForExist

This command waits for an element for the provided amount of milliseconds to be present within the DOM. Returns true if the selector matches at least one element that exists in the DOM, otherwise throws an error.

Exercise:-

1. Navigate to https://the-internet.herokuapp.com/dynamic_loading/2.
2. Click on Start Button.
3. wait for element to be present in DOM.

Syntax:

$(selector).waitForExist(ms, reverse, error)


ms - time in ms (default: 500) reverse - if true it waits for the opposite (default: false) error  -  if exists it overrides the default error message

Sample Code for waitForExist:

const assert = require('assert');
describe('waitForCommands', () => {
it('waitForExist', ()=> {
                         browser.url('https://the-internet.herokuapp.com/dynamic_loading/1');
                         $('#start button').click();
                         $('#finish').waitForExist();  //will wait for text present under ID finish to display.                                
   });
});

waitUntil

This wait command is your universal weapon if you want to wait on something. It expects a condition and waits until that condition is fulfilled with a truth value.

Exercise:-

1. Navigate to https://the-internet.herokuapp.com/dynamic_controls.
2. Click on Remove Button.
3. Wait till checkbox gets removed from the page.
   

   Syntax:

   browser.waitUntil(condition, timeout, timeoutMsg, interval)
   
   
   condition - condition to wait on timeout - timeout in ms (default: 500) timeoutMsg - error message to throw when waitUntil times out interval - interval between condition checks (default: 500)

   Sample Code for waitUntil

   const assert = require('assert'); describe(‘waitCommands’, () => { 
      it('waitUntil',() => {
      browser.url('https://the-internet.herokuapp.com/dynamic_controls');
      $('#checkbox-example button').click();                      
      browser.waitUntil(() => {                         
      return !($('#checkbox').isExisting());       
     });      
    }); 
   });

   Next Steps:

   > To learn more about WebDriverIO, continue to the next post (Click on Next Post link below)

   > Check complete WebDriverIO Tutorial Contents here (Click here)

   Please leave your questions/comments/feedback below.

   Happy Learning ?

   About Me > Ajay Lunia 

   Connect to me on LinkedIn (Click here)

   On a mission to contribute to the Software Testing Community in all possible ways.

   <<Previous Post                          << Complete Tutorial>>                             Next Post>>