$$

The $$ command fetches every element that matches a selector, starting from this element. It returns a WebdriverIO.ElementArray: a real array (Array.isArray is true) that stays thenable until the query finishes. Await it for a resolved list (length is then a number), or use it directly with for await, await el.$$('.item').length, and el.$$('.item')[0]. A synchronous for...of throws until the list has resolved.

info

As opposed to the $$ attached to the browser object this command queries elements based on a root element.

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')

WebdriverIO seamlessly traverses shadow roots when using the $ or $$ commands, regardless of the nesting level or shadow root mode, for example:

await browser.url('https://ionicframework.com/docs/usage/v8/datetime/basic/demo.html?ionic:mode=md')
await browser.$('button[aria-label="Sunday, August 4"]').click()
 await browser.$('.aux-input').getValue()

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'))
}

The result also provides asynchronous versions of the Array iteration methods, like map and mapSeries. See Iterating over elements for how they work.

info

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