react$

The react$ command is a useful command to query React Components by their actual name and filter them by props and state.

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 browser.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 appWrapper = await $('div#root')

    await browser.react$('t', {
        props: { name: '7' }
    }).click()
    await browser.react$('t', {
        props: { name: 'x' }
    }).click()
    await browser.react$('t', {
        props: { name: '6' }
    }).click()
    await browser.react$('t', {
        props: { name: '=' }
    }).click()

    console.log(await $('.component-display').getText()); // prints "42"
});

Returns

• <WebdriverIO.Element>