webdriverio 8.33.0 → 8.34.0

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

@@ -12,7 +12,7 @@ import type { Selector } from '../../types.js';
  * to walk down the DOM tree, e.g.:
  *
  * ```js
- * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src)
+ * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src')
  * ```
  *
  * It is also possible to use async iterators to loop over the result of the query, e.g.:

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

@@ -12,7 +12,7 @@ import { getElements } from '../../utils/getElementObject.js';
  * to walk down the DOM tree, e.g.:
  *
  * ```js
- * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src)
+ * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src')
  * ```
  *
  * It is also possible to use async iterators to loop over the result of the query, e.g.:

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

@@ -21,7 +21,7 @@ import type { Selector } from '../../types.js';
  * to walk down the DOM tree, e.g.:
  *
  * ```js
- * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src)
+ * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src')
  * ```
  *
  * :::info

package/build/commands/browser/$.js

@@ -23,7 +23,7 @@ import { getElement } from '../../utils/getElementObject.js';
  * to walk down the DOM tree, e.g.:
  *
  * ```js
- * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src)
+ * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src')
  * ```
  *
  * :::info

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

@@ -19,7 +19,7 @@
  * to walk down the DOM tree, e.g.:
  *
  * ```js
- * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src)
+ * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src')
  * ```
  *
  * :::info

package/build/commands/element/$.js

@@ -19,7 +19,7 @@
  * to walk down the DOM tree, e.g.:
  *
  * ```js
- * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src)
+ * const imageSrc = await $$('div')[1].nextElement().$$('img')[2].getAttribute('src')
  * ```
  *
  * :::info

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

@@ -1,12 +1,13 @@
 /**
  *
- * Return true if the selected DOM-element:
- *
- * - exists
- * - is visible
- * - is within viewport (if not try scroll to it)
- * - its center is not overlapped with another element
- * - is not disabled
+ * An element is considered to be clickable when the following conditions are met:
+ *
+ * - the element exists
+ * - the element is displayed
+ * - the element is not disabled
+ * - the element is within the viewport
+ * - the element can be scrolled into the viewport
+ * - the element's center is not overlapped with another element
  *
  * otherwise return false.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"isClickable.d.ts","sourceRoot":"","sources":["../../../src/commands/element/isClickable.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAsB,WAAW,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,oBAkB3D"}
+{"version":3,"file":"isClickable.d.ts","sourceRoot":"","sources":["../../../src/commands/element/isClickable.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAsB,WAAW,CAAE,IAAI,EAAE,WAAW,CAAC,OAAO,oBAkB3D"}

package/build/commands/element/isClickable.js

@@ -3,13 +3,14 @@ import { getBrowserObject } from '../../utils/index.js';
 import isElementClickableScript from '../../scripts/isElementClickable.js';
 /**
  *
- * Return true if the selected DOM-element:
- *
- * - exists
- * - is visible
- * - is within viewport (if not try scroll to it)
- * - its center is not overlapped with another element
- * - is not disabled
+ * An element is considered to be clickable when the following conditions are met:
+ *
+ * - the element exists
+ * - the element is displayed
+ * - the element is not disabled
+ * - the element is within the viewport
+ * - the element can be scrolled into the viewport
+ * - the element's center is not overlapped with another element
  *
  * otherwise return false.
  *

package/build/scripts/isElementClickable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isElementClickable.d.ts","sourceRoot":"","sources":["../../src/scripts/isElementClickable.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAE,IAAI,EAAE,WAAW,WA4I5D"}
+{"version":3,"file":"isElementClickable.d.ts","sourceRoot":"","sources":["../../src/scripts/isElementClickable.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAE,IAAI,EAAE,WAAW,WAiJ5D"}

package/build/scripts/isElementClickable.js

@@ -23,14 +23,12 @@ export default function isElementClickable(elem) {
     // applicable if element's text is multiline.
     function getOverlappingRects(elem, context) {
         context = context || document;
-        const elems = [];
         const rects = elem.getClientRects();
         // webdriver clicks on center of the first element's rect (line of text), it might change in future
         const rect = rects[0];
         const x = rect.left + (rect.width / 2);
         const y = rect.top + (rect.height / 2);
-        elems.push(context.elementFromPoint(x, y));
-        return elems;
+        return [context.elementFromPoint(x, y)];
     }
     // get overlapping elements
     function getOverlappingElements(elem, context) {
@@ -98,21 +96,28 @@ export default function isElementClickable(elem) {
         const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) > 0);
         return (vertInView && horInView);
     }
-    function isClickable(elem) {
-        return (isElementInViewport(elem) && elem.disabled !== true &&
-            isOverlappingElementMatch(getOverlappingElements(elem), elem));
+    function isEnabled(elem) {
+        return elem.disabled !== true;
     }
-    // scroll to the element if it's not clickable
-    if (!isClickable(elem)) {
-        // works well in dialogs, but the element may be still overlapped by some sticky header/footer
-        elem.scrollIntoView(scrollIntoViewFullSupport ? { block: 'nearest', inline: 'nearest' } : false);
-        // if element is still not clickable take another scroll attempt
-        if (!isClickable(elem)) {
-            // scroll to element, try put it in the screen center.
-            // Should definitely work even if element was covered with sticky header/footer
-            elem.scrollIntoView(scrollIntoViewFullSupport ? { block: 'center', inline: 'center' } : true);
-            return isClickable(elem);
+    function hasOverlaps(elem) {
+        return !isOverlappingElementMatch(getOverlappingElements(elem), elem);
+    }
+    function isFullyDisplayedInViewport(elem) {
+        return isElementInViewport(elem) && !hasOverlaps(elem);
+    }
+    // scroll the element to the center of the viewport when
+    // it is not fully displayed in the viewport or is overlapped by another element
+    // to check if it still overlapped/not in the viewport
+    // afterwards we scroll back to the original position
+    let _isFullyDisplayedInViewport = isFullyDisplayedInViewport(elem);
+    if (!_isFullyDisplayedInViewport) {
+        const { x: originalX, y: originalY } = elem.getBoundingClientRect();
+        elem.scrollIntoView(scrollIntoViewFullSupport ? { block: 'center', inline: 'center' } : false);
+        _isFullyDisplayedInViewport = isFullyDisplayedInViewport(elem);
+        const { x, y } = elem.getBoundingClientRect();
+        if (x !== originalX || y !== originalY) {
+            elem.scroll(scrollX, scrollY);
         }
     }
-    return true;
+    return _isFullyDisplayedInViewport && isEnabled(elem);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "webdriverio",
   "description": "Next-gen browser and mobile automation test framework for Node.js",
-  "version": "8.33.0",
+  "version": "8.34.0",
   "homepage": "https://webdriver.io",
   "author": "Christian Bromann <mail@bromann.dev>",
   "license": "MIT",
@@ -69,12 +69,12 @@
   },
   "dependencies": {
     "@types/node": "^20.1.0",
-    "@wdio/config": "8.33.0",
+    "@wdio/config": "8.34.0",
     "@wdio/logger": "8.28.0",
     "@wdio/protocols": "8.32.0",
     "@wdio/repl": "8.24.12",
     "@wdio/types": "8.32.4",
-    "@wdio/utils": "8.33.0",
+    "@wdio/utils": "8.33.1",
     "archiver": "^7.0.0",
     "aria-query": "^5.0.0",
     "css-shorthand-properties": "^1.1.1",
@@ -91,7 +91,7 @@
     "resq": "^1.9.1",
     "rgb2hex": "0.2.5",
     "serialize-error": "^11.0.1",
-    "webdriver": "8.33.0"
+    "webdriver": "8.34.0"
   },
   "peerDependencies": {
     "devtools": "^8.14.0"
@@ -101,5 +101,5 @@
       "optional": true
     }
   },
-  "gitHead": "b00f5062e9ca87d6b2d01b1e9fa66ab15d8636b4"
+  "gitHead": "72856f9e3e4c6ae0750a1d3f17b137724a30e4e5"
 }