react$$

Overview

Use the react$$ command to find multiple React components on the page by their actual name, while filtering them by props and state.

warning

The react$ command only works in applications that use React v16.x.

Read more about React selectors in the recipe "How to use selectors".

Usage

await browser.react$$(reactComponentSelector, { props, state });

Command Parameters

Name	Type	Description
reactComponentSelector	String	The React component selector.
props	Object	React properties the component should have.
state	Any or Any[]	React state the component should be in.

Usage Examples

it("should calculate 7 * 6", async ({ browser }) => {
    await browser.url("https://ahfarmer.github.io/calculator/");

    const orangeButtons = await browser.react$$("t", {
        props: { orange: true },
    });

    console.log(await Promise.all(orangeButtons.map(btn => btn.getText())));
    // outputs: "[ '÷', 'x', '-', '+', '=' ]"
});

Related Commands

• browser.react$
• element.react$
• element.react$$

References

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