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