$$

The $$ command is a short and handy way in order to fetch multiple elements on the page. It returns a ChainablePromiseArray containing a set of WebdriverIO elements.

Using the wdio testrunner this command is a global variable, see Globals for more information. Using WebdriverIO within a standalone script it will be located on the browser object instead (e.g. browser.$$).

You can chain $ or $$ together without wrapping individual commands into await in order to walk down the DOM tree, e.g.:

const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src')

It is also possible to use async iterators to loop over the result of the query, e.g.:

// print all image sources
for await (const img of $$('img')) {
  console.log(await img.getAttribute('src'))
}

Iterating over elements

The result of $$ also provides asynchronous versions of the Array iteration methods forEach, map, find, findIndex, some, every, filter and reduce. They accept async callbacks and can be called on $$ directly:

const texts = await $$('h3').map((h3) => h3.getText())

Every method except reduce also has a *Series variant (forEachSeries, mapSeries, and so on). The base method runs all callbacks concurrently, while the *Series variant runs one callback at a time, in list order. reduce always runs one callback at a time. Use a *Series variant when the order of your interactions with the page matters.

The concurrent find and findIndex resolve with the first match to finish, which is not necessarily the earliest match in the list, and the concurrent find, findIndex, some and every keep running the remaining callbacks after the result is known. Use the *Series variant to get the earliest match and stop there.

info

For more information on how to select specific elements, check out the Selectors guide.