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#
NameTypeDetails
selectorStringof React component
options
optional
ReactSelectorOptionsReact selector options
options.props
optional
ObjectReact props the element should contain
options.state
optional
Array.<any>, number, string, object, booleanReact 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"
});