$$

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.

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

info

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

Usage

$(selector).$$(selector)

Parameters

Name	Type	Details
selector	String, Function, Matcher	selector, JS Function, or Matcher object to fetch multiple elements

Examples

example.html

loading...

View on GitHub

multipleElements.js

loading...

View on GitHub

multipleElements.js

loading...

View on GitHub

multipleElements.js

loading...

View on GitHub

Returns

• <WebdriverIO.ElementArray>