webdriverio 8.22.1 → 8.23.0

package/build/commands/browser/throttleNetwork.js

@@ -0,0 +1,145 @@
+/**
+ * Throttle the network capabilities of the browser. This can help to
+ * emulate certain scenarios where a user loses their internet connection
+ * and your app needs to address that.
+ *
+ * There are many presets available with default configurations for ease of use.
+ * They are `offline`, `GPRS`, `Regular2G`, `Good2G`, `Regular3G`, `Good3G`,
+ * `Regular4G`, `DSL`, `WiFi`, `online`.
+ *
+ * You can see the values for these presets [in the source code](https://github.com/webdriverio/webdriverio/blob/6824e4eb118a8d20685f12f4bc42f13fd56f8a25/packages/webdriverio/src/commands/browser/throttleNetwork.js#L29).
+ *
+ * :::info
+ *
+ * Note that using the `throttleNetwork` command requires support for Chrome DevTools protocol and e.g.
+ * can not be used when running automated tests in the cloud. Find out more in the
+ * [Automation Protocols](/docs/automationProtocols) section.
+ *
+ * :::
+ *
+ * <example>
+    :throttleNetwork.js
+    it('should throttle the network', async () => {
+        // via static string preset
+        await browser.throttleNetwork('Regular3G')
+
+        // via custom values
+        await browser.throttleNetwork({
+            offline: false,
+            downloadThroughput: 200 * 1024 / 8,
+            uploadThroughput: 200 * 1024 / 8,
+            latency: 20
+        })
+    });
+ * </example>
+ *
+ * @alias browser.throttleNetwork
+ * @param {ThrottleOptions} params  parameters for throttling
+ * @param {boolean}        params.offline              True to emulate internet disconnection.
+ * @param {number}         params.latency              Minimum latency from request sent to response headers received (ms).
+ * @param {number}         params.downloadThroughput   Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.
+ * @param {number}         params.uploadThroughput     Maximal aggregated upload throughput (bytes/sec). -1 disables upload throttling.
+ * @type utility
+ *
+ */
+import { getBrowserObject } from '../../utils/index.js';
+const NETWORK_PRESETS = {
+    'offline': {
+        offline: true,
+        downloadThroughput: 0,
+        uploadThroughput: 0,
+        latency: 1
+    },
+    'GPRS': {
+        offline: false,
+        downloadThroughput: 50 * 1024 / 8,
+        uploadThroughput: 20 * 1024 / 8,
+        latency: 500
+    },
+    'Regular2G': {
+        offline: false,
+        downloadThroughput: 250 * 1024 / 8,
+        uploadThroughput: 50 * 1024 / 8,
+        latency: 300
+    },
+    'Good2G': {
+        offline: false,
+        downloadThroughput: 450 * 1024 / 8,
+        uploadThroughput: 150 * 1024 / 8,
+        latency: 150
+    },
+    'Regular3G': {
+        offline: false,
+        downloadThroughput: 750 * 1024 / 8,
+        uploadThroughput: 250 * 1024 / 8,
+        latency: 100
+    },
+    'Good3G': {
+        offline: false,
+        downloadThroughput: 1.5 * 1024 * 1024 / 8,
+        uploadThroughput: 750 * 1024 / 8,
+        latency: 40
+    },
+    'Regular4G': {
+        offline: false,
+        downloadThroughput: 4 * 1024 * 1024 / 8,
+        uploadThroughput: 3 * 1024 * 1024 / 8,
+        latency: 20
+    },
+    'DSL': {
+        offline: false,
+        downloadThroughput: 2 * 1024 * 1024 / 8,
+        uploadThroughput: 1 * 1024 * 1024 / 8,
+        latency: 5
+    },
+    'WiFi': {
+        offline: false,
+        downloadThroughput: 30 * 1024 * 1024 / 8,
+        uploadThroughput: 15 * 1024 * 1024 / 8,
+        latency: 2
+    },
+    'online': {
+        offline: false,
+        latency: 0,
+        downloadThroughput: -1,
+        uploadThroughput: -1
+    }
+};
+const NETWORK_PRESET_TYPES = Object.keys(NETWORK_PRESETS);
+export async function throttleNetwork(params) {
+    if (
+    /**
+     * check string parameter
+     */
+    (typeof params !== 'string' || !NETWORK_PRESET_TYPES.includes(params)) &&
+        /**
+         * check object parameter
+         */
+        (typeof params !== 'object')) {
+        throw new Error(`Invalid parameter for "throttleNetwork". Expected it to be typeof object or one of the following values: ${NETWORK_PRESET_TYPES.join(', ')} but found "${params}"`);
+    }
+    /**
+     * use WebDriver extension if connected with cloud service
+     */
+    if (this.isSauce) {
+        const browser = getBrowserObject(this);
+        await browser.sauceThrottleNetwork(params);
+        return null;
+    }
+    const failedConnectionMessage = 'No Puppeteer connection could be established which is required to use this command';
+    // Connect to Chrome DevTools
+    await this.getPuppeteer();
+    if (!this.puppeteer) {
+        throw new Error(failedConnectionMessage);
+    }
+    const pages = await this.puppeteer.pages();
+    if (!pages.length) {
+        throw new Error(failedConnectionMessage);
+    }
+    const client = await pages[0].target().createCDPSession();
+    // Set throttling property
+    await client.send('Network.emulateNetworkConditions', typeof params === 'string'
+        ? NETWORK_PRESETS[params]
+        : params);
+    return null;
+}

package/build/commands/browser/url.js

@@ -43,9 +43,9 @@ export async function url(path) {
         path = (new URL(path, this.options.baseUrl)).href;
     }
     if (this.isBidi) {
-        const { contexts } = await this.browsingContextGetTree({});
+        const context = await this.getWindowHandle();
         const res = await this.browsingContextNavigate({
-            context: contexts[0].context,
+            context,
             url: path
         });
         return res.url;

package/build/commands/browser.d.ts

@@ -7,6 +7,7 @@ export * from './browser/custom$$.js';
 export * from './browser/custom$.js';
 export * from './browser/debug.js';
 export * from './browser/deleteCookies.js';
+export * from './browser/emulate.js';
 export * from './browser/execute.js';
 export * from './browser/executeAsync.js';
 export * from './browser/getCookies.js';
@@ -30,6 +31,8 @@ export * from './browser/setTimeout.js';
 export * from './browser/setWindowSize.js';
 export * from './browser/switchWindow.js';
 export * from './browser/throttle.js';
+export * from './browser/throttleCPU.js';
+export * from './browser/throttleNetwork.js';
 export * from './browser/touchAction.js';
 export * from './browser/uploadFile.js';
 export * from './browser/url.js';

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

@@ -1 +1 @@
-{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../../src/commands/browser.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,kBAAkB,CAAA;AAChC,cAAc,wBAAwB,CAAA"}
+{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../../src/commands/browser.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,kBAAkB,CAAA;AAChC,cAAc,wBAAwB,CAAA"}

package/build/commands/browser.js

@@ -7,6 +7,7 @@ export * from './browser/custom$$.js';
 export * from './browser/custom$.js';
 export * from './browser/debug.js';
 export * from './browser/deleteCookies.js';
+export * from './browser/emulate.js';
 export * from './browser/execute.js';
 export * from './browser/executeAsync.js';
 export * from './browser/getCookies.js';
@@ -30,6 +31,8 @@ export * from './browser/setTimeout.js';
 export * from './browser/setWindowSize.js';
 export * from './browser/switchWindow.js';
 export * from './browser/throttle.js';
+export * from './browser/throttleCPU.js';
+export * from './browser/throttleNetwork.js';
 export * from './browser/touchAction.js';
 export * from './browser/uploadFile.js';
 export * from './browser/url.js';

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

@@ -1 +1 @@
-{"version":3,"file":"click.d.ts","sourceRoot":"","sources":["../../../src/commands/element/click.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAGlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,wBAAsB,KAAK,CACvB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,OAAO,CAAC,EAAE,YAAY,iBAyDzB"}
+{"version":3,"file":"click.d.ts","sourceRoot":"","sources":["../../../src/commands/element/click.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAGlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,wBAAsB,KAAK,CACvB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,OAAO,CAAC,EAAE,YAAY,iBA+EzB"}

package/build/commands/element/click.js

@@ -86,11 +86,11 @@ export async function click(options) {
         throw new TypeError('Options must be an object');
     }
     let button = (options.button || 0);
-    const { x: xoffset = 0, y: yoffset = 0, skipRelease = false } = options || {};
-    if (typeof xoffset !== 'number'
-        || typeof yoffset !== 'number'
-        || !Number.isInteger(xoffset)
-        || !Number.isInteger(yoffset)) {
+    const { x: xOffset = 0, y: yOffset = 0, skipRelease = false } = options || {};
+    if (typeof xOffset !== 'number'
+        || typeof yOffset !== 'number'
+        || !Number.isInteger(xOffset)
+        || !Number.isInteger(yOffset)) {
         throw new TypeError('Coordinates must be integers');
     }
     if (options.button === 'left') {
@@ -107,20 +107,43 @@ export async function click(options) {
     }
     if (this.isW3C) {
         const browser = getBrowserObject(this);
-        await browser.action('pointer', {
-            parameters: { pointerType: 'mouse' }
-        })
-            .move({
-            origin: this,
-            x: xoffset,
-            y: yoffset
-        })
-            .down({ button })
-            .up({ button })
-            .perform(skipRelease);
+        if (xOffset || yOffset) {
+            const { width, height } = await browser.getElementRect(this.elementId);
+            if ((xOffset && xOffset < (-Math.floor(width / 2))) || (xOffset && xOffset > Math.floor(width / 2))) {
+                throw new Error('xOffset would cause a out of bounds error as it goes outside of element');
+            }
+            if ((yOffset && yOffset < (-Math.floor(height / 2))) || (yOffset && yOffset > Math.floor(height / 2))) {
+                throw new Error('yOffset would cause a out of bounds error as it goes outside of element');
+            }
+        }
+        const clickNested = async () => {
+            await browser.action('pointer', {
+                parameters: { pointerType: 'mouse' }
+            })
+                .move({
+                origin: this,
+                x: xOffset,
+                y: yOffset
+            })
+                .down({ button })
+                .up({ button })
+                .perform(skipRelease);
+        };
+        try {
+            await clickNested();
+        }
+        catch {
+            /**
+            * Workaround, because sometimes browser.action().move() flaky and isn't able to scroll pointer to into view
+            * Moreover the action  with 'nearest' behavior by default where element is aligned at the bottom of its ancestor.
+            * and could be overlapped. Scroll to center should definitely work even if element was covered with sticky header/footer
+            */
+            await this.scrollIntoView({ block: 'center', inline: 'center' });
+            await clickNested();
+        }
         return;
     }
     const { width, height } = await this.getElementSize(this.elementId);
-    await this.moveToElement(this.elementId, xoffset + (width / 2), yoffset + (height / 2));
+    await this.moveToElement(this.elementId, xOffset + (width / 2), yOffset + (height / 2));
     return this.positionClick(button);
 }

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

@@ -1,4 +1,3 @@
-import type { ElementArray } from '../../types.js';
 /**
  *
  * The `customs$$` allows you to use a custom strategy declared by using `browser.addLocatorStrategy`.
@@ -24,5 +23,5 @@ import type { ElementArray } from '../../types.js';
  * @param {*} strategyArguments
  * @return {ElementArray}
  */
-export declare function custom$$(this: WebdriverIO.Element, strategyName: string, ...strategyArguments: any[]): Promise<ElementArray>;
+export declare function custom$$(this: WebdriverIO.Element, strategyName: string, ...strategyArguments: any[]): Promise<WebdriverIO.ElementArray>;
 //# sourceMappingURL=custom$$.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"custom$$.d.ts","sourceRoot":"","sources":["../../../src/commands/element/custom$$.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAA;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAsB,QAAQ,CAC1B,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,iBAAiB,EAAE,GAAG,EAAE,GAC5B,OAAO,CAAC,YAAY,CAAC,CAkCvB"}
+{"version":3,"file":"custom$$.d.ts","sourceRoot":"","sources":["../../../src/commands/element/custom$$.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAsB,QAAQ,CAC1B,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,iBAAiB,EAAE,GAAG,EAAE,GAC5B,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAkCnC"}

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

@@ -55,5 +55,5 @@ export async function custom$(strategyName, ...strategyArguments) {
     if (res && typeof res[ELEMENT_KEY] === 'string') {
         return await getElement.call(this, strategyRef, res);
     }
-    throw Error('Your locator strategy script must return an element');
+    return await getElement.call(this, strategyRef, new Error('no such element'));
 }

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

@@ -1,3 +1,4 @@
+type PseudoElement = '::before' | '::after';
 /**
  *
  * Get a css property from a DOM-element selected by given selector. The return value
@@ -46,7 +47,7 @@
         //      }
         // }
 
-        var width = await elem.getCSSProperty('width')
+        var width = await elem.getCSSProperty('width', '::before')
         console.log(width)
         // outputs the following:
         // {
@@ -61,11 +62,12 @@
         // }
     })
  * </example>
- *
  * @alias element.getCSSProperty
- * @param  {string}      cssProperty css property name
- * @return {CSSProperty}             The specified css of the element
+ * @param  {string}        cssProperty   css property name
+ * @param  {PseudoElement} pseudoElement css pseudo element
+ * @return {CSSProperty}                 The specified css of the element
  *
  */
-export declare function getCSSProperty(this: WebdriverIO.Element, cssProperty: string): Promise<import("../../types.js").ParsedCSSValue>;
+export declare function getCSSProperty(this: WebdriverIO.Element, cssProperty: string, pseudoElement?: PseudoElement): Promise<import("../../types.js").ParsedCSSValue>;
+export {};
 //# sourceMappingURL=getCSSProperty.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"getCSSProperty.d.ts","sourceRoot":"","sources":["../../../src/commands/element/getCSSProperty.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,wBAAsB,cAAc,CAChC,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,WAAW,EAAE,MAAM,oDAsCtB"}
+{"version":3,"file":"getCSSProperty.d.ts","sourceRoot":"","sources":["../../../src/commands/element/getCSSProperty.ts"],"names":[],"mappings":"AAGA,KAAK,aAAa,GAAG,UAAU,GAAG,SAAS,CAAA;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,wBAAsB,cAAc,CAChC,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,WAAW,EAAE,MAAM,EACnB,aAAa,CAAC,EAAE,aAAa,oDAehC"}

package/build/commands/element/getCSSProperty.js

@@ -1,5 +1,5 @@
 import cssShorthandProps from 'css-shorthand-properties';
-import { parseCSS } from '../../utils/index.js';
+import { getBrowserObject, parseCSS } from '../../utils/index.js';
 /**
  *
  * Get a css property from a DOM-element selected by given selector. The return value
@@ -48,7 +48,7 @@ import { parseCSS } from '../../utils/index.js';
         //      }
         // }
 
-        var width = await elem.getCSSProperty('width')
+        var width = await elem.getCSSProperty('width', '::before')
         console.log(width)
         // outputs the following:
         // {
@@ -63,40 +63,77 @@ import { parseCSS } from '../../utils/index.js';
         // }
     })
  * </example>
- *
  * @alias element.getCSSProperty
- * @param  {string}      cssProperty css property name
- * @return {CSSProperty}             The specified css of the element
+ * @param  {string}        cssProperty   css property name
+ * @param  {PseudoElement} pseudoElement css pseudo element
+ * @return {CSSProperty}                 The specified css of the element
  *
  */
-export async function getCSSProperty(cssProperty) {
+export async function getCSSProperty(cssProperty, pseudoElement) {
+    const getCSSProperty = cssShorthandProps.isShorthand(cssProperty)
+        ? getShorthandPropertyCSSValue
+        : getPropertyCSSValue;
+    const cssValue = await getCSSProperty.call(this, {
+        cssProperty,
+        pseudoElement,
+    });
+    return parseCSS(cssValue, cssProperty);
+}
+async function getShorthandPropertyCSSValue(options) {
+    const { pseudoElement, cssProperty } = options;
+    const properties = getShorthandProperties(cssProperty);
+    if (pseudoElement) {
+        const cssValues = await Promise.all(properties.map((prop) => getPseudoElementCSSValue(this, {
+            pseudoElement,
+            cssProperty: prop,
+        })));
+        return mergeEqualSymmetricalValue(cssValues);
+    }
+    const cssValues = await Promise.all(properties.map((prop) => this.getElementCSSValue(this.elementId, prop)));
+    return mergeEqualSymmetricalValue(cssValues);
+}
+async function getPropertyCSSValue(options) {
+    const { pseudoElement, cssProperty } = options;
+    if (pseudoElement) {
+        return await getPseudoElementCSSValue(this, {
+            pseudoElement,
+            cssProperty
+        });
+    }
+    return await this.getElementCSSValue(this.elementId, cssProperty);
+}
+function getShorthandProperties(cssProperty) {
     /**
      * Getting the css value of a shorthand property results in different results
      * given that the behavior of `getComputedStyle` is not defined in this case.
      * Therefore if we don't deal with a shorthand property run `getElementCSSValue`
      * otherwise expand it and run the command for each longhand property.
      */
-    if (!cssShorthandProps.isShorthand(cssProperty)) {
-        const cssValue = await this.getElementCSSValue(this.elementId, cssProperty);
-        return parseCSS(cssValue, cssProperty);
-    }
-    const properties = cssShorthandProps.expand(cssProperty);
-    let cssValues = await Promise.all(properties.map((prop) => this.getElementCSSValue(this.elementId, prop)));
+    return cssShorthandProps.expand(cssProperty);
+}
+function mergeEqualSymmetricalValue(cssValues) {
     /**
      * merge equal symmetrical values
      * - e.g. `36px 10px 36px 10px` to `36px 10px`
      * - or `0px 0px 0px 0px` to `0px`
-     */
-    while ((cssValues.length % 2) === 0) {
+    */
+    let newCssValues = [...cssValues];
+    while ((newCssValues.length % 2) === 0) {
         const mergedValues = [
-            cssValues.slice(0, cssValues.length / 2).join(' '),
-            cssValues.slice(cssValues.length / 2).join(' ')
+            newCssValues.slice(0, newCssValues.length / 2).join(' '),
+            newCssValues.slice(newCssValues.length / 2).join(' ')
         ];
         const hasEqualProperties = mergedValues.every((v) => v === mergedValues[0]);
         if (!hasEqualProperties) {
             break;
         }
-        cssValues = cssValues.slice(0, cssValues.length / 2);
+        newCssValues = newCssValues.slice(0, newCssValues.length / 2);
     }
-    return parseCSS(cssValues.join(' '), cssProperty);
+    return newCssValues.join(' ');
+}
+async function getPseudoElementCSSValue(elem, options) {
+    const browser = getBrowserObject(elem);
+    const { cssProperty, pseudoElement } = options;
+    const cssValue = await browser.execute((elem, pseudoElement, cssProperty) => (window.getComputedStyle(elem, pseudoElement))[cssProperty], elem, pseudoElement, cssProperty);
+    return cssValue;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"moveTo.d.ts","sourceRoot":"","sources":["../../../src/commands/element/moveTo.ts"],"names":[],"mappings":"AAIA,KAAK,aAAa,GAAG;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAsB,MAAM,CACxB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,EAAE,OAAO,EAAE,OAAO,EAAE,GAAE,aAAkB,iBAsB3C"}
+{"version":3,"file":"moveTo.d.ts","sourceRoot":"","sources":["../../../src/commands/element/moveTo.ts"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAsB,MAAM,CACxB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,EAAE,OAAO,EAAE,OAAO,EAAE,GAAE,aAAkB,iBAkC3C"}

package/build/commands/element/moveTo.js

@@ -1,6 +1,4 @@
 import { getBrowserObject } from '../../utils/index.js';
-import { ELEMENT_KEY } from '../../constants.js';
-import isElementInViewportScript from '../../scripts/isElementInViewport.js';
 /**
  *
  * Move the mouse by an offset of the specified element. If no element is specified,
@@ -19,21 +17,34 @@ export async function moveTo({ xOffset, yOffset } = {}) {
     if (!this.isW3C) {
         return this.moveToElement(this.elementId, xOffset, yOffset);
     }
-    const isIntoView = async () => {
-        return await browser.execute(isElementInViewportScript, {
-            [ELEMENT_KEY]: this.elementId,
-            ELEMENT: this.elementId // jsonwp compatible
-        });
-    };
     /**
      * W3C way of handle the mouse move actions
      */
     const browser = getBrowserObject(this);
-    await this.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'instant' });
-    if (!(await isIntoView())) {
-        await this.scrollIntoView({ block: 'center', inline: 'center', behavior: 'instant' });
+    if (xOffset || yOffset) {
+        const { width, height } = await browser.getElementRect(this.elementId);
+        if ((xOffset && xOffset < (-Math.floor(width / 2))) || (xOffset && xOffset > Math.floor(width / 2))) {
+            throw new Error('xOffset would cause a out of bounds error as it goes outside of element');
+        }
+        if ((yOffset && yOffset < (-Math.floor(height / 2))) || (yOffset && yOffset > Math.floor(height / 2))) {
+            throw new Error('yOffset would cause a out of bounds error as it goes outside of element');
+        }
+    }
+    const moveToNested = async () => {
+        await browser.action('pointer', { parameters: { pointerType: 'mouse' } })
+            .move({ origin: this, x: xOffset || 0, y: yOffset || 0 })
+            .perform();
+    };
+    try {
+        await moveToNested();
+    }
+    catch {
+        /**
+        * Workaround, because sometimes browser.action().move() flaky and isn't able to scroll pointer to into view
+        * Moreover the action  with 'nearest' behavior by default where element is aligned at the bottom of its ancestor.
+        * and could be overlapped. Scroll to center should definitely work even if element was covered with sticky header/footer
+        */
+        await this.scrollIntoView({ block: 'center', inline: 'center' });
+        await moveToNested();
     }
-    return browser.action('pointer', { parameters: { pointerType: 'mouse' } })
-        .move({ origin: this, x: xOffset ? xOffset : 0, y: yOffset ? yOffset : 0 })
-        .perform();
 }

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

@@ -32,5 +32,5 @@ import type { ReactSelectorOptions } from '../../types.js';
  * @return {ElementArray}
  *
  */
-export declare function react$$(this: WebdriverIO.Element, selector: string, { props, state }?: ReactSelectorOptions): Promise<import("../../types.js").ElementArray>;
+export declare function react$$(this: WebdriverIO.Element, selector: string, { props, state }?: ReactSelectorOptions): Promise<WebdriverIO.ElementArray>;
 //# sourceMappingURL=react$$.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"react$$.d.ts","sourceRoot":"","sources":["../../../src/commands/element/react$$.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAI1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAsB,OAAO,CACzB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,QAAQ,EAAE,MAAM,EAChB,EAAE,KAAU,EAAE,KAAU,EAAE,GAAE,oBAAyB,kDAgBxD"}
+{"version":3,"file":"react$$.d.ts","sourceRoot":"","sources":["../../../src/commands/element/react$$.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAA;AAI1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAsB,OAAO,CACzB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,QAAQ,EAAE,MAAM,EAChB,EAAE,KAAU,EAAE,KAAU,EAAE,GAAE,oBAAyB,qCAgBxD"}

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

@@ -1,4 +1,3 @@
-import type { ElementArray } from '../../types.js';
 /**
  *
  * Access elements inside a given element's shadowRoot. If you are working
@@ -19,5 +18,5 @@ import type { ElementArray } from '../../types.js';
  * @type utility
  *
  */
-export declare function shadow$$(this: WebdriverIO.Element, selector: string): Promise<ElementArray>;
+export declare function shadow$$(this: WebdriverIO.Element, selector: string): Promise<WebdriverIO.ElementArray>;
 //# sourceMappingURL=shadow$$.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"shadow$$.d.ts","sourceRoot":"","sources":["../../../src/commands/element/shadow$$.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAY,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAI5D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAsB,QAAQ,CAC1B,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,QAAQ,EAAE,MAAM,yBAiBnB"}
+{"version":3,"file":"shadow$$.d.ts","sourceRoot":"","sources":["../../../src/commands/element/shadow$$.ts"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAsB,QAAQ,CAC1B,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,QAAQ,EAAE,MAAM,qCAiBnB"}

package/build/multiremote.d.ts

@@ -49,8 +49,8 @@ export declare class MultiRemoteDriver {
     isMultiremote: true;
     __propertiesObject__: Record<string, PropertyDescriptor>;
     constructor(instances: Record<string, WebdriverIO.Browser>, propertiesObject: Record<string, PropertyDescriptor>);
-    on(this: WebdriverIO.MultiRemoteBrowser, eventName: string, emitter: EventEmitter): any;
-    once(this: WebdriverIO.MultiRemoteBrowser, eventName: string, emitter: EventEmitter): any;
+    on(this: WebdriverIO.MultiRemoteBrowser, eventName: any, emitter: EventEmitter): any;
+    once(this: WebdriverIO.MultiRemoteBrowser, eventName: any, emitter: EventEmitter): any;
     emit(this: WebdriverIO.MultiRemoteBrowser, eventName: string, emitter: EventEmitter): boolean;
     eventNames(this: WebdriverIO.MultiRemoteBrowser): any;
     getMaxListeners(this: WebdriverIO.MultiRemoteBrowser): number;

package/build/multiremote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiremote.d.ts","sourceRoot":"","sources":["../src/multiremote.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAIvD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAErD,KAAK,YAAY,GAAG,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAA;AAEvC;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAW;IAC5B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,CAAK;IACnD,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACG,WAAW,CAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG;IAKnD;;OAEG;IACH,QAAQ,CAAE,aAAa,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC;QAAC,WAAW,EAAE,CAAC,MAAM,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,GAAG,aAAa,CAAC,EAAE,CAAA;KAAE;IAiC1I;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,cAAc,CACjB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,EAC9C,MAAM,EAAE,GAAG,EACX,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,EACpD,KAAK,EAAE,WAAW,GACnB,WAAW,CAAC,kBAAkB;IAwBjC;;OAEG;IACH,cAAc,CAAE,WAAW,EAAE,MAAM,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,GAAG,aAAa,WAK5D,OAAO,MAAM,EAAE,YAAY,OAAO,GAAG,mBAAmB,CAAC,eAAe,MAAM;CAqChH;AAED;;GAEG;AAEH,qBAAa,iBAAiB;IAC1B,SAAS,EAAE,MAAM,EAAE,CAAA;IACnB,aAAa,OAAe;IAC5B,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAA;gBAGpD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,EAC9C,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC;IAMxD,EAAE,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY;IAKlF,IAAI,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY;IAKpF,IAAI,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY;IAMpF,UAAU,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB;IAMhD,eAAe,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB;IAMrD,aAAa,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM;IAMtE,SAAS,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM;IASlE,cAAc,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY;IAK9F,kBAAkB,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM;CAI9E"}
+{"version":3,"file":"multiremote.d.ts","sourceRoot":"","sources":["../src/multiremote.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAIvD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAErD,KAAK,YAAY,GAAG,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAA;AAEvC;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAW;IAC5B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,CAAK;IACnD,YAAY,CAAC,EAAE,iBAAiB,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACG,WAAW,CAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG;IAKnD;;OAEG;IACH,QAAQ,CAAE,aAAa,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC;QAAC,WAAW,EAAE,CAAC,MAAM,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,GAAG,aAAa,CAAC,EAAE,CAAA;KAAE;IAiC1I;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,cAAc,CACjB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,EAC9C,MAAM,EAAE,GAAG,EACX,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,EACpD,KAAK,EAAE,WAAW,GACnB,WAAW,CAAC,kBAAkB;IAwBjC;;OAEG;IACH,cAAc,CAAE,WAAW,EAAE,MAAM,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,GAAG,aAAa,WAK5D,OAAO,MAAM,EAAE,YAAY,OAAO,GAAG,mBAAmB,CAAC,eAAe,MAAM;CAqChH;AAED;;GAEG;AAEH,qBAAa,iBAAiB;IAC1B,SAAS,EAAE,MAAM,EAAE,CAAA;IACnB,aAAa,OAAe;IAC5B,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAA;gBAGpD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,EAC9C,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC;IAMxD,EAAE,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY;IAK/E,IAAI,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY;IAKjF,IAAI,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY;IAMpF,UAAU,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB;IAMhD,eAAe,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB;IAMrD,aAAa,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM;IAMtE,SAAS,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM;IASlE,cAAc,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY;IAK9F,kBAAkB,CAAE,IAAI,EAAE,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,MAAM;CAI9E"}

package/build/types.d.ts

@@ -2,7 +2,7 @@
 /// <reference types="node" resolution-mode="require"/>
 import type { EventEmitter } from 'node:events';
 import type { Protocol } from 'devtools-protocol';
-import type { SessionFlags, AttachOptions as WebDriverAttachOptions, BidiHandler } from 'webdriver';
+import type { SessionFlags, AttachOptions as WebDriverAttachOptions, BidiHandler, BidiEventHandler } from 'webdriver';
 import type { Options, Capabilities, FunctionProperties, ThenArg } from '@wdio/types';
 import type { ElementReference, ProtocolCommands } from '@wdio/protocols';
 import type { Browser as PuppeteerBrowser } from 'puppeteer-core/lib/esm/puppeteer/api/Browser.js';
@@ -112,7 +112,7 @@ export type MultiRemoteElementCommandsType = {
 export type MultiRemoteProtocolCommandsType = {
     [K in keyof ProtocolCommands]: (...args: Parameters<ProtocolCommands[K]>) => Promise<ThenArg<ReturnType<ProtocolCommands[K]>>[]>;
 };
-export interface ElementArray extends Array<WebdriverIO.Element> {
+interface ElementArrayExport extends Array<WebdriverIO.Element> {
     selector: Selector;
     parent: WebdriverIO.Element | WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser;
     foundWith: string;
@@ -180,7 +180,7 @@ export interface BrowserBase extends InstanceBase, CustomInstanceCommands<Browse
 /**
  * @deprecated use `WebdriverIO.Browser` instead
  */
-export interface Browser extends BrowserBase, BidiHandler, BrowserCommandsType, ProtocolCommands {
+export interface Browser extends Omit<BrowserBase, 'on' | 'once'>, BidiEventHandler, BidiEventHandler, BrowserCommandsType, ProtocolCommands {
 }
 /**
  * export a browser interface that can be used for typing plugins
@@ -416,12 +416,45 @@ export interface AttachOptions extends Omit<WebDriverAttachOptions, 'capabilitie
 }
 declare global {
     namespace WebdriverIO {
-        interface Browser extends BrowserBase, BidiHandler, ProtocolCommands, BrowserCommandsType {
+        /**
+         * WebdriverIO browser object
+         * @see https://webdriver.io/docs/api/browser
+         */
+        interface Browser extends Omit<BrowserBase, 'on' | 'once'>, BidiEventHandler, BidiHandler, ProtocolCommands, BrowserCommandsType {
         }
-        interface Element extends ElementBase, BidiHandler, ProtocolCommands, Omit<BrowserCommandsType, keyof ElementCommandsType>, ElementCommandsType {
+        /**
+         * WebdriverIO element object
+         * @see https://webdriver.io/docs/api/element
+         */
+        interface Element extends ElementBase, ProtocolCommands, ElementCommandsType {
         }
+        /**
+         * WebdriverIO element array
+         * When fetching elements via `$$`, `custom$$` or `shadow$$` commands an array of elements
+         * is returns. This array has extended prototype properties to provide information about
+         * the parent element, selector and properties of the fetched elements. This is useful to
+         * e.g. re-fetch the set in case no elements got returned.
+         */
+        interface ElementArray extends ElementArrayExport {
+        }
+        /**
+         * WebdriverIO multiremote browser object
+         * A multiremote browser instance is a property on the global WebdriverIO browser object that
+         * allows to control multiple browser instances at once. It can be represented as `Record<string, WebdriverIO.Browser>`
+         * where `string` is the capability name defined in the WebdriverIO options.
+         *
+         * @see https://webdriver.io/docs/multiremote/
+         */
         interface MultiRemoteBrowser extends MultiRemoteBrowserType {
         }
+        /**
+         * WebdriverIO multiremote browser object
+         * A multiremote browser instance is a property on the global WebdriverIO browser object that
+         * allows to control multiple browser instances at once. It can be represented as `Record<string, WebdriverIO.Element>`
+         * where `string` is the capability name defined in the WebdriverIO options.
+         *
+         * @see https://webdriver.io/docs/multiremote/
+         */
         interface MultiRemoteElement extends MultiRemoteElementType {
         }
     }