@wdio/browser-runner 8.29.5 → 8.29.7

package/build/browser/driver.js

@@ -3,7 +3,7 @@ import { webdriverMonad, sessionEnvironmentDetector } from '@wdio/utils';
 import { getEnvironmentVars } from 'webdriver';
 import { MESSAGE_TYPES } from '@wdio/types';
 import { browser } from '@wdio/globals';
-import { getCID } from './utils.js';
+import { getCID, sanitizeConsoleArgs } from './utils.js';
 import { WDIO_EVENT_NAME } from '../constants.js';
 const COMMAND_TIMEOUT = 30 * 1000; // 30s
 const CONSOLE_METHODS = ['log', 'info', 'warn', 'error', 'debug'];
@@ -147,7 +147,7 @@ export default class ProxyDriver {
                 import.meta.hot?.send(WDIO_EVENT_NAME, this.#consoleMessage({
                     name: 'consoleEvent',
                     type: method,
-                    args,
+                    args: sanitizeConsoleArgs(args),
                     cid
                 }));
                 origCommand(...args);

package/build/browser/{fixtures → integrations}/stencil.d.ts

@@ -1,18 +1,15 @@
+import type { StencilEnvironment } from '../../../stencil/index.d.ts';
 import type { NewSpecPageOptions } from '@stencil/core/internal';
-interface StencilEnvironment {
-    /**
-     * After changes have been made to a component, such as a update to a property or
-     * attribute, the test page does not automatically apply the changes. In order to
-     * wait for, and apply the update, call await `flushAll()`.
-     */
-    flushAll: () => void;
-}
 /**
  * Creates a new spec page for unit testing
  * @param opts the options to apply to the spec page that influence its configuration and operation
  * @returns the created spec page
  */
 export declare function render(opts: NewSpecPageOptions): StencilEnvironment;
+/**
+ * Helper method to wait until all Stencil components are rendered
+ */
+export declare function waitForChanges(documentElement?: HTMLElement): Promise<void>;
 /**
  * A set of flags used for bitwise calculations against {@link ComponentRuntimeMeta#$flags$}.
  *
@@ -67,5 +64,4 @@ export declare const enum CMP_FLAGS {
  * @returns a compact format for component metadata, intended for runtime use
  */
 export declare const formatComponentRuntimeMeta: (compilerMeta: any, includeMethods: boolean) => any;
-export {};
 //# sourceMappingURL=stencil.d.ts.map

package/build/browser/integrations/stencil.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../src/browser/integrations/stencil.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAgBrE,OAAO,KAAK,EAMR,kBAAkB,EACrB,MAAM,wBAAwB,CAAA;AAe/B;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,kBAAkB,GAAG,kBAAkB,CAwInE;AAsGD;;GAEG;AACH,wBAAgB,cAAc,CAAE,eAAe,cAA2B,iBA4BzE;AAED;;;;;GAKG;AACH,0BAAkB,SAAS;IACvB;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;OAEG;IACH,iBAAiB,IAAS;IAM1B;;;;;OAKG;IACH,kBAAkB,IAAS;IAC3B;;;OAGG;IACH,oBAAoB,KAAS;IAC7B;;OAEG;IACH,OAAO,KAAS;IAEhB;;;;;OAKG;IACH,wBAAwB,KAA8C;CACzE;AASD;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,iBACrB,GAAG,kBACD,OAAO,KACxB,GAyBF,CAAA"}

package/build/browser/{fixtures → integrations}/stencil.js

@@ -1,12 +1,16 @@
 import { h } from '@stencil/core';
+import { $ } from '@wdio/globals';
 /**
  * Emulate Node.js `nextTick` function in browser.
  * This is used by Stencil.js internally.
  */
 process.nextTick = (cb) => setTimeout(cb, 0);
+/**
+ * in case the user has his tsconfig.json configured to expect "jsx" to be "react"
+ */
 // @ts-expect-error
 window.React = {
-    createElement: h,
+    createElement: h
 };
 import { bootstrapLazy, flushAll, insertVdomAnnotations, registerComponents, registerModule, renderVdom, setSupportsShadowDom, startAutoApplyChanges, styles, writeTask,
 // @ts-expect-error
@@ -71,16 +75,19 @@ export function render(opts) {
         }
         registerModule(bundleId, Cstr);
         /**
-         * Register the component as a custom element
+         * Register the component as a custom element only if not already registered
          */
-        customElements.define(Cstr.COMPILER_META.tagName, Cstr);
+        if (!customElements.get(Cstr.COMPILER_META.tagName)) {
+            customElements.define(Cstr.COMPILER_META.tagName, Cstr);
+        }
         const lazyBundleRuntimeMeta = formatLazyBundleRuntimeMeta(bundleId, [Cstr.COMPILER_META]);
         return lazyBundleRuntimeMeta;
     });
     const page = {
         container,
         styles,
-        flushAll
+        flushAll,
+        unmount: () => container.remove()
     };
     if (typeof opts.direction === 'string') {
         document.documentElement.setAttribute('dir', opts.direction);
@@ -99,26 +106,35 @@ export function render(opts) {
             $flags$: 0,
             $modeName$: undefined,
             $cmpMeta$: cmpMeta,
-            $hostElement$: document.body,
+            $hostElement$: container,
         };
         renderVdom(ref, opts.template());
     }
+    else if (typeof opts.html === 'string') {
+        container.innerHTML = opts.html;
+    }
     let rootComponent = null;
     Object.defineProperty(page, 'root', {
         get() {
             if (!rootComponent) {
-                rootComponent = findRootComponent(cmpTags, document.body);
+                rootComponent = findRootComponent(cmpTags, container);
             }
             if (rootComponent) {
                 return rootComponent;
             }
-            const firstElementChild = document.body.firstElementChild;
-            if (!firstElementChild) {
-                return firstElementChild;
-            }
-            return null;
+            return container.firstElementChild;
         },
     });
+    Object.defineProperty(page, '$root', {
+        get() {
+            return $(page.root);
+        }
+    });
+    Object.defineProperty(page, '$container', {
+        get() {
+            return $(container);
+        }
+    });
     if (opts.hydrateServerSide) {
         insertVdomAnnotations(document, []);
     }
@@ -223,6 +239,35 @@ function findRootComponent(cmpTags, node) {
     }
     return null;
 }
+/**
+ * Helper method to wait until all Stencil components are rendered
+ */
+export function waitForChanges(documentElement = document.documentElement) {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => {
+            const promiseChain = [];
+            const waitComponentOnReady = (elm, promises) => {
+                if ('shadowRoot' in elm && elm.shadowRoot instanceof ShadowRoot) {
+                    waitComponentOnReady(elm.shadowRoot, promises);
+                }
+                const children = elm.children;
+                const len = children.length;
+                for (let i = 0; i < len; i++) {
+                    const childElm = children[i];
+                    const childStencilElm = childElm;
+                    if (childElm.tagName.includes('-') && typeof childStencilElm.componentOnReady === 'function') {
+                        promises.push(childStencilElm.componentOnReady().then(() => { }));
+                    }
+                    waitComponentOnReady(childElm, promises);
+                }
+            };
+            waitComponentOnReady(documentElement, promiseChain);
+            Promise.all(promiseChain)
+                .then(() => resolve())
+                .catch(() => resolve());
+        });
+    });
+}
 const formatLazyBundleRuntimeMeta = (bundleId, cmps) => {
     return [bundleId, cmps.map((cmp) => formatComponentRuntimeMeta(cmp, true))];
 };

package/build/browser/utils.d.ts

@@ -1,3 +1,4 @@
 export declare function getCID(): string | undefined;
 export declare const showPopupWarning: <T>(name: string, value: T, defaultValue?: T | undefined) => (...params: any[]) => T;
+export declare function sanitizeConsoleArgs(args: unknown[]): any[];
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/browser/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,MAAM,uBAYrB;AAED,eAAO,MAAM,gBAAgB,YAAa,MAAM,yDAA6C,GAAG,EAAE,MAYjG,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/browser/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,MAAM,uBAYrB;AAED,eAAO,MAAM,gBAAgB,YAAa,MAAM,yDAA6C,GAAG,EAAE,MAYjG,CAAA;AAED,wBAAgB,mBAAmB,CAAE,IAAI,EAAE,OAAO,EAAE,SAyBnD"}

package/build/browser/utils.js

@@ -22,3 +22,27 @@ export const showPopupWarning = (name, value, defaultValue) => (...params) => {
   \`\`\``);
     return value;
 };
+export function sanitizeConsoleArgs(args) {
+    return args.map((arg) => {
+        try {
+            if (arg && typeof arg.elementId === 'string') {
+                return `WebdriverIO.Element<${arg.elementId}>`;
+            }
+            if (arg && typeof arg.sessionId === 'string') {
+                return `WebdriverIO.Browser<${arg.sessionId}>`;
+            }
+        }
+        catch (err) {
+            // ignore
+        }
+        if (arg instanceof HTMLElement ||
+            (arg && typeof arg === 'object' && 'then' in arg && typeof arg.then === 'function') ||
+            typeof arg === 'function') {
+            return arg.toString();
+        }
+        if (arg instanceof Error) {
+            return arg.stack;
+        }
+        return arg;
+    });
+}

package/build/vite/frameworks/stencil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../src/vite/frameworks/stencil.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,MAAM,CAAA;AAahD,wBAAsB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,oBAAoB,oBAEhG;AAED,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,MAAM,yBAwBvD;AAwID;;GAEG;AACH,wBAAsB,mBAAmB,CAAC,OAAO,EAAE,MAAM,gBAaxD"}
+{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../src/vite/frameworks/stencil.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,MAAM,CAAA;AAahD,wBAAsB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,oBAAoB,oBAEhG;AAED,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,MAAM,yBAwBvD;AA2ID;;GAEG;AACH,wBAAsB,mBAAmB,CAAC,OAAO,EAAE,MAAM,gBAaxD"}

package/build/vite/frameworks/stencil.js

@@ -30,7 +30,7 @@ export async function optimizeForStencil(rootDir) {
 }
 async function stencilVitePlugin(rootDir) {
     const { transpileSync, ts } = await import('@stencil/core/compiler/stencil.js');
-    const stencilHelperPath = path.resolve(__dirname, '..', '..', 'browser', 'fixtures', 'stencil.js');
+    const stencilHelperPath = path.resolve(__dirname, '..', '..', 'browser', 'integrations', 'stencil.js');
     return {
         name: 'wdio-stencil',
         enforce: 'pre',
@@ -56,15 +56,8 @@ async function stencilVitePlugin(rootDir) {
                 const stencilHelperImport = staticImports.find((imp) => imp.specifier === '@wdio/browser-runner/stencil');
                 if (stencilHelperImport) {
                     const imports = parseStaticImport(stencilHelperImport);
-                    const hasHImport = stencilImports.find((imp) => 'h' in (imp.namedImports || {}));
-                    const hasFragmentImport = stencilImports.find((imp) => 'Fragment' in (imp.namedImports || {}));
                     if ('render' in (imports.namedImports || {})) {
-                        if (!hasHImport) {
-                            code = `import { h } from '@stencil/core';\n${code}`;
-                        }
-                        if (!hasFragmentImport) {
-                            code = `import { Fragment } from '@stencil/core';\n${code}`;
-                        }
+                        code = injectStencilImports(code, stencilImports);
                     }
                 }
                 return { code };
@@ -97,14 +90,7 @@ async function stencilVitePlugin(rootDir) {
              * StencilJS does not import the `h` or `Fragment` function by default. We need to add it so the user
              * doesn't need to.
              */
-            const hasRenderFunctionImport = stencilImports.some((imp) => 'h' in (imp.namedImports || {}));
-            if (!hasRenderFunctionImport) {
-                transformedCode = `import { h } from '@stencil/core';\n${transformedCode}`;
-            }
-            const hasFragmentImport = stencilImports.some((imp) => 'Fragment' in (imp.namedImports || {}));
-            if (!hasFragmentImport) {
-                transformedCode = `import { Fragment } from '@stencil/core';\n${transformedCode}`;
-            }
+            transformedCode = injectStencilImports(transformedCode, stencilImports);
             return {
                 ...transpiledCode,
                 code: transformedCode,
@@ -113,6 +99,21 @@ async function stencilVitePlugin(rootDir) {
         }
     };
 }
+/**
+ * StencilJS does not import the `h` or `Fragment` function by default. We need to add it so the user
+ * doesn't need to.
+ */
+function injectStencilImports(code, imports) {
+    const hasRenderFunctionImport = imports.some((imp) => 'h' in (imp.namedImports || {}));
+    if (!hasRenderFunctionImport) {
+        code = `import { h } from '@stencil/core/internal/client';\n${code}`;
+    }
+    const hasFragmentImport = imports.some((imp) => 'Fragment' in (imp.namedImports || {}));
+    if (!hasFragmentImport) {
+        code = `import { Fragment } from '@stencil/core/internal/client';\n${code}`;
+    }
+    return code;
+}
 let _tsCompilerOptions = null;
 /**
  * Read the TypeScript compiler configuration file from disk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wdio/browser-runner",
-  "version": "8.29.5",
+  "version": "8.29.7",
   "description": "A WebdriverIO runner to run unit tests tests in the browser.",
   "author": "Christian Bromann <mail@bromann.dev>",
   "homepage": "https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-browser-runner",
@@ -37,12 +37,12 @@
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@types/istanbul-lib-source-maps": "^4.0.1",
     "@vitest/spy": "^1.0.1",
-    "@wdio/globals": "8.29.3",
-    "@wdio/local-runner": "8.29.5",
+    "@wdio/globals": "8.29.7",
+    "@wdio/local-runner": "8.29.7",
     "@wdio/logger": "8.28.0",
     "@wdio/mocha-framework": "8.29.3",
-    "@wdio/protocols": "^8.24.12",
-    "@wdio/runner": "8.29.5",
+    "@wdio/protocols": "8.29.7",
+    "@wdio/runner": "8.29.7",
     "@wdio/types": "8.29.1",
     "@wdio/utils": "8.29.3",
     "deepmerge-ts": "^5.0.0",
@@ -62,8 +62,8 @@
     "vite": "~4.5.0",
     "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-top-level-await": "^1.3.0",
-    "webdriver": "8.29.3",
-    "webdriverio": "8.29.3"
+    "webdriver": "8.29.7",
+    "webdriverio": "8.29.7"
   },
   "scripts": {
     "prepare": "rimraf node_modules/@wdio/config node_modules/@wdio/repl node_modules/@wdio/utils"
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "35c91fce089a8aff2dc3ec1407d6b91bc5cf0c76"
+  "gitHead": "1c7195268663df56856494c69d7bd655c834a368"
 }

package/stencil/index.d.ts

@@ -2,7 +2,7 @@
 /**
  * Options pertaining to the creation and functionality of a {@link SpecPage}
  */
-interface RenderOptions {
+export interface RenderOptions {
     /**
      * An array of components to test. Component classes can be imported into the spec file, then their reference should be added to the `component` array in order to be used throughout the test.
      */
@@ -17,6 +17,10 @@ interface RenderOptions {
      * It will render the specified template (JSX) into `document.body`.
      */
     template?: () => any;
+    /**
+     * The initial HTML used to generate the test. This can be useful to construct a collection of components working together, and assign HTML attributes.
+     */
+    html?: string;
     /**
      * Sets the mocked `lang` attribute on `<html>`.
      */
@@ -24,25 +28,17 @@ interface RenderOptions {
     /**
      * Useful for debugging hydrating components client-side. Sets that the `html` option already includes annotated prerender attributes and comments.
      */
-    hydrateClientSide?: boolean;
+    // hydrateClientSide?: boolean;
     /**
      * Useful for debugging hydrating components server-side. The output HTML will also include prerender annotations.
      */
-    hydrateServerSide?: boolean;
-    /**
-     * Sets the mocked `document.referrer`.
-     */
-    referrer?: string;
-    /**
-     * Manually set if the mocked document supports Shadow DOM or not. Default is `true`.
-     */
-    supportsShadowDom?: boolean;
+    // hydrateServerSide?: boolean;
     /**
      * When a component is pre-rendered it includes HTML annotations, such as `s-id` attributes and `<!-t.0->` comments. This information is used by clientside hydrating. Default is `false`.
      */
-    includeAnnotations?: boolean;
+    // includeAnnotations?: boolean;
     /**
-     * By default, any changes to component properties and attributes must `page.waitForChanges()` in order to test the updates. As an option, `autoAppluChanges` continuously flushes the queue on the background. Default is `false`.
+     * By default, any changes to component properties and attributes must `page.waitForChanges()` in order to test the updates. As an option, `autoApplyChanges` continuously flushes the queue on the background. Default is `false`.
      */
     autoApplyChanges?: boolean;
     /**
@@ -55,10 +51,10 @@ interface RenderOptions {
      * When `true` all `BuildConditionals` will be assigned to the global testing `BUILD` object, regardless of their
      * value. When `false`, only `BuildConditionals` with a value of `true` will be assigned to the `BUILD` object.
      */
-    strictBuild?: boolean;
+    // strictBuild?: boolean;
 }
 
-interface StencilEnvironment {
+export interface StencilEnvironment {
     /**
      * After changes have been made to a component, such as a update to a property or
      * attribute, the test page does not automatically apply the changes. In order to
@@ -70,13 +66,36 @@ interface StencilEnvironment {
      */
     styles: Record<string, string>
     /**
-     * Container element in which the template is being rendered.
+     * Container element in which the template is being rendered into.
      */
     container: HTMLElement
+    /**
+     * The container element as WebdriverIO element.
+     */
+    $container: WebdriverIO.Element
     /**
      * The root component of the template.
      */
     root: HTMLElement
+    /**
+     * The root component as WebdriverIO element.
+     */
+    $root: WebdriverIO.Element
+    /**
+     * Removes the container element from the DOM.
+     */
+    unmount: () => void
 }
 
+/**
+ * Renders a Stencil component for testing into the page.
+ * @param opts options for the test page
+ * @returns a testing environment for the rendered component
+ */
 export function render(opts: RenderOptions): StencilEnvironment
+
+/**
+ * Waits for the next update cycle to complete.
+ * @returns a promise that resolves when the update cycle completes
+ */
+export function waitForChanges(): Promise<void>

package/build/browser/fixtures/stencil.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../src/browser/fixtures/stencil.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAKR,kBAAkB,EACrB,MAAM,wBAAwB,CAAA;AAe/B,UAAU,kBAAkB;IACxB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,kBAAkB,GAAG,kBAAkB,CA4HnE;AAsGD;;;;;GAKG;AACH,0BAAkB,SAAS;IACvB;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;OAEG;IACH,iBAAiB,IAAS;IAM1B;;;;;OAKG;IACH,kBAAkB,IAAS;IAC3B;;;OAGG;IACH,oBAAoB,KAAS;IAC7B;;OAEG;IACH,OAAO,KAAS;IAEhB;;;;;OAKG;IACH,wBAAwB,KAA8C;CACzE;AASD;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,iBACrB,GAAG,kBACD,OAAO,KACxB,GAyBF,CAAA"}