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#

$(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', () => {
    browser.url('https://ahfarmer.github.io/calculator/');
    const appWrapper = browser.$('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"
});