@wdio/browser-runner 8.14.3 → 8.15.0

package/README.md

@@ -57,7 +57,7 @@ The Browser runner allows following configurations:
 
 If you test components using one of the mentioned frameworks above, you can define a preset that ensures everything is configured out of the box. This option can't be used together with `viteConfig`.
 
-__Type:__ `vue` | `svelte` | `solid` | `react` | `preact`<br />
+__Type:__ `vue` | `svelte` | `solid` | `react` | `preact` | `stencil`<br />
 __Example:__
 
 ```js title="wdio.conf.js"

package/build/browser/mock.d.ts

@@ -19,6 +19,7 @@ export declare const pathToFileURL: () => string;
 export declare const fileURLToPath: () => string;
 export declare const dirname: () => string;
 export declare const resolve: () => string;
+export declare const download: () => string;
 export declare const sep = "/";
 export declare const start: () => void;
 export declare const install: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../src/browser/mock.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,aAAa;;;CAIzB,CAAA;AAED,eAAO,MAAM,iBAAiB,SAAK,CAAA;AACnC,eAAO,MAAM,eAAe,IAAK,CAAA;AACjC,qBAAa,YAAY;CAAG;AAC5B,eAAO,MAAM,GAAG;;;;;CAAa,CAAA;AAC7B,eAAO,MAAM,aAAa,cAAW,CAAA;AACrC,eAAO,MAAM,aAAa,cAAW,CAAA;AACrC,eAAO,MAAM,OAAO,cAAW,CAAA;AAC/B,eAAO,MAAM,OAAO,cAAW,CAAA;AAC/B,eAAO,MAAM,GAAG,MAAM,CAAA;AACtB,eAAO,MAAM,KAAK,YAAW,CAAA;AAC7B,eAAO,MAAM,OAAO,YAAW,CAAA;AAC/B,eAAO,MAAM,qBAAqB,YAAW,CAAA;AAC7C,eAAO,MAAM,OAAO,YAAW,CAAA;AAC/B,eAAO,MAAM,oBAAoB,YAAW,CAAA;AAC5C,eAAO,MAAM,WAAW,YAAW,CAAA;AACnC,eAAO,MAAM,cAAc,YAAW,CAAA;AACtC,eAAO,MAAM,oBAAoB,YAAW,CAAA;AAC5C,eAAO,MAAM,qBAAqB,YAAW,CAAA;AAC7C,eAAO,MAAM,IAAI,YAAY,CAAA;AAC7B,eAAO,MAAM,IAAI,YAAW,CAAA;AAC5B,eAAO,MAAM,aAAa,YAAW,CAAA;;AACrC,wBAAuB"}
+{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../src/browser/mock.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,aAAa;;;CAIzB,CAAA;AAED,eAAO,MAAM,iBAAiB,SAAK,CAAA;AACnC,eAAO,MAAM,eAAe,IAAK,CAAA;AACjC,qBAAa,YAAY;CAAG;AAC5B,eAAO,MAAM,GAAG;;;;;CAAa,CAAA;AAC7B,eAAO,MAAM,aAAa,cAAW,CAAA;AACrC,eAAO,MAAM,aAAa,cAAW,CAAA;AACrC,eAAO,MAAM,OAAO,cAAW,CAAA;AAC/B,eAAO,MAAM,OAAO,cAAW,CAAA;AAC/B,eAAO,MAAM,QAAQ,cAAW,CAAA;AAChC,eAAO,MAAM,GAAG,MAAM,CAAA;AACtB,eAAO,MAAM,KAAK,YAAW,CAAA;AAC7B,eAAO,MAAM,OAAO,YAAW,CAAA;AAC/B,eAAO,MAAM,qBAAqB,YAAW,CAAA;AAC7C,eAAO,MAAM,OAAO,YAAW,CAAA;AAC/B,eAAO,MAAM,oBAAoB,YAAW,CAAA;AAC5C,eAAO,MAAM,WAAW,YAAW,CAAA;AACnC,eAAO,MAAM,cAAc,YAAW,CAAA;AACtC,eAAO,MAAM,oBAAoB,YAAW,CAAA;AAC5C,eAAO,MAAM,qBAAqB,YAAW,CAAA;AAC7C,eAAO,MAAM,IAAI,YAAY,CAAA;AAC7B,eAAO,MAAM,IAAI,YAAW,CAAA;AAC5B,eAAO,MAAM,aAAa,YAAW,CAAA;;AACrC,wBAAuB"}

package/build/browser/mock.js

@@ -15,6 +15,7 @@ export const pathToFileURL = () => '';
 export const fileURLToPath = () => '';
 export const dirname = () => '';
 export const resolve = () => '';
+export const download = () => '';
 export const sep = '/';
 export const start = () => { };
 export const install = () => { };

package/build/types.d.ts

@@ -8,7 +8,7 @@ declare global {
         wdioDebugContinue: (value: unknown) => void;
     }
 }
-export type FrameworkPreset = 'react' | 'preact' | 'vue' | 'svelte' | 'lit' | 'solid';
+export type FrameworkPreset = 'react' | 'preact' | 'vue' | 'svelte' | 'lit' | 'solid' | 'stencil';
 type Arrayable<T> = T | Array<T>;
 type CoverageReporter = 'clover' | 'cobertura' | 'html-spa' | 'html' | 'json-summary' | 'json' | 'lcov' | 'lcovonly' | 'none' | 'teamcity' | 'text-lcov' | 'text-summary' | 'text';
 export interface CoverageOptions extends Omit<IstanbulPluginOptions, 'cypress' | 'checkProd' | 'forceBuildInstrument'> {

package/build/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AACnD,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AAEjE,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,WAAW,EAAE,WAAW,CAAA;QACxB,iBAAiB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;KAC9C;CACJ;AAED,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA;AACrF,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;AAChC,KAAK,gBAAgB,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,MAAM,CAAA;AAClL,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,WAAW,GAAG,sBAAsB,CAAC;IAClH;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACtC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,oBAAoB;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,CAAC,CAAC,GAAG,EAAE,SAAS,KAAK,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,CAAA;IAC/F;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,OAAQ,SAAQ,OAAO,CAAC,gBAAgB;IACrD,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,GAAG,CAAA;IACT,GAAG,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,EAAE,OAAO,CAAC,UAAU,CAAA;IAC1B,YAAY,EAAE,YAAY,CAAC,gBAAgB,CAAA;IAC3C,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,cAAc,EAAE,CAAC,CAAC,GAAG,OAAO,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AACnD,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AAEjE,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,WAAW,EAAE,WAAW,CAAA;QACxB,iBAAiB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;KAC9C;CACJ;AAED,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,CAAA;AACjG,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;AAChC,KAAK,gBAAgB,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,cAAc,GAAG,MAAM,CAAA;AAClL,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,WAAW,GAAG,sBAAsB,CAAC;IAClH;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAA;IACtC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,oBAAoB;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,CAAC,CAAC,GAAG,EAAE,SAAS,KAAK,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,CAAA;IAC/F;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,OAAQ,SAAQ,OAAO,CAAC,gBAAgB;IACrD,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,GAAG,CAAA;IACT,GAAG,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,SAAS,CAAA;IACf,MAAM,EAAE,OAAO,CAAC,UAAU,CAAA;IAC1B,YAAY,EAAE,YAAY,CAAC,gBAAgB,CAAA;IAC3C,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,OAAO,CAAA;CACzB;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,cAAc,EAAE,CAAC,CAAC,GAAG,OAAO,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC"}

package/build/vite/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/vite/constants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AAGxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAgB1F,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,YAAY,CAkCrD,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/vite/constants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AAGxC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAElD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAiB1F,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,YAAY,CAkCrD,CAAA"}

package/build/vite/constants.js

@@ -16,6 +16,7 @@ export const PRESET_DEPENDENCIES = {
     vue: ['@vitejs/plugin-vue', 'default', undefined],
     svelte: ['@sveltejs/vite-plugin-svelte', 'svelte', undefined],
     solid: ['vite-plugin-solid', 'default', undefined],
+    stencil: undefined,
     lit: undefined
 };
 export const DEFAULT_VITE_CONFIG = {

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

@@ -0,0 +1,71 @@
+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;
+/**
+ * A set of flags used for bitwise calculations against {@link ComponentRuntimeMeta#$flags$}.
+ *
+ * These flags should only be used in conjunction with {@link ComponentRuntimeMeta#$flags$}.
+ * They should _not_ be used for calculations against other fields/numbers
+ */
+export declare const enum CMP_FLAGS {
+    /**
+     * Used to determine if a component is using the shadow DOM.
+     * e.g. `shadow: true | {}` is set on the `@Component()` decorator
+     */
+    shadowDomEncapsulation = 1,
+    /**
+     * Used to determine if a component is using scoped stylesheets
+     * e.g. `scoped: true` is set on the `@Component()` decorator
+     */
+    scopedCssEncapsulation = 2,
+    /**
+     * Used to determine if a component does not use the shadow DOM _and_ has `<slot/>` tags in its markup.
+     */
+    hasSlotRelocation = 4,
+    /**
+     * Determines if a shim for the shadow DOM is necessary.
+     *
+     * The shim should only be needed if a component requires {@link shadowDomEncapsulation} and if any output
+     * target-specific criteria are met. Refer to this flag's usage to determine each output target's criteria.
+     */
+    needsShadowDomShim = 8,
+    /**
+     * Determines if `delegatesFocus` is enabled for a component that uses the shadow DOM.
+     * e.g. `shadow: { delegatesFocus: true }` is set on the `@Component()` decorator
+     */
+    shadowDelegatesFocus = 16,
+    /**
+     * Determines if `mode` is set on the `@Component()` decorator
+     */
+    hasMode = 32,
+    /**
+     * Determines if styles must be scoped due to either:
+     * 1. A component is using scoped stylesheets ({@link scopedCssEncapsulation})
+     * 2. A component is using the shadow DOM _and_ the output target's rules for requiring a shadow DOM shim have been
+     * met ({@link needsShadowDomShim})
+     */
+    needsScopedEncapsulation = 10
+}
+/**
+ * Transform metadata about a component from the compiler to a compact form for
+ * use at runtime.
+ *
+ * @param compilerMeta component metadata gathered during compilation
+ * @param includeMethods include methods in the component's members or not
+ * @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/vite/frameworks/fixtures/stencil.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../../src/vite/frameworks/fixtures/stencil.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAKR,kBAAkB,EACrB,MAAM,wBAAwB,CAAA;AAgB/B,UAAU,kBAAkB;IACxB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,kBAAkB,GAAG,kBAAkB,CA0HnE;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"}

package/build/vite/frameworks/fixtures/stencil.js

@@ -0,0 +1,380 @@
+import { h } from '@stencil/core';
+process.nextTick = (cb) => setTimeout(cb, 0);
+// @ts-expect-error
+window.React = {
+    createElement: h,
+};
+import { bootstrapLazy, flushAll, insertVdomAnnotations, registerComponents, registerModule, renderVdom, setSupportsShadowDom, startAutoApplyChanges, styles, win, writeTask,
+// @ts-expect-error
+ } from '@stencil/core/internal/testing/index.js';
+/**
+ * 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 function render(opts) {
+    if (!opts) {
+        throw new Error('NewSpecPageOptions required');
+    }
+    const stencilStage = document.querySelector('stencil-stage');
+    if (stencilStage) {
+        stencilStage.remove();
+    }
+    const stage = document.createElement('stencil-stage');
+    document.body.appendChild(stage);
+    if (Array.isArray(opts.components)) {
+        registerComponents(opts.components);
+    }
+    if (opts.hydrateClientSide) {
+        opts.includeAnnotations = true;
+    }
+    if (opts.hydrateServerSide) {
+        opts.includeAnnotations = true;
+        setSupportsShadowDom(false);
+    }
+    else {
+        opts.includeAnnotations = !!opts.includeAnnotations;
+        if (opts.supportsShadowDom === false) {
+            setSupportsShadowDom(false);
+        }
+        else {
+            setSupportsShadowDom(true);
+        }
+    }
+    const cmpTags = new Set();
+    const doc = win.document;
+    const page = {
+        win: win,
+        doc: doc,
+        body: stage,
+        styles: styles
+    };
+    const lazyBundles = opts.components.map((Cstr) => {
+        // eslint-disable-next-line eqeqeq
+        if (Cstr.COMPILER_META == null) {
+            throw new Error('Invalid component class: Missing static "COMPILER_META" property.');
+        }
+        cmpTags.add(Cstr.COMPILER_META.tagName);
+        Cstr.isProxied = false;
+        proxyComponentLifeCycles(Cstr);
+        const bundleId = `${Cstr.COMPILER_META.tagName}.${Math.round(Math.random() * 899999) + 100000}`;
+        const stylesMeta = Cstr.COMPILER_META.styles;
+        if (Array.isArray(stylesMeta)) {
+            if (stylesMeta.length > 1) {
+                const styles = {};
+                stylesMeta.forEach((style) => {
+                    styles[style.modeName] = style.styleStr;
+                });
+                Cstr.style = styles;
+            }
+            else if (stylesMeta.length === 1) {
+                Cstr.style = stylesMeta[0].styleStr;
+            }
+        }
+        registerModule(bundleId, Cstr);
+        const lazyBundleRuntimeMeta = formatLazyBundleRuntimeMeta(bundleId, [Cstr.COMPILER_META]);
+        return lazyBundleRuntimeMeta;
+    });
+    if (typeof opts.direction === 'string') {
+        page.doc.documentElement.setAttribute('dir', opts.direction);
+    }
+    if (typeof opts.language === 'string') {
+        page.doc.documentElement.setAttribute('lang', opts.language);
+    }
+    bootstrapLazy(lazyBundles);
+    if (typeof opts.template === 'function') {
+        const cmpMeta = {
+            $flags$: 0,
+            $tagName$: 'body',
+        };
+        const ref = {
+            $ancestorComponent$: undefined,
+            $flags$: 0,
+            $modeName$: undefined,
+            $cmpMeta$: cmpMeta,
+            $hostElement$: page.body,
+        };
+        renderVdom(ref, opts.template());
+    }
+    let rootComponent = null;
+    Object.defineProperty(page, 'root', {
+        get() {
+            if (!rootComponent) {
+                rootComponent = findRootComponent(cmpTags, page.body);
+            }
+            if (rootComponent) {
+                return rootComponent;
+            }
+            const firstElementChild = page.body.firstElementChild;
+            if (!firstElementChild) {
+                return firstElementChild;
+            }
+            return null;
+        },
+    });
+    if (opts.hydrateServerSide) {
+        insertVdomAnnotations(doc, []);
+    }
+    if (opts.autoApplyChanges) {
+        startAutoApplyChanges();
+    }
+    flushAll();
+    return { flushAll };
+}
+/**
+ * A helper method that proxies Stencil lifecycle methods by mutating the provided component class
+ * @param Cstr the component class whose lifecycle methods will be proxied
+ */
+function proxyComponentLifeCycles(Cstr) {
+    // we may have called this function on the class before, reset the state of the class
+    if (typeof Cstr.prototype?.__componentWillLoad === 'function') {
+        Cstr.prototype.componentWillLoad = Cstr.prototype.__componentWillLoad;
+        Cstr.prototype.__componentWillLoad = null;
+    }
+    if (typeof Cstr.prototype?.__componentWillUpdate === 'function') {
+        Cstr.prototype.componentWillUpdate = Cstr.prototype.__componentWillUpdate;
+        Cstr.prototype.__componentWillUpdate = null;
+    }
+    if (typeof Cstr.prototype?.__componentWillRender === 'function') {
+        Cstr.prototype.componentWillRender = Cstr.prototype.__componentWillRender;
+        Cstr.prototype.__componentWillRender = null;
+    }
+    // the class should be in a known 'good' state to proxy functions
+    if (typeof Cstr.prototype?.componentWillLoad === 'function') {
+        Cstr.prototype.__componentWillLoad = Cstr.prototype.componentWillLoad;
+        Cstr.prototype.componentWillLoad = function () {
+            // @ts-expect-error
+            const result = this.__componentWillLoad();
+            if (result && typeof result.then === 'function') {
+                writeTask(() => result);
+            }
+            else {
+                writeTask(() => Promise.resolve());
+            }
+            return result;
+        };
+    }
+    if (typeof Cstr.prototype?.componentWillUpdate === 'function') {
+        Cstr.prototype.__componentWillUpdate = Cstr.prototype.componentWillUpdate;
+        Cstr.prototype.componentWillUpdate = function () {
+            // @ts-expect-error
+            const result = this.__componentWillUpdate();
+            if (result && typeof result.then === 'function') {
+                writeTask(() => result);
+            }
+            else {
+                writeTask(() => Promise.resolve());
+            }
+            return result;
+        };
+    }
+    if (typeof Cstr.prototype?.componentWillRender === 'function') {
+        Cstr.prototype.__componentWillRender = Cstr.prototype.componentWillRender;
+        Cstr.prototype.componentWillRender = function () {
+            // @ts-expect-error
+            const result = this.__componentWillRender();
+            if (result && typeof result.then === 'function') {
+                writeTask(() => result);
+            }
+            else {
+                writeTask(() => Promise.resolve());
+            }
+            return result;
+        };
+    }
+}
+/**
+ * Return the first Element whose {@link Element#nodeName} property matches a tag found in the provided `cmpTags`
+ * argument.
+ *
+ * If the `nodeName` property on the element matches any of the names found in the provided `cmpTags` argument, that
+ * element is returned. If no match is found on the current element, the children will be inspected in a depth-first
+ * search manner. This process continues until either:
+ * - an element is found (and execution ends)
+ * - no element is found after an exhaustive search
+ *
+ * @param cmpTags component tag names to use in the match criteria
+ * @param node the node whose children are to be inspected
+ * @returns An element whose name matches one of the strings in the provided `cmpTags`. If no match is found, `null` is
+ * returned
+ */
+function findRootComponent(cmpTags, node) {
+    if (node) {
+        const children = node.children;
+        const childrenLength = children.length;
+        for (let i = 0; i < childrenLength; i++) {
+            const elm = children[i];
+            if (cmpTags.has(elm.nodeName.toLowerCase())) {
+                return elm;
+            }
+        }
+        for (let i = 0; i < childrenLength; i++) {
+            const r = findRootComponent(cmpTags, children[i]);
+            if (r) {
+                return r;
+            }
+        }
+    }
+    return null;
+}
+const formatLazyBundleRuntimeMeta = (bundleId, cmps) => {
+    return [bundleId, cmps.map((cmp) => formatComponentRuntimeMeta(cmp, true))];
+};
+/**
+ * Transform metadata about a component from the compiler to a compact form for
+ * use at runtime.
+ *
+ * @param compilerMeta component metadata gathered during compilation
+ * @param includeMethods include methods in the component's members or not
+ * @returns a compact format for component metadata, intended for runtime use
+ */
+export const formatComponentRuntimeMeta = (compilerMeta, includeMethods) => {
+    let flags = 0;
+    if (compilerMeta.encapsulation === 'shadow') {
+        flags |= 1 /* CMP_FLAGS.shadowDomEncapsulation */;
+        if (compilerMeta.shadowDelegatesFocus) {
+            flags |= 16 /* CMP_FLAGS.shadowDelegatesFocus */;
+        }
+    }
+    else if (compilerMeta.encapsulation === 'scoped') {
+        flags |= 2 /* CMP_FLAGS.scopedCssEncapsulation */;
+    }
+    if (compilerMeta.encapsulation !== 'shadow' && compilerMeta.htmlTagNames.includes('slot')) {
+        flags |= 4 /* CMP_FLAGS.hasSlotRelocation */;
+    }
+    if (compilerMeta.hasMode) {
+        flags |= 32 /* CMP_FLAGS.hasMode */;
+    }
+    const members = formatComponentRuntimeMembers(compilerMeta, includeMethods);
+    const hostListeners = formatHostListeners(compilerMeta);
+    return trimFalsy([
+        flags,
+        compilerMeta.tagName,
+        Object.keys(members).length > 0 ? members : undefined,
+        hostListeners.length > 0 ? hostListeners : undefined,
+    ]);
+};
+const formatComponentRuntimeMembers = (compilerMeta, includeMethods = true) => {
+    return {
+        ...formatPropertiesRuntimeMember(compilerMeta.properties),
+        ...formatStatesRuntimeMember(compilerMeta.states),
+        ...(includeMethods ? formatMethodsRuntimeMember(compilerMeta.methods) : {}),
+    };
+};
+const formatPropertiesRuntimeMember = (properties) => {
+    const runtimeMembers = {};
+    properties.forEach((member) => {
+        runtimeMembers[member.name] = trimFalsy([
+            /**
+             * [0] member type
+             */
+            formatFlags(member),
+            formatAttrName(member),
+        ]);
+    });
+    return runtimeMembers;
+};
+const formatFlags = (compilerProperty) => {
+    let type = formatPropType(compilerProperty.type);
+    if (compilerProperty.mutable) {
+        type |= 1024 /* MEMBER_FLAGS.Mutable */;
+    }
+    if (compilerProperty.reflect) {
+        type |= 512 /* MEMBER_FLAGS.ReflectAttr */;
+    }
+    return type;
+};
+const formatAttrName = (compilerProperty) => {
+    if (typeof compilerProperty.attribute === 'string') {
+        // string attr name means we should observe this attribute
+        if (compilerProperty.name === compilerProperty.attribute) {
+            // property name and attribute name are the exact same
+            // true value means to use the property name for the attribute name
+            return undefined;
+        }
+        // property name and attribute name are not the same
+        // so we need to return the actual string value
+        // example: "multiWord" !== "multi-word"
+        return compilerProperty.attribute;
+    }
+    // we shouldn't even observe an attribute for this property
+    return undefined;
+};
+const formatPropType = (type) => {
+    if (type === 'string') {
+        return 1 /* MEMBER_FLAGS.String */;
+    }
+    if (type === 'number') {
+        return 2 /* MEMBER_FLAGS.Number */;
+    }
+    if (type === 'boolean') {
+        return 4 /* MEMBER_FLAGS.Boolean */;
+    }
+    if (type === 'any') {
+        return 8 /* MEMBER_FLAGS.Any */;
+    }
+    return 16 /* MEMBER_FLAGS.Unknown */;
+};
+const formatStatesRuntimeMember = (states) => {
+    const runtimeMembers = {};
+    states.forEach((member) => {
+        runtimeMembers[member.name] = [
+            32 /* MEMBER_FLAGS.State */,
+        ];
+    });
+    return runtimeMembers;
+};
+const formatMethodsRuntimeMember = (methods) => {
+    const runtimeMembers = {};
+    methods.forEach((member) => {
+        runtimeMembers[member.name] = [
+            64 /* MEMBER_FLAGS.Method */,
+        ];
+    });
+    return runtimeMembers;
+};
+const formatHostListeners = (compilerMeta) => {
+    return compilerMeta.listeners.map((compilerListener) => {
+        const hostListener = [
+            computeListenerFlags(compilerListener),
+            compilerListener.name,
+            compilerListener.method,
+        ];
+        return hostListener;
+    });
+};
+const computeListenerFlags = (listener) => {
+    let flags = 0;
+    if (listener.capture) {
+        flags |= 2 /* LISTENER_FLAGS.Capture */;
+    }
+    if (listener.passive) {
+        flags |= 1 /* LISTENER_FLAGS.Passive */;
+    }
+    switch (listener.target) {
+        case 'document':
+            flags |= 4 /* LISTENER_FLAGS.TargetDocument */;
+            break;
+        case 'window':
+            flags |= 8 /* LISTENER_FLAGS.TargetWindow */;
+            break;
+        case 'body':
+            flags |= 16 /* LISTENER_FLAGS.TargetBody */;
+            break;
+        case 'parent':
+            flags |= 32 /* LISTENER_FLAGS.TargetParent */;
+            break;
+    }
+    return flags;
+};
+const trimFalsy = (data) => {
+    const arr = data;
+    for (let i = arr.length - 1; i >= 0; i--) {
+        if (arr[i]) {
+            break;
+        }
+        // if falsy, safe to pop()
+        arr.pop();
+    }
+    return arr;
+};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vite/frameworks/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AAKxC,wBAA8B,gBAAgB,CAAE,OAAO,EAAE,WAAW,CAAC,oBAAoB,EAAE,MAAM,EAAE,OAAO,CAAC,UAAU,yBAepH"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vite/frameworks/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAA;AAMxC,wBAA8B,gBAAgB,CAAE,OAAO,EAAE,WAAW,CAAC,oBAAoB,EAAE,MAAM,EAAE,OAAO,CAAC,UAAU,yBAmBpH"}

package/build/vite/frameworks/index.js

@@ -1,5 +1,6 @@
 import { isNuxtFramework, optimizeForNuxt } from './nuxt.js';
 import { isUsingTailwindCSS, optimizeForTailwindCSS } from './tailwindcss.js';
+import { isUsingStencilJS, optimizeForStencil } from './stencil.js';
 export default async function updateViteConfig(options, config) {
     const optimizations = {};
     const rootDir = options.rootDir || config.rootDir || process.cwd();
@@ -11,5 +12,8 @@ export default async function updateViteConfig(options, config) {
     if (isTailwind) {
         Object.assign(optimizations, await optimizeForTailwindCSS(rootDir));
     }
+    if (isUsingStencilJS(rootDir, options)) {
+        Object.assign(optimizations, await optimizeForStencil(rootDir));
+    }
     return optimizations;
 }

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

@@ -0,0 +1,4 @@
+import type { InlineConfig } from 'vite';
+export declare function isUsingStencilJS(rootDir: string, options: WebdriverIO.BrowserRunnerOptions): boolean;
+export declare function optimizeForStencil(rootDir: string): Promise<InlineConfig>;
+//# sourceMappingURL=stencil.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../src/vite/frameworks/stencil.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,MAAM,CAAA;AAMhD,wBAAgB,gBAAgB,CAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,oBAAoB,WAE3F;AAED,wBAAsB,kBAAkB,CAAE,OAAO,EAAE,MAAM,yBAiBxD"}

package/build/vite/frameworks/stencil.js

@@ -0,0 +1,65 @@
+import path from 'node:path';
+import url from 'node:url';
+import { hasFileByExtensions } from '../utils.js';
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+export function isUsingStencilJS(rootDir, options) {
+    return Boolean(options.preset === 'stencil' || hasFileByExtensions(path.join(rootDir, 'stencil.config')));
+}
+export async function optimizeForStencil(rootDir) {
+    const stencilConfig = await import(path.join(rootDir, 'stencil.config.ts')).catch(() => ({ config: {} }));
+    const stencilPlugins = stencilConfig.config.plugins;
+    const stencilOptimizations = {
+        plugins: [await stencilVitePlugin(rootDir)]
+    };
+    if (stencilPlugins) {
+        const esbuildPlugin = stencilPlugins.find((plugin) => plugin.name === 'esbuild-plugin');
+        if (esbuildPlugin) {
+            stencilOptimizations.optimizeDeps = {
+                include: esbuildPlugin.options.include
+            };
+        }
+    }
+    return stencilOptimizations;
+}
+async function stencilVitePlugin(rootDir) {
+    const { transpileSync } = await import('@stencil/core/compiler/stencil.js');
+    const stencilHelperPath = path.resolve(__dirname, 'fixtures', 'stencil.js');
+    return {
+        name: 'wdio-stencil',
+        enforce: 'pre',
+        resolveId(source) {
+            if (source === '@wdio/browser-runner/stencil') {
+                return stencilHelperPath;
+            }
+        },
+        transform: function (code, id) {
+            if (!id.includes('StencilComponent.tsx')) {
+                return { code };
+            }
+            const opts = {
+                componentExport: 'customelement',
+                componentMetadata: 'compilerstatic',
+                coreImportPath: '@stencil/core/internal/testing',
+                currentDirectory: rootDir,
+                module: 'esm',
+                proxy: null,
+                sourceMap: 'inline',
+                style: null,
+                styleImportData: 'queryparams',
+                target: 'es2018',
+                transformAliasedImportPaths: process.env.__STENCIL_TRANSPILE_PATHS__ === 'true',
+            };
+            const transpiledCode = transpileSync(code, opts);
+            return {
+                ...transpiledCode,
+                code: transpiledCode.code
+                    // HTMLElement gets imported from StencilJS, but we need to use the one from the browser
+                    .replace('extends HTMLElement {', 'extends window.HTMLElement {')
+                    // make sure that components are exported properly
+                    // StencilJS removes the export when componentExport is set to 'customelement'
+                    .replace('\nconst', '\nexport const'),
+                inputFilePath: id
+            };
+        }
+    };
+}

package/build/vite/plugins/testrunner.js

@@ -22,7 +22,7 @@ const resolvedVirtualModuleId = '\0' + virtualModuleId;
  * functionality
  */
 const MODULES_TO_MOCK = [
-    'import-meta-resolve', 'puppeteer-core', 'archiver', 'glob', 'devtools', 'ws', 'decamelize',
+    'import-meta-resolve', 'puppeteer-core', 'archiver', 'glob', 'devtools', 'ws', 'decamelize', 'got',
     'geckodriver', 'safaridriver', 'edgedriver', '@puppeteer/browsers', 'chrome-launcher', 'wait-port'
 ];
 const POLYFILLS = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wdio/browser-runner",
-  "version": "8.14.3",
+  "version": "8.15.0",
   "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",
@@ -34,14 +34,14 @@
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@types/istanbul-lib-source-maps": "^4.0.1",
     "@types/node": "^20.1.0",
-    "@vitest/spy": "^0.33.0",
-    "@wdio/globals": "8.14.3",
-    "@wdio/local-runner": "8.14.3",
+    "@vitest/spy": "^0.34.1",
+    "@wdio/globals": "8.15.0",
+    "@wdio/local-runner": "8.15.0",
     "@wdio/logger": "8.11.0",
-    "@wdio/mocha-framework": "8.14.0",
-    "@wdio/protocols": "8.11.0",
-    "@wdio/types": "8.14.0",
-    "@wdio/utils": "8.14.0",
+    "@wdio/mocha-framework": "8.15.0",
+    "@wdio/protocols": "8.14.6",
+    "@wdio/types": "8.15.0",
+    "@wdio/utils": "8.15.0",
     "ast-types": "^0.14.2",
     "deepmerge-ts": "^5.0.0",
     "expect-webdriverio": "^4.2.5",
@@ -59,8 +59,8 @@
     "vite": "~4.4.6",
     "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-top-level-await": "^1.3.0",
-    "webdriver": "8.14.3",
-    "webdriverio": "8.14.3",
+    "webdriver": "8.15.0",
+    "webdriverio": "8.15.0",
     "ws": "^8.13.0"
   },
   "scripts": {
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@types/ws": "^8.5.4",
-    "@wdio/runner": "8.14.3"
+    "@wdio/runner": "8.15.0"
   },
-  "gitHead": "5229517c22d25975c0e5dd3207b307f770b87605"
+  "gitHead": "78e199c5ffd74bdf3a5576952c3834c29afa989f"
 }

package/stencil/index.d.ts

@@ -0,0 +1,70 @@
+
+/**
+ * Options pertaining to the creation and functionality of a {@link SpecPage}
+ */
+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.
+     */
+    components: any[];
+    /**
+     * If `false`, do not flush the render queue on initial test setup.
+     */
+    flushQueue?: boolean;
+    /**
+     * The initial JSX used to generate the test.
+     * Use `template` when you want to initialize a component using their properties, instead of their HTML attributes.
+     * It will render the specified template (JSX) into `document.body`.
+     */
+    template?: () => any;
+    /**
+     * Sets the mocked `lang` attribute on `<html>`.
+     */
+    language?: string;
+    /**
+     * Useful for debugging hydrating components client-side. Sets that the `html` option already includes annotated prerender attributes and comments.
+     */
+    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;
+    /**
+     * 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;
+    /**
+     * 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`.
+     */
+    autoApplyChanges?: boolean;
+    /**
+     * By default, styles are not attached to the DOM and they are not reflected in the serialized HTML.
+     * Setting this option to `true` will include the component's styles in the serializable output.
+     */
+    attachStyles?: boolean;
+    /**
+     * Set {@link BuildConditionals} for testing based off the metadata of the component under test.
+     * 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;
+}
+
+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
+}
+
+export function render(opts: RenderOptions): StencilEnvironment