Skip to main content

$$

Overview​

Use the $$ command instead of findElements as a shorter command to get multiple elements on the page within the scope of an element. This command is similar to the browser.$$() command but differs in that the search for elements will be among the children of the current element.

info

Read more about how to select specific elements in the recipe "How to use selectors".

Usage​

await browser.$(selector).$$(subSelector);

Command Parameters​

NameTypeDescription
subSelectorString or Function or MatcherSelector, JS function, or Matcher object to get multiple elements.

Usage Examples​

index.html

<ul id="menu">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/">Developer Guide</a>
    </li>
    <li>
        <a href="/">API</a>
    </li>
    <li>
        <a href="/">Contribute</a>
    </li>
</ul>

$$.js

it("should get text of a menu link", async ({ browser }) => {
    const text = await browser.$("#menu");

    console.log(await text.$$("li")[2].$("a").getText()); // outputs: "API"
});

it("should get text of a menu link - JS Function", async ({ browser }) => {
    const text = await browser.$("#menu");

    console.log(
        await text
            .$$(function () {
                // Arrow function cannot be used here.
                // This is Element – https://developer.mozilla.org/en-US/docs/Web/API/Element
                // in this specific example – this is HTMLUListElement
                //
                // TypeScript users can do something like:
                // return (this as Element).querySelector('li')
                return this.querySelectorAll("li"); // Element[]
            })[2]
            .$("a")
            .getText(),
    ); // outputs: "API"
});

References​

We'd like to give credit to the original WebdriverIO docs article, from which we drew some information while writing our version.