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 only works with applications using React v16.x. Read more about React selectors in the Selectors guide.

Usage

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

Asynchronous Mode

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"
});

Synchronous Mode

pause.js

it('should calculate 7 * 6', () => {
    browser.url('https://ahfarmer.github.io/calculator/');
    const appWrapper = $('div#root')

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

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

caution

Synchronous Mode will depcrecated with Node.js v16. With an update to the underlying Chromium version it became technically impossible to provide the same synchronous behavior. We recommend to start transition to asynchronous command execution. For more information, see our RFC.