react$$

The react$$ command is a useful command to query multiple React Components by their actual name and filter them by props and state. It returns a WebdriverIO.ElementArray, the same list as $$.

info

The command works with applications using React v16 to v19, with createRoot or ReactDOM.render. Read more about React selectors in the Selectors guide.

Usage

await $(selector).react$$(selector, { props, state })

Parameters

Name	Type	Details
selector	string	of React component
options optional	ReactSelectorOptions	React selector options
options.props optional	Object	React props the element should contain
options.state optional	Array<any>, number, string, object, boolean	React state the element should be in

Example

pause.js

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

    const orangeButtons = await browser.react$$('t', {
        props: { orange: true }
    })
    console.log(await orangeButtons.map((btn) => btn.getText()));
    // prints "[ '÷', 'x', '-', '+', '=' ]"
});

Returns

• <WebdriverIO.ElementArray>