Skip to main content

react$

Overview​

Use the react$ command to find React components on the page by their actual name, while filtering them by props and state.

warning

The react$ command only works in applications that use React v16.x.

Read more about React selectors in the recipe "How to use selectors".

Usage​

await browser.$(selector).react$(reactComponentSelector, { props, state });

Command Parameters​

NameTypeDescription
reactComponentSelectorStringThe React component selector.
propsObjectReact properties the component should have.
stateAny or Any[]React state the component should be in.

Usage Examples​

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

    await appWrapper
        .react$("t", {
            props: { name: "7" },
        })
        .click();

    await appWrapper
        .react$("t", {
            props: { name: "x" },
        })
        .click();

    await appWrapper
        .react$("t", {
            props: { name: "6" },
        })
        .click();

    await appWrapper
        .react$("t", {
            props: { name: "=" },
        })
        .click();

    console.log(await browser.$(".component-display").getText()); // outputs: "42"
});

References​

We'd like to give credit to the original WebdriverIO docs article, from which we drew some information while writing our version.