Skip to main content

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.stateArray<any>, number, string, object, booleanReact 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 browser.$('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"
});

Welcome! How can I help?

WebdriverIO AI Copilot