webdriverio 7.17.0 → 7.17.3

package/build/commands/browser/$$.d.ts

@@ -0,0 +1,50 @@
+import type { Selector, ElementArray } from '../../types';
+/**
+ * The `$$` command is a short way to call the [`findElements`](/docs/api/webdriver#findelements) command in order
+ * to fetch multiple elements on the page. It returns an array with element results that will have an
+ * extended prototype to call action commands without passing in a selector. However if you still pass
+ * in a selector it will look for that element first and call the action on that element.
+ *
+ * Using the wdio testrunner this command is a global variable else it will be located on the browser object instead.
+ *
+ * You can chain `$` or `$$` together in order to walk down the DOM tree.
+ *
+ * :::info
+ *
+ * For more information on how to select specific elements, check out the [Selectors](/docs/selectors) guide.
+ *
+ * :::
+ *
+ * <example>
+    :index.html
+    <ul id="menu">
+        <li><a href="/">Home</a></li>
+        <li><a href="/">Developer Guide</a></li>
+        <li><a href="/">API</a></li>
+        <li><a href="/">Contribute</a></li>
+    </ul>
+    :$.js
+    it('should get text a menu link', async () => {
+        const text = await $$('#menu')[0];
+        console.log(await text.$$('li')[2].$('a').getText()); // outputs: "API"
+    });
+
+    it('should get text a menu link - JS Function', async () => {
+        const text = await $$(function() { // Arrow function is not allowed here.
+            // this is Window https://developer.mozilla.org/en-US/docs/Web/API/Window
+            // TypeScript users may do something like this
+            // return (this as Window).document.querySelectorAll('#menu')
+            return this.document.querySelectorAll('#menu'); // Element[]
+        })[0];
+        console.log(await text.$$('li')[2].$('a').getText()); // outputs: "API"
+    });
+ * </example>
+ *
+ * @alias $$
+ * @param {String|Function} selector  selector or JS Function to fetch multiple elements
+ * @return {ElementArray}
+ * @type utility
+ *
+ */
+export default function $$(this: WebdriverIO.Browser | WebdriverIO.Element, selector: Selector): Promise<ElementArray>;
+//# sourceMappingURL=$$.d.ts.map

package/build/commands/browser/$$.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"$$.d.ts","sourceRoot":"","sources":["../../../src/commands/browser/$$.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAA8B,EAAE,CAC5B,IAAI,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,EAC/C,QAAQ,EAAE,QAAQ,yBAKrB"}

package/build/commands/browser/$$.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../../utils");
+const getElementObject_1 = require("../../utils/getElementObject");
+/**
+ * The `$$` command is a short way to call the [`findElements`](/docs/api/webdriver#findelements) command in order
+ * to fetch multiple elements on the page. It returns an array with element results that will have an
+ * extended prototype to call action commands without passing in a selector. However if you still pass
+ * in a selector it will look for that element first and call the action on that element.
+ *
+ * Using the wdio testrunner this command is a global variable else it will be located on the browser object instead.
+ *
+ * You can chain `$` or `$$` together in order to walk down the DOM tree.
+ *
+ * :::info
+ *
+ * For more information on how to select specific elements, check out the [Selectors](/docs/selectors) guide.
+ *
+ * :::
+ *
+ * <example>
+    :index.html
+    <ul id="menu">
+        <li><a href="/">Home</a></li>
+        <li><a href="/">Developer Guide</a></li>
+        <li><a href="/">API</a></li>
+        <li><a href="/">Contribute</a></li>
+    </ul>
+    :$.js
+    it('should get text a menu link', async () => {
+        const text = await $$('#menu')[0];
+        console.log(await text.$$('li')[2].$('a').getText()); // outputs: "API"
+    });
+
+    it('should get text a menu link - JS Function', async () => {
+        const text = await $$(function() { // Arrow function is not allowed here.
+            // this is Window https://developer.mozilla.org/en-US/docs/Web/API/Window
+            // TypeScript users may do something like this
+            // return (this as Window).document.querySelectorAll('#menu')
+            return this.document.querySelectorAll('#menu'); // Element[]
+        })[0];
+        console.log(await text.$$('li')[2].$('a').getText()); // outputs: "API"
+    });
+ * </example>
+ *
+ * @alias $$
+ * @param {String|Function} selector  selector or JS Function to fetch multiple elements
+ * @return {ElementArray}
+ * @type utility
+ *
+ */
+async function $$(selector) {
+    const res = await utils_1.findElements.call(this, selector);
+    const elements = await getElementObject_1.getElements.call(this, selector, res);
+    return (0, utils_1.enhanceElementsArray)(elements, this, selector);
+}
+exports.default = $$;

package/build/commands/browser/$.d.ts

@@ -0,0 +1,77 @@
+import type { Selector } from '../../types';
+/**
+ * The `$` command is a short way to call the [`findElement`](/docs/api/webdriver#findelement) command in order
+ * to fetch a single element on the page. It returns an object that with an extended prototype to call
+ * action commands without passing in a selector. However if you still pass in a selector it will look
+ * for that element first and call the action on that element.
+ *
+ * You can also pass in an object as selector where the object contains a property
+ * `element-6066-11e4-a52e-4f735466cecf` with the value of a reference to an element.
+ * The command will then transform the reference to an extended WebdriverIO element.
+ * __Note:__ only use these element objects if you are certain they still exist on the
+ * page, e.g. using the `isExisting` command. WebdriverIO is unable to refetch them given
+ * that there are no selector information available.
+ *
+ * Using the wdio testrunner this command is a global variable else it will be located on the browser object instead.
+ *
+ * You can chain `$` or `$$` together in order to walk down the DOM tree.
+ *
+ * :::info
+ *
+ * For more information on how to select specific elements, check out the [Selectors](/docs/selectors) guide.
+ *
+ * :::
+ *
+ * <example>
+    :index.html
+    <ul id="menu">
+        <li><a href="/">Home</a></li>
+        <li><a href="/">Developer Guide</a></li>
+        <li><a href="/">API</a></li>
+        <li><a href="/">Contribute</a></li>
+    </ul>
+    :$.js
+    it('should get text a menu link', async () => {
+        const text = await $('#menu');
+        console.log(await text.$$('li')[2].$('a').getText()); // outputs: "API"
+    });
+
+    it('should get text a menu link - JS Function', async () => {
+        const text = await $(function() { // Arrow function is not allowed here.
+            // this is Window https://developer.mozilla.org/en-US/docs/Web/API/Window
+            // TypeScript users may do something like this
+            // return (this as Window).document.querySelector('#menu')
+            return this.document.querySelector('#menu'); // Element
+        });
+        console.log(await text.$$('li')[2].$('a').getText()); // outputs: "API"
+    });
+
+    it('should allow to convert protocol result of an element into a WebdriverIO element', async () => {
+        const activeElement = await browser.getActiveElement();
+        console.log(await $(activeElement).getTagName()); // outputs active element
+    });
+
+    it('should use Androids DataMatcher or ViewMatcher selector', async () => {
+        const menuItem = await $({
+            "name": "hasEntry",
+            "args": ["title", "ViewTitle"],
+            "class": "androidx.test.espresso.matcher.ViewMatchers"
+        });
+        await menuItem.click();
+
+        const menuItem = await $({
+            "name": "hasEntry",
+            "args": ["title", "ViewTitle"]
+        });
+        await menuItem.click();
+    });
+ * </example>
+ *
+ * @alias $
+ * @param {String|Function|Matcher} selector  selector, JS Function, or Matcher object to fetch a certain element
+ * @return {Element}
+ * @type utility
+ *
+ */
+export default function $(this: WebdriverIO.Browser | WebdriverIO.Element, selector: Selector): Promise<WebdriverIO.Element>;
+//# sourceMappingURL=$.d.ts.map

package/build/commands/browser/$.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"$.d.ts","sourceRoot":"","sources":["../../../src/commands/browser/$.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,wBAA8B,CAAC,CAC3B,IAAI,EAAE,WAAW,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO,EAC/C,QAAQ,EAAE,QAAQ,gCAYrB"}

package/build/commands/browser/$.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../../utils");
+const getElementObject_1 = require("../../utils/getElementObject");
+const constants_1 = require("../../constants");
+/**
+ * The `$` command is a short way to call the [`findElement`](/docs/api/webdriver#findelement) command in order
+ * to fetch a single element on the page. It returns an object that with an extended prototype to call
+ * action commands without passing in a selector. However if you still pass in a selector it will look
+ * for that element first and call the action on that element.
+ *
+ * You can also pass in an object as selector where the object contains a property
+ * `element-6066-11e4-a52e-4f735466cecf` with the value of a reference to an element.
+ * The command will then transform the reference to an extended WebdriverIO element.
+ * __Note:__ only use these element objects if you are certain they still exist on the
+ * page, e.g. using the `isExisting` command. WebdriverIO is unable to refetch them given
+ * that there are no selector information available.
+ *
+ * Using the wdio testrunner this command is a global variable else it will be located on the browser object instead.
+ *
+ * You can chain `$` or `$$` together in order to walk down the DOM tree.
+ *
+ * :::info
+ *
+ * For more information on how to select specific elements, check out the [Selectors](/docs/selectors) guide.
+ *
+ * :::
+ *
+ * <example>
+    :index.html
+    <ul id="menu">
+        <li><a href="/">Home</a></li>
+        <li><a href="/">Developer Guide</a></li>
+        <li><a href="/">API</a></li>
+        <li><a href="/">Contribute</a></li>
+    </ul>
+    :$.js
+    it('should get text a menu link', async () => {
+        const text = await $('#menu');
+        console.log(await text.$$('li')[2].$('a').getText()); // outputs: "API"
+    });
+
+    it('should get text a menu link - JS Function', async () => {
+        const text = await $(function() { // Arrow function is not allowed here.
+            // this is Window https://developer.mozilla.org/en-US/docs/Web/API/Window
+            // TypeScript users may do something like this
+            // return (this as Window).document.querySelector('#menu')
+            return this.document.querySelector('#menu'); // Element
+        });
+        console.log(await text.$$('li')[2].$('a').getText()); // outputs: "API"
+    });
+
+    it('should allow to convert protocol result of an element into a WebdriverIO element', async () => {
+        const activeElement = await browser.getActiveElement();
+        console.log(await $(activeElement).getTagName()); // outputs active element
+    });
+
+    it('should use Androids DataMatcher or ViewMatcher selector', async () => {
+        const menuItem = await $({
+            "name": "hasEntry",
+            "args": ["title", "ViewTitle"],
+            "class": "androidx.test.espresso.matcher.ViewMatchers"
+        });
+        await menuItem.click();
+
+        const menuItem = await $({
+            "name": "hasEntry",
+            "args": ["title", "ViewTitle"]
+        });
+        await menuItem.click();
+    });
+ * </example>
+ *
+ * @alias $
+ * @param {String|Function|Matcher} selector  selector, JS Function, or Matcher object to fetch a certain element
+ * @return {Element}
+ * @type utility
+ *
+ */
+async function $(selector) {
+    /**
+     * convert protocol result into WebdriverIO element
+     * e.g. when element was fetched with `getActiveElement`
+     */
+    if (typeof selector === 'object' && typeof selector[constants_1.ELEMENT_KEY] === 'string') {
+        return getElementObject_1.getElement.call(this, undefined, selector);
+    }
+    const res = await utils_1.findElement.call(this, selector);
+    return getElementObject_1.getElement.call(this, selector, res);
+}
+exports.default = $;

package/build/commands/browser/addCommand.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The browser method  `addCommand` helps you to write your own set of commands. You can write your command in a synchronous way or in an asynchronous way.
+ *
+ * :::info
+ *
+ * You can find more information on adding custom commands in the [custom command](/docs/customcommands#adding-custom-commands) guide.
+ *
+ * :::
+ *
+ * <example>
+    :execute.js
+    await browser.addCommand('getUrlAndTitle', async function (customParam) {
+        // `this` refers to the `browser` scope
+        return {
+            url: await this.getUrl(),
+            title: await this.getTitle(),
+            customParam: customParam
+        }
+    })
+    //usage
+    it('should use my add command', async () => {
+        await browser.url('https://webdriver.io')
+        const result = await browser.getUrlAndTitle('foobar')
+
+        assert.strictEqual(result.url, 'https://webdriver.io')
+        assert.strictEqual(result.title, 'WebdriverIO · Next-gen browser and mobile automation test framework for Node.js | WebdriverIO')
+        assert.strictEqual(result.customParam, 'foobar')
+    })
+ * </example>
+ * @alias browser.addCommand
+ * @param {String} name name of the custom command
+ * @param {Function} callback  function to be called
+ * @param {Boolean=} elementScope extend the Element object instead of the Browser object
+ * @type utility
+ *
+ */
+//# sourceMappingURL=addCommand.d.ts.map

package/build/commands/browser/addCommand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addCommand.d.ts","sourceRoot":"","sources":["../../../src/commands/browser/addCommand.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG"}

package/build/commands/browser/addCommand.js

@@ -0,0 +1,37 @@
+"use strict";
+/**
+ * The browser method  `addCommand` helps you to write your own set of commands. You can write your command in a synchronous way or in an asynchronous way.
+ *
+ * :::info
+ *
+ * You can find more information on adding custom commands in the [custom command](/docs/customcommands#adding-custom-commands) guide.
+ *
+ * :::
+ *
+ * <example>
+    :execute.js
+    await browser.addCommand('getUrlAndTitle', async function (customParam) {
+        // `this` refers to the `browser` scope
+        return {
+            url: await this.getUrl(),
+            title: await this.getTitle(),
+            customParam: customParam
+        }
+    })
+    //usage
+    it('should use my add command', async () => {
+        await browser.url('https://webdriver.io')
+        const result = await browser.getUrlAndTitle('foobar')
+
+        assert.strictEqual(result.url, 'https://webdriver.io')
+        assert.strictEqual(result.title, 'WebdriverIO · Next-gen browser and mobile automation test framework for Node.js | WebdriverIO')
+        assert.strictEqual(result.customParam, 'foobar')
+    })
+ * </example>
+ * @alias browser.addCommand
+ * @param {String} name name of the custom command
+ * @param {Function} callback  function to be called
+ * @param {Boolean=} elementScope extend the Element object instead of the Browser object
+ * @type utility
+ *
+ */

package/build/commands/browser/call.d.ts

@@ -0,0 +1,42 @@
+/**
+ * You can use `call` to execute any async action within your test spec. The command itself
+ * is treated like a synchronous function. It accepts promises and stops the execution until
+ * the promise has resolved.
+ *
+ * This command helps to run asynchronous code within a synchronous context. With
+ * WebdriverIO depcrecating synchronous usage (see [RFC](https://github.com/webdriverio/webdriverio/discussions/6702))
+ * this command is not very useful anymore.
+ *
+ * <example>
+    :call.js
+    it('some testing here', async () => {
+        await browser.url('http://google.com')
+        // make an asynchronous call using any 3rd party library supporting promises
+        // e.g. call to backend or db to inject fixture data
+        await browser.call(() => {
+            return somePromiseLibrary.someMethod().then(() => {
+                // ...
+            })
+        })
+
+        // example for async call to 3rd party library that doesn't support promises
+        const result = await browser.call(() => {
+            return new Promise((resolve, reject) => {
+                someOtherNodeLibrary.someMethod(param1, (err, res) => {
+                    if (err) {
+                        return reject(err)
+                    }
+                    resolve(res)
+                })
+            })
+        })
+    });
+ * </example>
+ *
+ * @alias browser.call
+ * @param {Function} callback  function to be called
+ * @type utility
+ *
+ */
+export default function call<T>(fn: () => T): T | Promise<T>;
+//# sourceMappingURL=call.d.ts.map

package/build/commands/browser/call.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"call.d.ts","sourceRoot":"","sources":["../../../src/commands/browser/call.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,CAAC,EAAG,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAM5D"}

package/build/commands/browser/call.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * You can use `call` to execute any async action within your test spec. The command itself
+ * is treated like a synchronous function. It accepts promises and stops the execution until
+ * the promise has resolved.
+ *
+ * This command helps to run asynchronous code within a synchronous context. With
+ * WebdriverIO depcrecating synchronous usage (see [RFC](https://github.com/webdriverio/webdriverio/discussions/6702))
+ * this command is not very useful anymore.
+ *
+ * <example>
+    :call.js
+    it('some testing here', async () => {
+        await browser.url('http://google.com')
+        // make an asynchronous call using any 3rd party library supporting promises
+        // e.g. call to backend or db to inject fixture data
+        await browser.call(() => {
+            return somePromiseLibrary.someMethod().then(() => {
+                // ...
+            })
+        })
+
+        // example for async call to 3rd party library that doesn't support promises
+        const result = await browser.call(() => {
+            return new Promise((resolve, reject) => {
+                someOtherNodeLibrary.someMethod(param1, (err, res) => {
+                    if (err) {
+                        return reject(err)
+                    }
+                    resolve(res)
+                })
+            })
+        })
+    });
+ * </example>
+ *
+ * @alias browser.call
+ * @param {Function} callback  function to be called
+ * @type utility
+ *
+ */
+function call(fn) {
+    if (typeof fn === 'function') {
+        return fn();
+    }
+    throw new Error('Command argument for "call" needs to be a function');
+}
+exports.default = call;

package/build/commands/browser/custom$$.d.ts

@@ -0,0 +1,26 @@
+import type { ElementArray } from '../../types';
+/**
+ *
+ * The `customs$$` allows you to use a custom strategy declared by using `browser.addLocatorStrategy`
+ *
+ * <example>
+    :example.js
+    it('should get all the plugin wrapper buttons', async () => {
+        await browser.url('https://webdriver.io')
+        await browser.addLocatorStrategy('myStrat', (selector) => {
+            return document.querySelectorAll(selector)
+        })
+
+        const pluginWrapper = await browser.custom$$('myStrat', '.pluginWrapper')
+
+        console.log(await pluginWrapper.length) // 4
+    })
+ * </example>
+ *
+ * @alias custom$$
+ * @param {String} strategyName
+ * @param {Any} strategyArguments
+ * @return {ElementArray}
+ */
+export default function custom$$(this: WebdriverIO.Browser, strategyName: string, ...strategyArguments: any[]): Promise<ElementArray>;
+//# sourceMappingURL=custom$$.d.ts.map

package/build/commands/browser/custom$$.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom$$.d.ts","sourceRoot":"","sources":["../../../src/commands/browser/custom$$.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE/C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAA8B,QAAQ,CAClC,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,iBAAiB,EAAE,GAAG,EAAE,GAC5B,OAAO,CAAC,YAAY,CAAC,CAyBvB"}

package/build/commands/browser/custom$$.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../../utils");
+const getElementObject_1 = require("../../utils/getElementObject");
+const constants_1 = require("../../constants");
+/**
+ *
+ * The `customs$$` allows you to use a custom strategy declared by using `browser.addLocatorStrategy`
+ *
+ * <example>
+    :example.js
+    it('should get all the plugin wrapper buttons', async () => {
+        await browser.url('https://webdriver.io')
+        await browser.addLocatorStrategy('myStrat', (selector) => {
+            return document.querySelectorAll(selector)
+        })
+
+        const pluginWrapper = await browser.custom$$('myStrat', '.pluginWrapper')
+
+        console.log(await pluginWrapper.length) // 4
+    })
+ * </example>
+ *
+ * @alias custom$$
+ * @param {String} strategyName
+ * @param {Any} strategyArguments
+ * @return {ElementArray}
+ */
+async function custom$$(strategyName, ...strategyArguments) {
+    const strategy = this.strategies.get(strategyName);
+    if (!strategy) {
+        throw Error('No strategy found for ' + strategyName);
+    }
+    let res = await this.execute(strategy, ...strategyArguments);
+    /**
+     * if the user's script return just one element
+     * then we convert it to an array as this method
+     * should return multiple elements
+     */
+    if (!Array.isArray(res)) {
+        res = [res];
+    }
+    res = res.filter(el => !!el && typeof el[constants_1.ELEMENT_KEY] === 'string');
+    const elements = res.length ? await getElementObject_1.getElements.call(this, strategy, res) : [];
+    return (0, utils_1.enhanceElementsArray)(elements, this, strategy, 'custom$$', [strategyArguments]);
+}
+exports.default = custom$$;

package/build/commands/browser/custom$.d.ts

@@ -0,0 +1,25 @@
+/**
+ *
+ * The `custom$` allows you to use a custom strategy declared by using `browser.addLocatorStrategy`
+ *
+ * <example>
+    :example.js
+    it('should fetch the project title', async () => {
+        await browser.url('https://webdriver.io')
+        await browser.addLocatorStrategy('myStrat', (selector) => {
+            return document.querySelectorAll(selector)
+        })
+
+        const projectTitle = await browser.custom$('myStrat', '.projectTitle')
+
+        console.log(await projectTitle.getText()) // WEBDRIVER I/O
+    })
+ * </example>
+ *
+ * @alias custom$
+ * @param {String} strategyName
+ * @param {Any} strategyArguments
+ * @return {Element}
+ */
+export default function custom$(this: WebdriverIO.Browser, strategyName: string, ...strategyArguments: any[]): Promise<WebdriverIO.Element>;
+//# sourceMappingURL=custom$.d.ts.map

package/build/commands/browser/custom$.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom$.d.ts","sourceRoot":"","sources":["../../../src/commands/browser/custom$.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAA8B,OAAO,CACjC,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,iBAAiB,EAAE,GAAG,EAAE,gCA2B9B"}

package/build/commands/browser/custom$.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const getElementObject_1 = require("../../utils/getElementObject");
+const constants_1 = require("../../constants");
+/**
+ *
+ * The `custom$` allows you to use a custom strategy declared by using `browser.addLocatorStrategy`
+ *
+ * <example>
+    :example.js
+    it('should fetch the project title', async () => {
+        await browser.url('https://webdriver.io')
+        await browser.addLocatorStrategy('myStrat', (selector) => {
+            return document.querySelectorAll(selector)
+        })
+
+        const projectTitle = await browser.custom$('myStrat', '.projectTitle')
+
+        console.log(await projectTitle.getText()) // WEBDRIVER I/O
+    })
+ * </example>
+ *
+ * @alias custom$
+ * @param {String} strategyName
+ * @param {Any} strategyArguments
+ * @return {Element}
+ */
+async function custom$(strategyName, ...strategyArguments) {
+    const strategy = this.strategies.get(strategyName);
+    if (!strategy) {
+        throw Error('No strategy found for ' + strategyName);
+    }
+    let res = await this.execute(strategy, ...strategyArguments);
+    /**
+     * if the user's script returns multiple elements
+     * then we just return the first one as this method
+     * is intended to return just one element
+     */
+    if (Array.isArray(res)) {
+        res = res[0];
+    }
+    if (res && typeof res[constants_1.ELEMENT_KEY] === 'string') {
+        return await getElementObject_1.getElement.call(this, strategy, res);
+    }
+    throw Error('Your locator strategy script must return an element');
+}
+exports.default = custom$;

package/build/commands/browser/debug.d.ts

@@ -0,0 +1,32 @@
+/**
+ *
+ * This command helps you to debug your integration tests. It stops the running browser and gives
+ * you time to jump into it and check the state of your application (e.g. using dev tools).
+ * Your terminal transforms into a [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop)
+ * interface that will allow you to try out certain commands, find elements and test actions on
+ * them.
+ *
+ * [![WebdriverIO REPL](https://webdriver.io/img/repl.gif)](https://webdriver.io/img/repl.gif)
+ *
+ * If you run the WDIO testrunner make sure you increase the timeout property of the test framework
+ * you are using (e.g. Mocha or Jasmine) in order to prevent test termination due to a test timeout.
+ * Also avoid executing the command with multiple capabilities running at the same time.
+ *
+ * <iframe width="560" height="315" src="https://www.youtube.com/embed/xWwP-3B_YyE" frameborder="0" allowFullScreen></iframe>
+ *
+ * <example>
+    :debug.js
+    it('should demonstrate the debug command', async () => {
+        await $('#input').setValue('FOO')
+        await browser.debug() // jumping into the browser and change value of #input to 'BAR'
+        const value = await $('#input').getValue()
+        console.log(value) // outputs: "BAR"
+    })
+ * </example>
+ *
+ * @alias browser.debug
+ * @type utility
+ *
+ */
+export default function debug(this: WebdriverIO.Browser, commandTimeout?: number): Promise<unknown>;
+//# sourceMappingURL=debug.d.ts.map

package/build/commands/browser/debug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../../src/commands/browser/debug.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CACzB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,cAAc,SAAO,oBAgFxB"}