If you're loading a page and want to make sure that some elements are showing up before advancing, you'd be inclined to use browser.waitUntil(). While it does do the job, it holds onto the errors until the test times out.

In this example, I'd like to use waitUntil to check that multiple elements are visible

browser.waitUntil(function() {
  return doesNotExist.$$('#elem-1').isVisible() 
    && browser.$$('#elem-2').isVisible()
})

Here's what I see when I run this inside a test:

☁  wdio-tips  wdio

F

0 passing (15.30s)
1 failing

1) a testsuite1 runs:
Failed: Promise was rejected with the following reason: doesNotExist is not defined
running firefox
error properties: Object({ details: undefined, type: 'WaitUntilTimeoutError', shotTaken: true })
Error: Promise was rejected with the following reason: doesNotExist is not defined
    at waitUntil(<Function>) - index.js:312:3

The key thing to notice here is the test time of 15.3 seconds before it gave up with an error. waitUntil runs your function on an interval (default 500ms) for a total 10s timeout period. So that means that the function has run 20 times during those 10 seconds, but you only see the error message at the very end once it times out.

The annoying part about this is the amount of time it takes to get the feedback, but once you see the error message, you can fix it and double check the rest of it for syntax errors so that you don't spend all your time waiting 10s for that feedback. I think this is just the catch with using browser.waitUntil using their synchronous API.

Last week, I started working on integrating a test suite previously built using Nightwatch, and making it work with webdriverIO. While I love all of webdriverIO’s features like synchronous code when using their test runner and a REPL, there were a few things that I’d like to share which were a little hard to find in the docs or on a quick search.

In case you missed it... Each day this week, I've been posting one thing I've learned while setting up webdriverIO. Check out my previous posts here:

• Using $$.(selector) vs browser.elements(selector)
• Using browser.debug() to help debug your tests
• Get text from a list of items