webdriverio 9.0.0-alpha.59 → 9.0.0-alpha.64

package/build/commands/element/getHTML.js

@@ -110,7 +110,7 @@ async function pierceIntoShadowDOM($, elemsWithShadowRootAndId, shadowElementIds
     /**
      * fetch html of shadow roots
      */
-    const shadowRootContent = await Promise.all(shadowElementIdsFound.map((sel) => (this.execute(getHTMLShadowScript, { [ELEMENT_KEY]: sel }, false, elemsWithShadowRootAndId).then(({ html, shadowElementIdsFound }) => ({ html, shadowElementIdsFound, shadowRootId: sel })))));
+    const shadowRootContent = await Promise.all(shadowElementIdsFound.map((sel) => (this.execute(getHTMLShadowScript, { [ELEMENT_KEY]: sel }, false, elemsWithShadowRootAndId).then(({ html, shadowElementIdsFound, styles }) => ({ html, styles, shadowElementIdsFound, shadowRootId: sel })))));
     /**
      * update virtual DOM and inject shadow root content
      */
@@ -119,8 +119,15 @@ async function pierceIntoShadowDOM($, elemsWithShadowRootAndId, shadowElementIds
         if (!se) {
             continue;
         }
-        const { html } = shadowRootContent.find(({ shadowRootId }) => s === shadowRootId);
-        se.append(`<shadow-root id="${s}">${html}</shadow-root>`);
+        const { html, styles } = shadowRootContent.find(({ shadowRootId }) => s === shadowRootId);
+        se.append([
+            `<template shadowroot="open" shadowrootmode="open" id="${s}">`,
+            styles.length > 0
+                ? `\t<style>${styles.join('\n')}</style>`
+                : '',
+            `\t${html}`,
+            '</template>',
+        ].join('\n'));
     }
     const elementsToLookup = shadowRootContent.map(({ shadowElementIdsFound }) => shadowElementIdsFound).flat();
     /**
@@ -144,16 +151,14 @@ function sanitizeHTML($, options = {}) {
      */
     const isCheerioObject = $ && typeof $ !== 'string';
     if (isCheerioObject) {
-        $('shadow-root[id]').each((_, el) => { delete el.attribs.id; });
+        $('template[id]').each((_, el) => { delete el.attribs.id; });
         $('[data-wdio-shadow-id]').each((_, el) => { delete el.attribs['data-wdio-shadow-id']; });
     }
     let returnHTML = isCheerioObject ? $('body').html() : $;
     if (options.removeCommentNodes) {
         returnHTML = returnHTML?.replace(/<!--[\s\S]*?-->/g, '');
     }
-    return options.prettify && returnHTML.includes('<')
-        // we have to verify if HTML string starts with `<` and ends with `>` to avoid
-        // https://github.com/j4w8n/htmlfy/issues/3
-        ? prettifyFn(`${returnHTML.startsWith('<') ? '' : ' '}${returnHTML}${returnHTML.endsWith('>') ? '' : ' '}`)
+    return options.prettify
+        ? prettifyFn(returnHTML)
         : returnHTML;
 }

package/build/scripts/getHTMLShadow.d.ts

@@ -6,8 +6,13 @@
  * @param  {Object}  shadowElementIdsFound list of shadow root ids we want to look up in the next iteration
  * @return {Object}                        html source and list of shadow root ids found
  */
-export default function getHTMLShadow(element: HTMLElement, includeSelectorTag: boolean, shadowElementIds?: [string, HTMLElement][]): {
+export default function getHTMLShadow(element: HTMLElement | ShadowRoot, includeSelectorTag: boolean, shadowElementIds?: [string, HTMLElement][]): {
+    /**
+     * `getHTMLShadow` requires `includeSelectorTag` to be set to `false` if the element
+     * is a shadow root itself
+     */
     html: string;
     shadowElementIdsFound: string[];
+    styles: string[];
 };
 //# sourceMappingURL=getHTMLShadow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"getHTMLShadow.d.ts","sourceRoot":"","sources":["../../src/scripts/getHTMLShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CACjC,OAAO,EAAE,WAAW,EACpB,kBAAkB,EAAE,OAAO,EAC3B,gBAAgB,GAAE,CAAC,MAAM,EAAE,WAAW,CAAC,EAAO;;;EA6BjD"}
+{"version":3,"file":"getHTMLShadow.d.ts","sourceRoot":"","sources":["../../src/scripts/getHTMLShadow.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CACjC,OAAO,EAAE,WAAW,GAAG,UAAU,EACjC,kBAAkB,EAAE,OAAO,EAC3B,gBAAgB,GAAE,CAAC,MAAM,EAAE,WAAW,CAAC,EAAO;IAkC1C;;;OAGG;;;;EAKV"}

package/build/scripts/getHTMLShadow.js

@@ -7,6 +7,7 @@
  * @return {Object}                        html source and list of shadow root ids found
  */
 export default function getHTMLShadow(element, includeSelectorTag, shadowElementIds = []) {
+    let styles = [];
     const shadowElementIdsFound = [];
     const elemsWithShadowRoot = Array.from(element.querySelectorAll('*'))
         .filter((el) => el.shadowRoot);
@@ -16,6 +17,12 @@ export default function getHTMLShadow(element, includeSelectorTag, shadowElement
     if (element.shadowRoot) {
         elemsWithShadowRoot.unshift(element);
     }
+    if (element.nodeType === 11) {
+        styles = Array.from(element.adoptedStyleSheets)
+            .map(({ cssRules }) => Array.from(cssRules))
+            .flat()
+            .map(({ cssText }) => cssText);
+    }
     for (const elem of elemsWithShadowRoot) {
         /**
          * attach `data-wdio-shadow-id` attribute to the element so we can later
@@ -28,7 +35,12 @@ export default function getHTMLShadow(element, includeSelectorTag, shadowElement
         }
     }
     return {
+        /**
+         * `getHTMLShadow` requires `includeSelectorTag` to be set to `false` if the element
+         * is a shadow root itself
+         */
         html: element[includeSelectorTag ? 'outerHTML' : 'innerHTML'],
-        shadowElementIdsFound
+        shadowElementIdsFound,
+        styles
     };
 }

package/build/shadowRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadowRoot.d.ts","sourceRoot":"","sources":["../src/shadowRoot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAKtC,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,qBAShE;AAED;;;;GAIG;AACH,qBAAa,iBAAiB;;gBAUd,OAAO,EAAE,WAAW,CAAC,OAAO;IAyBxC,UAAU;IAIV;;OAEG;IACH,yBAAyB,CAAC,QAAQ,EAAE,KAAK,CAAC,6BAA6B;IAKvE;;OAEG;IACH,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ;IA2ClC;;;;OAIG;IACH,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM;IASzC,gBAAgB,CAAE,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM;IAU9C;;;;OAIG;IACH,uBAAuB,CAAE,EAAE,EAAE,MAAM;CAGtC"}
+{"version":3,"file":"shadowRoot.d.ts","sourceRoot":"","sources":["../src/shadowRoot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAKtC,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,qBAShE;AAED;;;;GAIG;AACH,qBAAa,iBAAiB;;gBAUd,OAAO,EAAE,WAAW,CAAC,OAAO;IAyBxC,UAAU;IAIV;;OAEG;IACH,yBAAyB,CAAC,QAAQ,EAAE,KAAK,CAAC,6BAA6B;IAIvE;;OAEG;IACH,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ;IA6ClC;;;;OAIG;IACH,wBAAwB,CAAC,OAAO,CAAC,EAAE,MAAM;IASzC,gBAAgB,CAAE,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM;IAU9C;;;;OAIG;IACH,uBAAuB,CAAE,EAAE,EAAE,MAAM;CAGtC"}

package/build/shadowRoot.js

@@ -52,7 +52,6 @@ export class ShadowRootManager {
      */
     handleBrowsingContextLoad(response) {
         this.#currentContext = response.context;
-        this.#shadowRoots.set(response.context, new Set());
     }
     /**
      * capture shadow root elements propagated through console.debug
@@ -76,10 +75,13 @@ export class ShadowRootManager {
         if (!log.source.context) {
             return;
         }
-        const shadowRootForContext = this.#shadowRoots.get(log.source.context);
-        if (!shadowRootForContext) {
-            return;
+        /**
+         * create set for shadow roots if not existing
+         */
+        if (!this.#shadowRoots.has(log.source.context)) {
+            this.#shadowRoots.set(log.source.context, new Set());
         }
+        const shadowRootForContext = this.#shadowRoots.get(log.source.context);
         const eventType = args[1].value;
         if (eventType === 'newShadowRoot' && args[2].type === 'node' && args[3].type === 'node') {
             shadowRootForContext.add(args[2].sharedId);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "webdriverio",
   "description": "Next-gen browser and mobile automation test framework for Node.js",
-  "version": "9.0.0-alpha.59+259e4a29f",
+  "version": "9.0.0-alpha.64+3cfecb6e4",
   "homepage": "https://webdriver.io",
   "author": "Christian Bromann <mail@bromann.dev>",
   "license": "MIT",
@@ -61,36 +61,36 @@
   "typeScriptVersion": "3.8.3",
   "devDependencies": {
     "@types/archiver": "^6.0.2",
-    "@types/aria-query": "^5.0.0",
-    "@types/lodash.clonedeep": "^4.5.6",
-    "@types/lodash.zip": "^4.2.6",
-    "puppeteer-core": "^22.3.0"
+    "@types/aria-query": "^5.0.4",
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.zip": "^4.2.9",
+    "puppeteer-core": "^22.6.1"
   },
   "dependencies": {
-    "@types/node": "^20.1.0",
-    "@wdio/config": "9.0.0-alpha.59+259e4a29f",
-    "@wdio/logger": "9.0.0-alpha.59+259e4a29f",
-    "@wdio/protocols": "9.0.0-alpha.59+259e4a29f",
-    "@wdio/repl": "9.0.0-alpha.59+259e4a29f",
-    "@wdio/types": "9.0.0-alpha.59+259e4a29f",
-    "@wdio/utils": "9.0.0-alpha.59+259e4a29f",
-    "archiver": "^7.0.0",
-    "aria-query": "^5.0.0",
+    "@types/node": "^20.11.30",
+    "@wdio/config": "9.0.0-alpha.64+3cfecb6e4",
+    "@wdio/logger": "9.0.0-alpha.64+3cfecb6e4",
+    "@wdio/protocols": "9.0.0-alpha.64+3cfecb6e4",
+    "@wdio/repl": "9.0.0-alpha.64+3cfecb6e4",
+    "@wdio/types": "9.0.0-alpha.64+3cfecb6e4",
+    "@wdio/utils": "9.0.0-alpha.64+3cfecb6e4",
+    "archiver": "^7.0.1",
+    "aria-query": "^5.3.0",
     "cheerio": "^1.0.0-rc.12",
     "css-shorthand-properties": "^1.1.1",
     "css-value": "^0.0.1",
-    "grapheme-splitter": "^1.0.2",
-    "htmlfy": "0.1.0",
+    "grapheme-splitter": "^1.0.4",
+    "htmlfy": "^0.2.1",
     "import-meta-resolve": "^4.0.0",
     "is-plain-obj": "^4.1.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.zip": "^4.2.0",
-    "minimatch": "^9.0.0",
-    "query-selector-shadow-dom": "^1.0.0",
-    "resq": "^1.9.1",
+    "minimatch": "^9.0.3",
+    "query-selector-shadow-dom": "^1.0.1",
+    "resq": "^1.11.0",
     "rgb2hex": "0.2.5",
-    "serialize-error": "^11.0.1",
-    "webdriver": "9.0.0-alpha.59+259e4a29f"
+    "serialize-error": "^11.0.3",
+    "webdriver": "9.0.0-alpha.64+3cfecb6e4"
   },
   "peerDependencies": {
     "puppeteer-core": "^22.3.0"
@@ -100,5 +100,5 @@
       "optional": true
     }
   },
-  "gitHead": "259e4a29f28745e0af3ca6ca3140c8cf491e3771"
+  "gitHead": "3cfecb6e45e7d38a1e86766d79d83822160c8e45"
 }