webdriverio wait for page to load

Question

Is there a way to make webdriverio wait for a page to load? I saw that in java I can have something like:

executeScript("return document.readyState").equals("complete"));

or

driver.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS);

Is there a way I can do it in webdriverio? I know that I can use waits to wait for a specific element but I am looking for a way to wait for the whole page the load

Answer 1

1. We can get this done using the keyword waitUntil(https://webdriver.io/docs/api/browser/waitUntil.html).

2. For details about document.readyState property, refer here(https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState)

Code:

browser.waitUntil(function () {
      const state = browser.execute(function () {
        return document.readyState;
      });
      //console.log("state:" + state)
      return state === 'complete';
    },
      {
        timeout: 60000, //60secs
        timeoutMsg: 'Oops! Check your internet connection'
      });

Answer 2

simplified version of @ Sadeesh code:

browser.waitUntil(
  () => browser.execute(() => document.readyState === 'complete'),
  {
    timeout: 60 * 1000, // 60 seconds
    timeoutMsg: 'Message on failure'
  }
);

Answer 3

You can add browser.setTimeout({ 'pageLoad': 10000 }) to your wdio.conf.js file within the before: function

see https://webdriver.io/docs/timeouts.html for further detail.