webdriverio 7.17.0 → 7.17.3

package/build/commands/element/isExisting.d.ts

@@ -0,0 +1,49 @@
+/**
+ *
+ * Returns true if element exists in the DOM.
+ *
+ * :::info
+ *
+ * As opposed to other element commands WebdriverIO will not wait for the element
+ * to exist to execute this command.
+ *
+ * :::
+ *
+ * <example>
+    :index.html
+    <div id="notDisplayed" style="display: none"></div>
+    <div id="notVisible" style="visibility: hidden"></div>
+    <div id="notInViewport" style="position:absolute; left: 9999999"></div>
+    <div id="zeroOpacity" style="opacity: 0"></div>
+    :isExisting.js
+    it('should detect if elements are existing', async () => {
+        let elem = await $('#someRandomNonExistingElement')
+        let isExisting = await elem.isExisting()
+        console.log(isExisting); // outputs: false
+
+        elem = await $('#notDisplayed')
+        isExisting = await elem.isExisting()
+        console.log(isExisting); // outputs: true
+
+        elem = await $('#notVisible')
+        isExisting = await elem.isExisting()
+        console.log(isExisting); // outputs: true
+
+        elem = await $('#notInViewport')
+        isExisting = await elem.isExisting()
+        console.log(isExisting); // outputs: true
+
+        elem = await $('#zeroOpacity')
+        isExisting = await elem.isExisting()
+        console.log(isExisting); // outputs: true
+    });
+ * </example>
+ *
+ * @alias element.isExisting
+ * @return {Boolean}            true if element(s)* [is|are] existing
+ * @uses protocol/elements
+ * @type state
+ *
+ */
+export default function isExisting(this: WebdriverIO.Element): Promise<boolean>;
+//# sourceMappingURL=isExisting.d.ts.map

package/build/commands/element/isExisting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isExisting.d.ts","sourceRoot":"","sources":["../../../src/commands/element/isExisting.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAA8B,UAAU,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,oBAkBlE"}

package/build/commands/element/isExisting.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ *
+ * Returns true if element exists in the DOM.
+ *
+ * :::info
+ *
+ * As opposed to other element commands WebdriverIO will not wait for the element
+ * to exist to execute this command.
+ *
+ * :::
+ *
+ * <example>
+    :index.html
+    <div id="notDisplayed" style="display: none"></div>
+    <div id="notVisible" style="visibility: hidden"></div>
+    <div id="notInViewport" style="position:absolute; left: 9999999"></div>
+    <div id="zeroOpacity" style="opacity: 0"></div>
+    :isExisting.js
+    it('should detect if elements are existing', async () => {
+        let elem = await $('#someRandomNonExistingElement')
+        let isExisting = await elem.isExisting()
+        console.log(isExisting); // outputs: false
+
+        elem = await $('#notDisplayed')
+        isExisting = await elem.isExisting()
+        console.log(isExisting); // outputs: true
+
+        elem = await $('#notVisible')
+        isExisting = await elem.isExisting()
+        console.log(isExisting); // outputs: true
+
+        elem = await $('#notInViewport')
+        isExisting = await elem.isExisting()
+        console.log(isExisting); // outputs: true
+
+        elem = await $('#zeroOpacity')
+        isExisting = await elem.isExisting()
+        console.log(isExisting); // outputs: true
+    });
+ * </example>
+ *
+ * @alias element.isExisting
+ * @return {Boolean}            true if element(s)* [is|are] existing
+ * @uses protocol/elements
+ * @type state
+ *
+ */
+async function isExisting() {
+    /**
+     * if an element was composed via `const elem = $({ 'element-6066-11e4-a52e-4f735466cecf': <elementId> })`
+     * we don't have any selector information. Therefore we can only check existance
+     * by calling a command with the element id to check if it is successful or not.
+     * Using `getElementTagName` to validate the element existance works as it is
+     * a command that should be available for desktop and mobile and fails with a
+     * stale element exeception if element is not existing.
+     */
+    if (!this.selector) {
+        return this.getElementTagName(this.elementId).then(() => true, () => false);
+    }
+    const command = this.isReactElement ? this.parent.react$$.bind(this.parent) : this.parent.$$.bind(this.parent);
+    return command(this.selector).then((res) => res.length > 0);
+}
+exports.default = isExisting;

package/build/commands/element/isFocused.d.ts

@@ -0,0 +1,28 @@
+/**
+ *
+ * Return true or false if the selected DOM-element currently has focus. If the selector matches
+ * multiple elements, it will return true if one of the elements has focus.
+ *
+ * <example>
+    :index.html
+    <input name="login" autofocus="" />
+    :hasFocus.js
+    it('should detect the focus of an element', async () => {
+        await browser.url('/');
+        const loginInput = await $('[name="login"]');
+        console.log(await loginInput.isFocused()); // outputs: false
+
+        await loginInput.click();
+        console.log(await loginInput.isFocused()); // outputs: true
+    })
+ * </example>
+ *
+ * @alias element.isFocused
+ * @return {Boolean}         true if one of the matching elements has focus
+ *
+ * @uses protocol/execute
+ * @type state
+ *
+ */
+export default function isFocused(this: WebdriverIO.Element): Promise<boolean>;
+//# sourceMappingURL=isFocused.d.ts.map

package/build/commands/element/isFocused.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isFocused.d.ts","sourceRoot":"","sources":["../../../src/commands/element/isFocused.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAA8B,SAAS,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,oBAMjE"}

package/build/commands/element/isFocused.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const isFocused_1 = __importDefault(require("../../scripts/isFocused"));
+/**
+ *
+ * Return true or false if the selected DOM-element currently has focus. If the selector matches
+ * multiple elements, it will return true if one of the elements has focus.
+ *
+ * <example>
+    :index.html
+    <input name="login" autofocus="" />
+    :hasFocus.js
+    it('should detect the focus of an element', async () => {
+        await browser.url('/');
+        const loginInput = await $('[name="login"]');
+        console.log(await loginInput.isFocused()); // outputs: false
+
+        await loginInput.click();
+        console.log(await loginInput.isFocused()); // outputs: true
+    })
+ * </example>
+ *
+ * @alias element.isFocused
+ * @return {Boolean}         true if one of the matching elements has focus
+ *
+ * @uses protocol/execute
+ * @type state
+ *
+ */
+async function isFocused() {
+    const browser = await (0, utils_1.getBrowserObject)(this);
+    return browser.execute(isFocused_1.default, {
+        [constants_1.ELEMENT_KEY]: this.elementId,
+        ELEMENT: this.elementId // jsonwp compatible
+    });
+}
+exports.default = isFocused;

package/build/commands/element/isSelected.d.ts

@@ -0,0 +1,31 @@
+/**
+ *
+ * Will return true or false whether or not an `<option>` or `<input>` element of type
+ * checkbox or radio is currently selected.
+ *
+ * <example>
+    :index.html
+    <select name="selectbox" id="selectbox">
+        <option value="John Doe">John Doe</option>
+        <option value="Layla Terry" selected="selected">Layla Terry</option>
+        <option value="Bill Gilbert">Bill Gilbert"</option>
+    </select>
+
+    :isSelected.js
+    it('should detect if an element is selected', async () => {
+        let element = await $('[value="Layla Terry"]');
+        console.log(await element.isSelected()); // outputs: true
+
+        element = await $('[value="Bill Gilbert"]')
+        console.log(await element.isSelected()); // outputs: false
+    });
+ * </example>
+ *
+ * @alias element.isSelected
+ * @return {Boolean} true if element is selected
+ * @uses protocol/elements, protocol/elementIdSelected
+ * @type state
+ *
+ */
+export default function isSelected(this: WebdriverIO.Element): Promise<boolean>;
+//# sourceMappingURL=isSelected.d.ts.map

package/build/commands/element/isSelected.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isSelected.d.ts","sourceRoot":"","sources":["../../../src/commands/element/isSelected.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,oBAE5D"}

package/build/commands/element/isSelected.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ *
+ * Will return true or false whether or not an `<option>` or `<input>` element of type
+ * checkbox or radio is currently selected.
+ *
+ * <example>
+    :index.html
+    <select name="selectbox" id="selectbox">
+        <option value="John Doe">John Doe</option>
+        <option value="Layla Terry" selected="selected">Layla Terry</option>
+        <option value="Bill Gilbert">Bill Gilbert"</option>
+    </select>
+
+    :isSelected.js
+    it('should detect if an element is selected', async () => {
+        let element = await $('[value="Layla Terry"]');
+        console.log(await element.isSelected()); // outputs: true
+
+        element = await $('[value="Bill Gilbert"]')
+        console.log(await element.isSelected()); // outputs: false
+    });
+ * </example>
+ *
+ * @alias element.isSelected
+ * @return {Boolean} true if element is selected
+ * @uses protocol/elements, protocol/elementIdSelected
+ * @type state
+ *
+ */
+function isSelected() {
+    return this.isElementSelected(this.elementId);
+}
+exports.default = isSelected;

package/build/commands/element/moveTo.d.ts

@@ -0,0 +1,21 @@
+declare type MoveToOptions = {
+    xOffset?: number;
+    yOffset?: number;
+};
+/**
+ *
+ * Move the mouse by an offset of the specified element. If no element is specified,
+ * the move is relative to the current mouse cursor. If an element is provided but
+ * no offset, the mouse will be moved to the center of the element. If the element
+ * is not visible, it will be scrolled into view.
+ *
+ * @param {MoveToOptions=} options          moveTo command options
+ * @param {Number=}        options.xOffset  X offset to move to, relative to the top-left corner of the element. If not specified, the mouse will move to the middle of the element.
+ * @param {Number=}        options.yOffset  Y offset to move to, relative to the top-left corner of the element. If not specified, the mouse will move to the middle of the element.
+ *
+ * @see  https://github.com/SeleniumHQ/selenium/wiki/JsonWireProtocol#sessionsessionidmoveto
+ * @type protocol
+ */
+export default function moveTo(this: WebdriverIO.Element, { xOffset, yOffset }?: MoveToOptions): Promise<void>;
+export {};
+//# sourceMappingURL=moveTo.d.ts.map

package/build/commands/element/moveTo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moveTo.d.ts","sourceRoot":"","sources":["../../../src/commands/element/moveTo.ts"],"names":[],"mappings":"AAEA,aAAK,aAAa,GAAG;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,wBAA8B,MAAM,CAChC,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,EAAE,OAAO,EAAE,OAAO,EAAE,GAAE,aAAkB,iBAuB3C"}

package/build/commands/element/moveTo.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../../utils");
+/**
+ *
+ * Move the mouse by an offset of the specified element. If no element is specified,
+ * the move is relative to the current mouse cursor. If an element is provided but
+ * no offset, the mouse will be moved to the center of the element. If the element
+ * is not visible, it will be scrolled into view.
+ *
+ * @param {MoveToOptions=} options          moveTo command options
+ * @param {Number=}        options.xOffset  X offset to move to, relative to the top-left corner of the element. If not specified, the mouse will move to the middle of the element.
+ * @param {Number=}        options.yOffset  Y offset to move to, relative to the top-left corner of the element. If not specified, the mouse will move to the middle of the element.
+ *
+ * @see  https://github.com/SeleniumHQ/selenium/wiki/JsonWireProtocol#sessionsessionidmoveto
+ * @type protocol
+ */
+async function moveTo({ xOffset, yOffset } = {}) {
+    if (!this.isW3C) {
+        return this.moveToElement(this.elementId, xOffset, yOffset);
+    }
+    /**
+     * get rect of element
+     */
+    const { x, y, width, height } = await (0, utils_1.getElementRect)(this);
+    const { scrollX, scrollY } = await (0, utils_1.getScrollPosition)(this);
+    const newXOffset = Math.floor(x - scrollX + (typeof xOffset === 'number' ? xOffset : (width / 2)));
+    const newYOffset = Math.floor(y - scrollY + (typeof yOffset === 'number' ? yOffset : (height / 2)));
+    /**
+     * W3C way of handle the mouse move actions
+     */
+    return this.performActions([{
+            type: 'pointer',
+            id: 'finger1',
+            parameters: { pointerType: 'mouse' },
+            actions: [{ type: 'pointerMove', duration: 0, x: newXOffset, y: newYOffset }]
+        }]).then(() => this.releaseActions());
+}
+exports.default = moveTo;

package/build/commands/element/nextElement.d.ts

@@ -0,0 +1,25 @@
+/**
+ *
+ * Returns the next sibling element of the selected DOM-element.
+ *
+ * <example>
+    :index.html
+    <div class="parent">
+        <p>Sibling One</p>
+        <p>Sibling Two</p>
+        <p>Sibling Three</p>
+    </div>
+    :nextElement.js
+    it('should get text from next sibling element', async () => {
+        const elem = await $$('p');
+        const nextElement = await elem[1].nextElement()
+        console.log(await nextElement.getText()); // outputs: "Sibling Three"
+    });
+ * </example>
+ *
+ * @alias element.nextElement
+ * @return {Element}
+ * @type utility
+ */
+export default function nextElement(this: WebdriverIO.Element): import("../..").ChainablePromiseElement<WebdriverIO.Element>;
+//# sourceMappingURL=nextElement.d.ts.map

package/build/commands/element/nextElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nextElement.d.ts","sourceRoot":"","sources":["../../../src/commands/element/nextElement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,gEAI7D"}

package/build/commands/element/nextElement.js

@@ -0,0 +1,31 @@
+"use strict";
+/**
+ *
+ * Returns the next sibling element of the selected DOM-element.
+ *
+ * <example>
+    :index.html
+    <div class="parent">
+        <p>Sibling One</p>
+        <p>Sibling Two</p>
+        <p>Sibling Three</p>
+    </div>
+    :nextElement.js
+    it('should get text from next sibling element', async () => {
+        const elem = await $$('p');
+        const nextElement = await elem[1].nextElement()
+        console.log(await nextElement.getText()); // outputs: "Sibling Three"
+    });
+ * </example>
+ *
+ * @alias element.nextElement
+ * @return {Element}
+ * @type utility
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+function nextElement() {
+    return this.$(/* istanbul ignore next */ function () {
+        return this.nextElementSibling;
+    });
+}
+exports.default = nextElement;

package/build/commands/element/parentElement.d.ts

@@ -0,0 +1,25 @@
+/**
+ *
+ * Returns the parent element of the selected DOM-element.
+ *
+ * <example>
+    :index.html
+    <div class="parent">
+        <p>Sibling One</p>
+        <p>Sibling Two</p>
+        <p>Sibling Three</p>
+    </div>
+    :parentElement.js
+    it('should get class from parent element', async () => {
+        const elem = await $$('p');
+        const parent = await elem[2].parentElement()
+        console.log(await parent.getAttribute('class')); // outputs: "parent"
+    });
+ * </example>
+ *
+ * @alias element.parentElement
+ * @return {Element}
+ * @type utility
+ */
+export default function parentElement(this: WebdriverIO.Element): import("../..").ChainablePromiseElement<WebdriverIO.Element>;
+//# sourceMappingURL=parentElement.d.ts.map

package/build/commands/element/parentElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parentElement.d.ts","sourceRoot":"","sources":["../../../src/commands/element/parentElement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,gEAI/D"}

package/build/commands/element/parentElement.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ *
+ * Returns the parent element of the selected DOM-element.
+ *
+ * <example>
+    :index.html
+    <div class="parent">
+        <p>Sibling One</p>
+        <p>Sibling Two</p>
+        <p>Sibling Three</p>
+    </div>
+    :parentElement.js
+    it('should get class from parent element', async () => {
+        const elem = await $$('p');
+        const parent = await elem[2].parentElement()
+        console.log(await parent.getAttribute('class')); // outputs: "parent"
+    });
+ * </example>
+ *
+ * @alias element.parentElement
+ * @return {Element}
+ * @type utility
+ */
+function parentElement() {
+    return this.$(/* istanbul ignore next */ function () {
+        return this.parentElement;
+    });
+}
+exports.default = parentElement;

package/build/commands/element/previousElement.d.ts

@@ -0,0 +1,25 @@
+/**
+ *
+ * Returns the previous sibling element of the selected DOM-element.
+ *
+ * <example>
+    :index.html
+    <div class="parent">
+        <p>Sibling One</p>
+        <p>Sibling Two</p>
+        <p>Sibling Three</p>
+    </div>
+    :previousElement.js
+    it('should get text from previous sibling element', async () => {
+        const elem = await $$('p');
+        const previousElem = await elem[1].previousElement()
+        console.log(await previousElem.getText()); // outputs: "Sibling One"
+    });
+ * </example>
+ *
+ * @alias element.previousElement
+ * @return {Element}
+ * @type utility
+ */
+export default function previousElement(this: WebdriverIO.Element): import("../..").ChainablePromiseElement<WebdriverIO.Element>;
+//# sourceMappingURL=previousElement.d.ts.map

package/build/commands/element/previousElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"previousElement.d.ts","sourceRoot":"","sources":["../../../src/commands/element/previousElement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,gEAIjE"}

package/build/commands/element/previousElement.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ *
+ * Returns the previous sibling element of the selected DOM-element.
+ *
+ * <example>
+    :index.html
+    <div class="parent">
+        <p>Sibling One</p>
+        <p>Sibling Two</p>
+        <p>Sibling Three</p>
+    </div>
+    :previousElement.js
+    it('should get text from previous sibling element', async () => {
+        const elem = await $$('p');
+        const previousElem = await elem[1].previousElement()
+        console.log(await previousElem.getText()); // outputs: "Sibling One"
+    });
+ * </example>
+ *
+ * @alias element.previousElement
+ * @return {Element}
+ * @type utility
+ */
+function previousElement() {
+    return this.$(/* istanbul ignore next */ function () {
+        return this.previousElementSibling;
+    });
+}
+exports.default = previousElement;

package/build/commands/element/react$$.d.ts

@@ -0,0 +1,36 @@
+import type { ReactSelectorOptions } from '../../types';
+/**
+ *
+ * The `react$$` command is a useful command to query multiple 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](/docs/selectors#react-selectors) guide.
+ *
+ * :::
+ *
+ * <example>
+    :pause.js
+    it('should calculate 7 * 6', async () => {
+        await browser.url('https://ahfarmer.github.io/calculator/');
+
+        const orangeButtons = await browser.react$$('t', {
+            props: { orange: true }
+        })
+        console.log(await orangeButtons.map((btn) => btn.getText()));
+        // prints "[ '÷', 'x', '-', '+', '=' ]"
+    });
+ * </example>
+ *
+ * @alias react$$
+ * @param {String}  selector        of React component
+ * @param {ReactSelectorOptions=}                    options         React selector options
+ * @param {Object=}                                  options.props   React props the element should contain
+ * @param {Array<any>|number|string|object|boolean=} options.state  React state the element should be in
+ * @return {ElementArray}
+ *
+ */
+export default function react$$(this: WebdriverIO.Element, selector: string, { props, state }?: ReactSelectorOptions): Promise<import("../../types").ElementArray>;
+//# sourceMappingURL=react$$.d.ts.map

package/build/commands/element/react$$.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react$$.d.ts","sourceRoot":"","sources":["../../../src/commands/element/react$$.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAIvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAA8B,OAAO,CACjC,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,QAAQ,EAAE,MAAM,EAChB,EAAE,KAAU,EAAE,KAAU,EAAE,GAAE,oBAAyB,+CAUxD"}

package/build/commands/element/react$$.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const utils_1 = require("../../utils");
+const getElementObject_1 = require("../../utils/getElementObject");
+const resq_1 = require("../../scripts/resq");
+const resqScript = fs_1.default.readFileSync(require.resolve('resq'));
+/**
+ *
+ * The `react$$` command is a useful command to query multiple 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](/docs/selectors#react-selectors) guide.
+ *
+ * :::
+ *
+ * <example>
+    :pause.js
+    it('should calculate 7 * 6', async () => {
+        await browser.url('https://ahfarmer.github.io/calculator/');
+
+        const orangeButtons = await browser.react$$('t', {
+            props: { orange: true }
+        })
+        console.log(await orangeButtons.map((btn) => btn.getText()));
+        // prints "[ '÷', 'x', '-', '+', '=' ]"
+    });
+ * </example>
+ *
+ * @alias react$$
+ * @param {String}  selector        of React component
+ * @param {ReactSelectorOptions=}                    options         React selector options
+ * @param {Object=}                                  options.props   React props the element should contain
+ * @param {Array<any>|number|string|object|boolean=} options.state  React state the element should be in
+ * @return {ElementArray}
+ *
+ */
+async function react$$(selector, { props = {}, state = {} } = {}) {
+    await this.executeScript(resqScript.toString(), []);
+    await this.execute(resq_1.waitToLoadReact);
+    const res = await this.execute(resq_1.react$$, selector, props, state, this);
+    const elements = await getElementObject_1.getElements.call(this, selector, res, true);
+    return (0, utils_1.enhanceElementsArray)(elements, this, selector, 'react$$', [props, state]);
+}
+exports.default = react$$;

package/build/commands/element/react$.d.ts

@@ -0,0 +1,46 @@
+import type { ReactSelectorOptions } from '../../types';
+/**
+ *
+ * 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](/docs/selectors#react-selectors) guide.
+ *
+ * :::
+ *
+ * <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"
+    });
+ * </example>
+ *
+ * @alias react$
+ * @param {String}  selector        of React component
+ * @param {ReactSelectorOptions=}                    options         React selector options
+ * @param {Object=}                                  options.props   React props the element should contain
+ * @param {Array<any>|number|string|object|boolean=} options.state  React state the element should be in
+ * @return {Element}
+ *
+ */
+export default function react$(this: WebdriverIO.Element, selector: string, { props, state }?: ReactSelectorOptions): Promise<WebdriverIO.Element>;
+//# sourceMappingURL=react$.d.ts.map

package/build/commands/element/react$.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react$.d.ts","sourceRoot":"","sources":["../../../src/commands/element/react$.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAIvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAA8B,MAAM,CAChC,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,QAAQ,EAAE,MAAM,EAChB,EAAE,KAAU,EAAE,KAAU,EAAE,GAAE,oBAAyB,gCASxD"}