@wdio/browser-runner 8.5.4 → 8.5.6

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

@@ -1 +1 @@
-{"version":3,"file":"driver.d.ts","sourceRoot":"","sources":["../../src/browser/driver.ts"],"names":[],"mappings":"AAiBA,MAAM,CAAC,OAAO,OAAO,WAAW;;IAG5B,MAAM,CAAC,UAAU,CACb,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,EACjD,cAAc,EAAE,GAAG;CAoJ1B"}
+{"version":3,"file":"driver.d.ts","sourceRoot":"","sources":["../../src/browser/driver.ts"],"names":[],"mappings":"AAkBA,MAAM,CAAC,OAAO,OAAO,WAAW;;IAG5B,MAAM,CAAC,UAAU,CACb,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,KAAK,EACf,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,EACjD,cAAc,EAAE,GAAG;CAoJ1B"}

package/build/browser/driver.js

@@ -2,14 +2,14 @@ import stringify from 'fast-safe-stringify';
 import { commands } from 'virtual:wdio';
 import { webdriverMonad, sessionEnvironmentDetector } from '@wdio/utils';
 import { getEnvironmentVars } from 'webdriver';
+import { getCID } from './utils.js';
 import { MESSAGE_TYPES } from '../constants.js';
 const COMMAND_TIMEOUT = 30 * 1000; // 30s
 const CONSOLE_METHODS = ['log', 'info', 'warn', 'error', 'debug'];
 export default class ProxyDriver {
     static #commandMessages = new Map();
     static newSession(params, modifier, userPrototype, commandWrapper) {
-        const urlParamString = new URLSearchParams(window.location.search);
-        const cid = urlParamString.get('cid');
+        const cid = getCID();
         if (!cid) {
             throw new Error('"cid" query parameter is missing');
         }

package/build/browser/frameworks/mocha.d.ts

@@ -1,6 +1,9 @@
-export declare class MochaFramework {
+export declare class MochaFramework extends HTMLElement {
     #private;
-    constructor(socket: WebSocket);
-    run(): void;
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: unknown, newValue: unknown): void;
+    run(socket: WebSocket): Promise<void>;
 }
 //# sourceMappingURL=mocha.d.ts.map

package/build/browser/frameworks/mocha.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mocha.d.ts","sourceRoot":"","sources":["../../../src/browser/frameworks/mocha.ts"],"names":[],"mappings":"AASA,qBAAa,cAAc;;gBAKV,MAAM,EAAE,SAAS;IAgC9B,GAAG;CAgEN"}
+{"version":3,"file":"mocha.d.ts","sourceRoot":"","sources":["../../../src/browser/frameworks/mocha.ts"],"names":[],"mappings":"AAgCA,qBAAa,cAAe,SAAQ,WAAW;;;IAuB3C,MAAM,KAAK,kBAAkB,aAE5B;IAED,iBAAiB;IAWjB,wBAAwB,CAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO;IAatE,GAAG,CAAE,MAAM,EAAE,SAAS;CAkG/B"}

package/build/browser/frameworks/mocha.js

@@ -1,16 +1,78 @@
 import stringify from 'fast-safe-stringify';
 import { setupEnv, formatMessage } from '@wdio/mocha-framework/common';
+import { getCID } from '../utils.js';
 import { MESSAGE_TYPES, EVENTS } from '../../constants.js';
 const startTime = Date.now();
-export class MochaFramework {
+if (!window.Mocha) {
+    throw new Error('Can\'t find Mocha attached to the `window` scope, was it installed? Run `npm install mocha` and run again!');
+}
+const BaseReporter = window.Mocha.reporters.html;
+class HTMLReporter extends BaseReporter {
+    constructor(runner, options) {
+        /**
+         * this is a little hack to ensure Mocha attaches the HTML reporter
+         * to the element within the Shadow DOM
+         */
+        const getElementById = document.getElementById.bind(document);
+        document.getElementById = () => document.querySelector('mocha-framework')?.shadowRoot?.querySelector('#mocha');
+        super(runner, options);
+        document.getElementById = getElementById;
+    }
+    addCodeToggle() { }
+}
+//examples/wdio/node_modules/uuid/dist/esm-browser/index.js
+export class MochaFramework extends HTMLElement {
+    #root;
+    #spec;
     #socket;
     #hookResolver = new Map();
     #runnerEvents = [];
-    constructor(socket) {
+    #isMinified = false;
+    constructor() {
+        super();
+        this.#root = this.attachShadow({ mode: 'open' });
+        this.#spec = this.getAttribute('spec');
+        if (!this.#spec) {
+            throw new Error('"spec" attribute required but not set');
+        }
+        mocha.setup({
+            ...window.__wdioEnv__.args,
+            reporter: HTMLReporter
+        });
+    }
+    static get observedAttributes() {
+        return ['minified'];
+    }
+    connectedCallback() {
+        this.#root.appendChild(template.content.cloneNode(true));
+        this.#root.querySelector('.btnCollapseExpand')?.addEventListener('click', () => {
+            if (this.#isMinified) {
+                this.shadowRoot.host.removeAttribute('minified');
+            }
+            else {
+                this.shadowRoot.host.setAttribute('minified', 'minified');
+            }
+        });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'minified') {
+            this.#isMinified = typeof newValue === 'string';
+            const reporterElem = this.#root.querySelector('.reporter');
+            if (reporterElem) {
+                reporterElem.className = this.#isMinified ? 'reporter minified' : 'reporter';
+            }
+            document.body.style.width = `calc(100% - ${this.#isMinified ? '65px' : '500px'})`;
+        }
+    }
+    async run(socket) {
+        /**
+         * import test case (order is important here)
+         */
+        const file = this.#spec;
+        await import(file);
         this.#socket = socket;
         socket.addEventListener('message', this.#handleSocketMessage.bind(this));
-        const urlParamString = new URLSearchParams(window.location.search);
-        const cid = urlParamString.get('cid');
+        const cid = getCID();
         if (!cid) {
             throw new Error('"cid" query parameter is missing');
         }
@@ -23,25 +85,23 @@ export class MochaFramework {
         before(function () {
             self.#getHook('beforeSuite')({
                 ...this.test?.parent?.suites[0],
-                file: window.__wdioSpec__,
+                file,
             });
         });
         after(function () {
             self.#getHook('afterSuite')({
                 ...this.test?.parent?.suites[0],
-                file: window.__wdioSpec__,
+                file,
                 duration: Date.now() - startTime
             });
         });
-    }
-    run() {
         const runner = mocha.run(this.#onFinish.bind(this));
         Object.entries(EVENTS).map(([mochaEvent, wdioEvent]) => runner.on(mochaEvent, (payload) => {
             this.#runnerEvents.push(formatMessage({ type: wdioEvent, payload, err: payload.err }));
         }));
     }
     async #onFinish(failures) {
-        await this.#getHook('after')(failures, window.__wdioEnv__.capabilities, [window.__wdioSpec__]);
+        await this.#getHook('after')(failures, window.__wdioEnv__.capabilities, [this.#spec]);
         /**
          * propagate results to browser so it can be picked up by the runner
          */
@@ -75,13 +135,12 @@ export class MochaFramework {
     #getHook(name) {
         return (...args) => new Promise((resolve, reject) => {
             const id = (this.#hookResolver.size + 1).toString();
-            const urlParamString = new URLSearchParams(window.location.search);
-            const cid = urlParamString.get('cid');
+            const cid = getCID();
             if (!cid) {
                 return reject(new Error('"cid" query parameter is missing'));
             }
             this.#hookResolver.set(id.toString(), { resolve, reject });
-            this.#socket.send(stringify(this.#hookTrigger({ name, id, cid, args })));
+            this.#socket?.send(stringify(this.#hookTrigger({ name, id, cid, args })));
         });
     }
     #hookTrigger(value) {
@@ -91,12 +150,88 @@ export class MochaFramework {
         };
     }
 }
-// @ts-expect-error
-const BaseReporter = window.Mocha.reporters.html;
-class HTMLReporter extends BaseReporter {
-    addCodeToggle() { }
-}
-mocha.setup({
-    ...window.__wdioEnv__.args,
-    reporter: HTMLReporter
-});
+const template = document.createElement('template');
+template.innerHTML = /*html*/ `
+<style>
+    @import "/node_modules/mocha/mocha.css";
+
+    .reporter {
+        transition: width .3s;
+        box-shadow: -5px 0px 10px #aaa;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 500px;
+        height: 100%;
+        margin: 0;
+        color: var(--mocha-color);
+        background-color: var(--mocha-bg-color);
+        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+TG9nbyBSZWd1bGFyPC90aXRsZT4KICAgIDxnIGlkPSJMb2dvLVJlZ3VsYXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNFQTU5MDYiIHg9IjAiIHk9IjAiIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgcng9IjUiPjwvcmVjdD4KICAgICAgICA8cGF0aCBkPSJNOCwxNiBMOCw0OCBMNiw0OCBMNiwxNiBMOCwxNiBaIE00MywxNiBDNTEuODM2NTU2LDE2IDU5LDIzLjE2MzQ0NCA1OSwzMiBDNTksNDAuODM2NTU2IDUxLjgzNjU1Niw0OCA0Myw0OCBDMzQuMTYzNDQ0LDQ4IDI3LDQwLjgzNjU1NiAyNywzMiBDMjcsMjMuMTYzNDQ0IDM0LjE2MzQ0NCwxNiA0MywxNiBaIE0yNywxNiBMMTQuMTA2LDQ3Ljk5OTIwNzggTDExLjk5OSw0Ny45OTkyMDc4IEwyNC44OTQsMTYgTDI3LDE2IFogTTQzLDE4IEMzNS4yNjgwMTM1LDE4IDI5LDI0LjI2ODAxMzUgMjksMzIgQzI5LDM5LjczMTk4NjUgMzUuMjY4MDEzNSw0NiA0Myw0NiBDNTAuNzMxOTg2NSw0NiA1NywzOS43MzE5ODY1IDU3LDMyIEM1NywyNC4yNjgwMTM1IDUwLjczMTk4NjUsMTggNDMsMTggWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
+        background-repeat: no-repeat;
+        background-size: 30px;
+        background-position: 15px 20px;
+    }
+    .reporter.minified {
+        width: 65px;
+    }
+
+    #mocha {
+        margin: 0;
+    }
+    ul#mocha-report {
+        transition: opacity .3s;
+        opacity: 1;
+        padding: 50px 15px  0 0;
+    }
+    .minified ul#mocha-report {
+        opacity: 0;
+    }
+    .minified .progress {
+        display: block;
+        float: none;
+    }
+    .minified #mocha-stats {
+        width: 50px;
+        padding-top: 60px;
+    }
+    .minified #mocha-stats li {
+        font-size: .9em;
+    }
+
+    @keyframes fadeOutIn {
+        0% { opacity: 1; }
+        20% { opacity: 0; }
+        100% { opacity: 1; }
+    }
+
+    .btnCollapseExpand {
+        display: block;
+        width: 50px;
+        position: absolute;
+        height: 50px;
+        bottom: 0;
+        right: 0;
+        transition: transform .3s;
+        transform: scale(1) translateX(-434px);
+        margin: 10px 8px;
+        background: transparent;
+        border: 0;
+        cursor: pointer;
+    }
+    .minified .btnCollapseExpand {
+        transform: scale(-1) translateX(0px);
+        animation-name: fadeOutIn;
+        animation-duration: .3s;
+    }
+</style>
+<div class="reporter">
+    <div id="mocha"></div>
+    <button class="btnCollapseExpand">
+        <svg width="50" height="40" viewBox="2 0 32 32" xmlns="http://www.w3.org/2000/svg">
+            <path fill="#fff" d="M13.11 29.113c7.243 0 13.113-5.871 13.113-13.113S20.353 2.887 13.11 2.887C5.868 2.887-.003 8.758-.003 16S5.868 29.113 13.11 29.113zm0-25.177c6.652 0 12.064 5.412 12.064 12.064S19.762 28.064 13.11 28.064C6.457 28.064 1.046 22.652 1.046 16S6.457 3.936 13.11 3.936z"/>
+            <path fill="#fff" d="m13.906 21.637.742.742L21.026 16l-6.378-6.379-.742.742 5.112 5.112H6.291v1.049h12.727z"/>
+        </svg>
+    </button>
+</div>
+`;
+customElements.define('mocha-framework', MochaFramework);

package/build/browser/setup.d.ts

@@ -1,6 +1,8 @@
+import './frameworks/mocha.js';
 type WDIOErrorEvent = Pick<ErrorEvent, 'filename' | 'message'>;
 declare global {
     interface Window {
+        Mocha?: any;
         __wdioErrors__: WDIOErrorEvent[];
         __wdioSpec__: string;
         __wdioFailures__: number;

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

@@ -1 +1 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/browser/setup.ts"],"names":[],"mappings":"AAQA,KAAK,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,SAAS,CAAC,CAAA;AAC9D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,cAAc,EAAE,cAAc,EAAE,CAAA;QAChC,YAAY,EAAE,MAAM,CAAA;QACpB,gBAAgB,EAAE,MAAM,CAAA;QACxB,cAAc,EAAE,GAAG,EAAE,CAAA;QACrB,cAAc,EAAE,SAAS,CAAA;QACzB,sBAAsB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;QAC1C,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAC7C;CACJ;AAOD,eAAO,MAAM,MAAM,WAA+C,CAAA;AAClE,eAAO,MAAM,cAAc,oBAGzB,CAAA"}
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/browser/setup.ts"],"names":[],"mappings":"AAMA,OAAO,uBAAuB,CAAA;AAG9B,KAAK,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,SAAS,CAAC,CAAA;AAC9D,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,KAAK,CAAC,EAAE,GAAG,CAAA;QACX,cAAc,EAAE,cAAc,EAAE,CAAA;QAChC,YAAY,EAAE,MAAM,CAAA;QACpB,gBAAgB,EAAE,MAAM,CAAA;QACxB,cAAc,EAAE,GAAG,EAAE,CAAA;QACrB,cAAc,EAAE,SAAS,CAAA;QACzB,sBAAsB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;QAC1C,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;KAC7C;CACJ;AAOD,eAAO,MAAM,MAAM,WAA+C,CAAA;AAClE,eAAO,MAAM,cAAc,oBAGzB,CAAA"}

package/build/browser/setup.js

@@ -2,7 +2,7 @@ import { automationProtocolPath } from 'virtual:wdio';
 import { expect } from 'expect-webdriverio';
 import { remote } from 'webdriverio';
 import { _setGlobal } from '@wdio/globals';
-import { MochaFramework } from './frameworks/mocha.js';
+import './frameworks/mocha.js';
 /**
  * create connection to Vite server
  */
@@ -25,11 +25,8 @@ _setGlobal('driver', browser, window.__wdioEnv__.injectGlobals);
 _setGlobal('expect', expect, window.__wdioEnv__.injectGlobals);
 _setGlobal('$', browser.$.bind(browser), window.__wdioEnv__.injectGlobals);
 _setGlobal('$$', browser.$$.bind(browser), window.__wdioEnv__.injectGlobals);
-/**
- * execute test framework after socket connection was established
- */
-await connectPromise.then(async () => {
-    const framework = new MochaFramework(socket);
-    await import(window.__wdioSpec__);
-    framework.run();
-});
+const mochaFramework = document.querySelector('mocha-framework');
+if (mochaFramework) {
+    await connectPromise;
+    mochaFramework.run(socket);
+}

package/build/browser/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function getCID(): string | undefined;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/browser/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,MAAM,uBAYrB"}

package/build/browser/utils.js

@@ -0,0 +1,12 @@
+export function getCID() {
+    const urlParamString = new URLSearchParams(window.location.search);
+    return (
+    // initial request contains cid as query parameter
+    urlParamString.get('cid') ||
+        // if not provided check for document cookie, set by `@wdio/runner` package
+        (document.cookie.split(';') || [])
+            .find((c) => c.includes('WDIO_CID'))
+            ?.trim()
+            .split('=')
+            .pop());
+}

package/build/constants.d.ts

@@ -34,4 +34,5 @@ export declare const COVERAGE_FACTORS: readonly ["lines", "functions", "branches
 export declare const DEFAULT_COVERAGE_REPORTS: (keyof ReportOptions)[];
 export declare const GLOBAL_TRESHOLD_REPORTING = "ERROR: Coverage for %s (%s%) does not meet global threshold (%s%)";
 export declare const FILE_TRESHOLD_REPORTING = "ERROR: Coverage for %s (%s%) does not meet threshold (%s%) for %s";
+export declare const MOCHA_VARIABELS = ":root {\n    --mocha-color: #000;\n    --mocha-bg-color: #fff;\n    --mocha-pass-icon-color: #00d6b2;\n    --mocha-pass-color: #fff;\n    --mocha-pass-shadow-color: rgba(0, 0, 0, .2);\n    --mocha-pass-mediump-color: #c09853;\n    --mocha-pass-slow-color: #b94a48;\n    --mocha-test-pending-color: #0b97c4;\n    --mocha-test-pending-icon-color: #0b97c4;\n    --mocha-test-fail-color: #c00;\n    --mocha-test-fail-icon-color: #c00;\n    --mocha-test-fail-pre-color: #000;\n    --mocha-test-fail-pre-error-color: #c00;\n    --mocha-test-html-error-color: #000;\n    --mocha-box-shadow-color: #eee;\n    --mocha-box-bottom-color: #ddd;\n    --mocha-test-replay-color: #000;\n    --mocha-test-replay-bg-color: #eee;\n    --mocha-stats-color: #888;\n    --mocha-stats-em-color: #000;\n    --mocha-stats-hover-color: #eee;\n    --mocha-error-color: #c00;\n\n    --mocha-code-comment: #ddd;\n    --mocha-code-init: #2f6fad;\n    --mocha-code-string: #5890ad;\n    --mocha-code-keyword: #8a6343;\n    --mocha-code-number: #2f6fad;\n}\n\n@media (prefers-color-scheme: dark) {\n    :root {\n        --mocha-color: #fff;\n        --mocha-bg-color: #222;\n        --mocha-pass-icon-color: #00d6b2;\n        --mocha-pass-color: #222;\n        --mocha-pass-shadow-color: rgba(255, 255, 255, .2);\n        --mocha-pass-mediump-color: #f1be67;\n        --mocha-pass-slow-color: #f49896;\n        --mocha-test-pending-color: #0b97c4;\n        --mocha-test-pending-icon-color: #0b97c4;\n        --mocha-test-fail-color: #f44;\n        --mocha-test-fail-icon-color: #f44;\n        --mocha-test-fail-pre-color: #fff;\n        --mocha-test-fail-pre-error-color: #f44;\n        --mocha-test-html-error-color: #fff;\n        --mocha-box-shadow-color: #444;\n        --mocha-box-bottom-color: #555;\n        --mocha-test-replay-color: #fff;\n        --mocha-test-replay-bg-color: #444;\n        --mocha-stats-color: #aaa;\n        --mocha-stats-em-color: #fff;\n        --mocha-stats-hover-color: #444;\n        --mocha-error-color: #f44;\n\n        --mocha-code-comment: #ddd;\n        --mocha-code-init: #9cc7f1;\n        --mocha-code-string: #80d4ff;\n        --mocha-code-keyword: #e3a470;\n        --mocha-code-number: #4ca7ff;\n    }\n}\n";
 //# sourceMappingURL=constants.d.ts.map

package/build/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAErD,eAAO,MAAM,QAAQ,0BAAiC,CAAA;AACtD,eAAO,MAAM,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAa,CAAA;AAEvE,eAAO,MAAM,MAAM;;;;;;;;;;;CAWT,CAAA;AAEV,eAAO,MAAM,uBAAuB,wFAAsF,CAAA;AAE1H,oBAAY,aAAa;IACrB,cAAc,IAAI;IAClB,qBAAqB,IAAA;IACrB,sBAAsB,IAAA;IACtB,kBAAkB,IAAA;IAClB,iBAAiB,IAAA;IACjB,WAAW,IAAA;IACX,YAAY,IAAA;CACf;AAED,eAAO,MAAM,eAAe,UAAS,CAAA;AACrC,eAAO,MAAM,uBAAuB,UAAoF,CAAA;AACxH,eAAO,MAAM,yBAAyB,aAAa,CAAA;AACnD,eAAO,MAAM,gBAAgB,OAAO,CAAA;AACpC,eAAO,MAAM,sBAAsB,cAAc,CAAA;AACjD,eAAO,MAAM,gBAAgB,iBAAiB,CAAA;AAC9C,eAAO,MAAM,gBAAgB,2DAA4D,CAAA;AACzF,eAAO,MAAM,wBAAwB,EAAE,CAAC,MAAM,aAAa,CAAC,EAAiD,CAAA;AAC7G,eAAO,MAAM,yBAAyB,sEAAsE,CAAA;AAC5G,eAAO,MAAM,uBAAuB,sEAAsE,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAErD,eAAO,MAAM,QAAQ,0BAAiC,CAAA;AACtD,eAAO,MAAM,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,OAAO,CAAa,CAAA;AAEvE,eAAO,MAAM,MAAM;;;;;;;;;;;CAWT,CAAA;AAEV,eAAO,MAAM,uBAAuB,wFAAsF,CAAA;AAE1H,oBAAY,aAAa;IACrB,cAAc,IAAI;IAClB,qBAAqB,IAAA;IACrB,sBAAsB,IAAA;IACtB,kBAAkB,IAAA;IAClB,iBAAiB,IAAA;IACjB,WAAW,IAAA;IACX,YAAY,IAAA;CACf;AAED,eAAO,MAAM,eAAe,UAAS,CAAA;AACrC,eAAO,MAAM,uBAAuB,UAAoF,CAAA;AACxH,eAAO,MAAM,yBAAyB,aAAa,CAAA;AACnD,eAAO,MAAM,gBAAgB,OAAO,CAAA;AACpC,eAAO,MAAM,sBAAsB,cAAc,CAAA;AACjD,eAAO,MAAM,gBAAgB,iBAAiB,CAAA;AAC9C,eAAO,MAAM,gBAAgB,2DAA4D,CAAA;AACzF,eAAO,MAAM,wBAAwB,EAAE,CAAC,MAAM,aAAa,CAAC,EAAiD,CAAA;AAC7G,eAAO,MAAM,yBAAyB,sEAAsE,CAAA;AAC5G,eAAO,MAAM,uBAAuB,sEAAsE,CAAA;AAE1G,eAAO,MAAM,eAAe,irEA+D3B,CAAA"}

package/build/constants.js

@@ -33,3 +33,67 @@ export const COVERAGE_FACTORS = ['lines', 'functions', 'branches', 'statements']
 export const DEFAULT_COVERAGE_REPORTS = ['text', 'html', 'clover', SUMMARY_REPORTER];
 export const GLOBAL_TRESHOLD_REPORTING = 'ERROR: Coverage for %s (%s%) does not meet global threshold (%s%)';
 export const FILE_TRESHOLD_REPORTING = 'ERROR: Coverage for %s (%s%) does not meet threshold (%s%) for %s';
+export const MOCHA_VARIABELS = /*css*/ `:root {
+    --mocha-color: #000;
+    --mocha-bg-color: #fff;
+    --mocha-pass-icon-color: #00d6b2;
+    --mocha-pass-color: #fff;
+    --mocha-pass-shadow-color: rgba(0, 0, 0, .2);
+    --mocha-pass-mediump-color: #c09853;
+    --mocha-pass-slow-color: #b94a48;
+    --mocha-test-pending-color: #0b97c4;
+    --mocha-test-pending-icon-color: #0b97c4;
+    --mocha-test-fail-color: #c00;
+    --mocha-test-fail-icon-color: #c00;
+    --mocha-test-fail-pre-color: #000;
+    --mocha-test-fail-pre-error-color: #c00;
+    --mocha-test-html-error-color: #000;
+    --mocha-box-shadow-color: #eee;
+    --mocha-box-bottom-color: #ddd;
+    --mocha-test-replay-color: #000;
+    --mocha-test-replay-bg-color: #eee;
+    --mocha-stats-color: #888;
+    --mocha-stats-em-color: #000;
+    --mocha-stats-hover-color: #eee;
+    --mocha-error-color: #c00;
+
+    --mocha-code-comment: #ddd;
+    --mocha-code-init: #2f6fad;
+    --mocha-code-string: #5890ad;
+    --mocha-code-keyword: #8a6343;
+    --mocha-code-number: #2f6fad;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --mocha-color: #fff;
+        --mocha-bg-color: #222;
+        --mocha-pass-icon-color: #00d6b2;
+        --mocha-pass-color: #222;
+        --mocha-pass-shadow-color: rgba(255, 255, 255, .2);
+        --mocha-pass-mediump-color: #f1be67;
+        --mocha-pass-slow-color: #f49896;
+        --mocha-test-pending-color: #0b97c4;
+        --mocha-test-pending-icon-color: #0b97c4;
+        --mocha-test-fail-color: #f44;
+        --mocha-test-fail-icon-color: #f44;
+        --mocha-test-fail-pre-color: #fff;
+        --mocha-test-fail-pre-error-color: #f44;
+        --mocha-test-html-error-color: #fff;
+        --mocha-box-shadow-color: #444;
+        --mocha-box-bottom-color: #555;
+        --mocha-test-replay-color: #fff;
+        --mocha-test-replay-bg-color: #444;
+        --mocha-stats-color: #aaa;
+        --mocha-stats-em-color: #fff;
+        --mocha-stats-hover-color: #444;
+        --mocha-error-color: #f44;
+
+        --mocha-code-comment: #ddd;
+        --mocha-code-init: #9cc7f1;
+        --mocha-code-string: #80d4ff;
+        --mocha-code-keyword: #e3a470;
+        --mocha-code-number: #4ca7ff;
+    }
+}
+`;

package/build/types.d.ts

@@ -1,4 +1,4 @@
-import type { InlineConfig } from 'vite';
+import type { ConfigEnv, InlineConfig } from 'vite';
 import type { Workers, Capabilities, Options } from '@wdio/types';
 import type { MochaOpts } from '@wdio/mocha-framework';
 import type { IstanbulPluginOptions } from 'vite-plugin-istanbul';
@@ -82,7 +82,7 @@ export interface BrowserRunnerOptions {
     /**
      * Vite configuration to overwrite the preset
      */
-    viteConfig?: string | InlineConfig;
+    viteConfig?: string | InlineConfig | ((env: ConfigEnv) => InlineConfig | Promise<InlineConfig>);
     /**
      * Run tests in headless mode
      * @default false // true in CI environment

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,YAAY,EAAE,MAAM,MAAM,CAAA;AACxC,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,CAAA;IAClC;;;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,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"}

package/build/vite/constants.js

@@ -36,7 +36,7 @@ export const DEFAULT_VITE_CONFIG = {
             'expect', 'jest-matcher-utils', 'serialize-error', 'minimatch', 'css-shorthand-properties',
             'lodash.merge', 'lodash.zip', 'lodash.clonedeep', 'lodash.pickby', 'lodash.flattendeep',
             'aria-query', 'grapheme-splitter', 'css-value', 'rgb2hex', 'p-iteration', 'fast-safe-stringify',
-            'deepmerge-ts'
+            'deepmerge-ts', 'jest-util'
         ],
         esbuildOptions: {
             logLevel: 'silent',

package/build/vite/plugins/testrunner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testrunner.d.ts","sourceRoot":"","sources":["../../../src/vite/plugins/testrunner.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AA0ClC,wBAAgB,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,oBAAoB,GAAG,MAAM,EAAE,CAmH9E"}
+{"version":3,"file":"testrunner.d.ts","sourceRoot":"","sources":["../../../src/vite/plugins/testrunner.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AA0ClC,wBAAgB,UAAU,CAAC,OAAO,EAAE,WAAW,CAAC,oBAAoB,GAAG,MAAM,EAAE,CAoH9E"}

package/build/vite/plugins/testrunner.js

@@ -88,10 +88,11 @@ export function testrunner(options) {
                         if (!req.originalUrl) {
                             return next();
                         }
+                        const cookies = ((req.headers.cookie && req.headers.cookie.split(';')) || []).map((c) => c.trim());
                         const urlParsed = url.parse(req.originalUrl);
                         const urlParamString = new URLSearchParams(urlParsed.query || '');
-                        const cid = urlParamString.get('cid');
-                        const spec = urlParamString.get('spec');
+                        const cid = urlParamString.get('cid') || cookies.find((c) => c.includes('WDIO_CID'))?.split('=').pop();
+                        const spec = urlParamString.get('spec') || cookies.find((c) => c.includes('WDIO_SPEC'))?.split('=').pop();
                         if (!cid || !SESSIONS.has(cid)) {
                             log.error(`No environment found for ${cid || 'non determined environment'}`);
                             return next();

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

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/vite/server.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAM1C,OAAO,EAAE,eAAe,EAAE,MAAM,IAAI,CAAA;AAGpC,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,MAAM,CAAA;AAGvD,OAAO,KAAK,EAAY,OAAO,EAAE,MAAM,aAAa,CAAA;AAQpD,OAAO,KAAK,EACM,gBAAgB,EAEjC,MAAM,YAAY,CAAA;AAYnB,qBAAa,UAAW,SAAQ,YAAY;;IAUxC,IAAI,YAAY,gCAEf;IAED,IAAI,MAAM,0BAET;gBAEY,OAAO,EAAE,WAAW,CAAC,oBAAoB,EAAE,MAAM,EAAE,OAAO,CAAC,UAAU;IAyB5E,KAAK;IAoDL,KAAK;IAkJX,OAAO,CAAC,cAAc;IAetB,WAAW,CAAE,MAAM,EAAE,gBAAgB;CAUxC"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/vite/server.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAM1C,OAAO,EAAE,eAAe,EAAE,MAAM,IAAI,CAAA;AAGpC,OAAO,KAAK,EAAiB,YAAY,EAAa,MAAM,MAAM,CAAA;AAGlE,OAAO,KAAK,EAAY,OAAO,EAAE,MAAM,aAAa,CAAA;AAQpD,OAAO,KAAK,EACM,gBAAgB,EAEjC,MAAM,YAAY,CAAA;AAgBnB,qBAAa,UAAW,SAAQ,YAAY;;IAUxC,IAAI,YAAY,gCAEf;IAED,IAAI,MAAM,0BAET;gBAEY,OAAO,EAAE,WAAW,CAAC,oBAAoB,EAAE,MAAM,EAAE,OAAO,CAAC,UAAU;IAyB5E,KAAK;IAsDL,KAAK;IAkJX,OAAO,CAAC,cAAc;IAetB,WAAW,CAAE,MAAM,EAAE,gBAAgB;CAUxC"}

package/build/vite/server.js

@@ -17,6 +17,10 @@ import { MESSAGE_TYPES, DEFAULT_INCLUDE, DEFAULT_FILE_EXTENSIONS } from '../cons
 import { BROWSER_POOL, SESSIONS } from '../constants.js';
 const log = logger('@wdio/browser-runner:ViteServer');
 const HOOK_TIMEOUT = 15 * 1000;
+const DEFAULT_CONFIG_ENV = {
+    command: 'serve',
+    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
+};
 export class ViteServer extends EventEmitter {
     #pendingHooks = new Map();
     #connections = new Set();
@@ -85,7 +89,9 @@ export class ViteServer extends EventEmitter {
         if (this.#options.viteConfig) {
             const configToMerge = typeof this.#options.viteConfig === 'string'
                 ? (await import(path.resolve(this.#config.rootDir || process.cwd(), this.#options.viteConfig))).default
-                : this.#options.viteConfig;
+                : typeof this.#options.viteConfig === 'function'
+                    ? await this.#options.viteConfig(DEFAULT_CONFIG_ENV)
+                    : this.#options.viteConfig;
             this.#viteConfig = deepmerge(this.#viteConfig, configToMerge);
         }
         /**
@@ -140,7 +146,7 @@ export class ViteServer extends EventEmitter {
         };
     }
     #handleConsole(message) {
-        const isWDIOLog = Boolean(typeof message.args[0] === 'string' && message.args[0].startsWith('[WDIO]'));
+        const isWDIOLog = Boolean(typeof message.args[0] === 'string' && message.args[0].startsWith('[WDIO]') && message.type !== 'error');
         if (message.name !== 'consoleEvent' || isWDIOLog) {
             return;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/vite/utils.ts"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE/D,wBAAsB,WAAW,CAAC,OAAO,EAAE,WAAW,CAAC,oBAAoB,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,oBAAc,mBAuFpI;AAED,wBAAsB,kBAAkB,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,CAAC,EAAE,MAAM,gBAa7E;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAY7D;AAED,wBAAsB,qBAAqB,CAAE,GAAG,EAAE,MAAM,qBAqBvD;AAGD,wBAAsB,cAAc,CAAC,WAAW,EAAE,MAAM,+BAgBvD;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,UAU9D"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/vite/utils.ts"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAI/D,wBAAsB,WAAW,CAAC,OAAO,EAAE,WAAW,CAAC,oBAAoB,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,oBAAc,mBAqFpI;AAED,wBAAsB,kBAAkB,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,CAAC,EAAE,MAAM,gBAa7E;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAY7D;AAED,wBAAsB,qBAAqB,CAAE,GAAG,EAAE,MAAM,qBAqBvD;AAGD,wBAAsB,cAAc,CAAC,WAAW,EAAE,MAAM,+BAgBvD;AAED,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,UAU9D"}

package/build/vite/utils.js

@@ -1,7 +1,10 @@
 import fs from 'node:fs/promises';
 import url from 'node:url';
 import path from 'node:path';
+import logger from '@wdio/logger';
 import { resolve } from 'import-meta-resolve';
+import { MOCHA_VARIABELS } from '../constants.js';
+const log = logger('@wdio/browser-runner');
 export async function getTemplate(options, env, spec, processEnv = process.env) {
     const root = options.rootDir || process.cwd();
     const rootFileUrl = url.pathToFileURL(root).href;
@@ -29,20 +32,24 @@ export async function getTemplate(options, env, spec, processEnv = process.env)
                 `Error: ${err.stack}`);
         }
     }
-    const mochaCSSHref = await resolve('mocha', `${rootFileUrl}/node_modules`).then((p) => path.join(url.fileURLToPath(path.dirname(p)), 'mocha.css'), () => 'https://unpkg.com/mocha@10.0.0/mocha.css');
-    const mochaJSSrc = await resolve('mocha', `${rootFileUrl}/node_modules`).then((p) => path.join(url.fileURLToPath(path.dirname(p)), 'mocha.js'), () => 'https://unpkg.com/mocha@10.0.0/mocha.js');
-    const sourceMapSupportDir = path.dirname(url.fileURLToPath(await resolve('source-map-support', import.meta.url)));
+    let sourceMapScript = '';
+    let sourceMapSetupCommand = '';
+    await resolve('source-map-supposrt', import.meta.url).then((sourceMapSupportDir) => {
+        sourceMapScript = /*html*/ `<script src="/@fs/${url.fileURLToPath(path.dirname(sourceMapSupportDir))}/browser-source-map-support.js"></script>`;
+        sourceMapSetupCommand = 'sourceMapSupport.install()';
+    }, (err) => {
+        log.error(`Failed to setup source-map-support: ${err.message}`);
+    });
     return /* html */ `
     <!doctype html>
     <html>
         <head>
             <title>WebdriverIO Browser Test</title>
             <link rel="icon" type="image/x-icon" href="https://webdriver.io/img/favicon.png">
-            <link rel="stylesheet" href="${mochaCSSHref}">
-            <script type="module" src="${mochaJSSrc}"></script>
-            <script src="/@fs/${sourceMapSupportDir}/browser-source-map-support.js"></script>
+            <script type="module" src="/node_modules/mocha/mocha.js"></script>
+            ${sourceMapScript}
             <script type="module">
-                sourceMapSupport.install()
+                ${sourceMapSetupCommand}
 
                 /**
                  * Inject environment variables
@@ -64,14 +71,16 @@ export async function getTemplate(options, env, spec, processEnv = process.env)
                  */
                 window.process = {
                     platform: 'browser',
-                    env: {}
+                    env: {},
+                    stdout: {}
                 }
             </script>
+            <script type="module" src="@wdio/browser-runner/setup"></script>
+            <style>${MOCHA_VARIABELS}</style>
             ${vueDeps}
         </head>
-        <body>
-            <div id="mocha"></div>
-            <script async type="module" src="@wdio/browser-runner/setup"></script>
+        <body style="width: calc(100% - 500px); padding: 0; margin: 0;">
+            <mocha-framework spec="${spec}" ${process.env.CI ? 'minified' : ''}></mocha-framework>
             <script type="module">
                 window.process.env = ${JSON.stringify(processEnv)}
             </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wdio/browser-runner",
-  "version": "8.5.4",
+  "version": "8.5.6",
   "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",
@@ -32,13 +32,13 @@
     "@types/istanbul-lib-source-maps": "^4.0.1",
     "@types/node": "^18.14.0",
     "@vitest/spy": "^0.29.1",
-    "@wdio/globals": "8.5.1",
-    "@wdio/local-runner": "8.5.4",
+    "@wdio/globals": "8.5.6",
+    "@wdio/local-runner": "8.5.6",
     "@wdio/logger": "8.1.0",
-    "@wdio/mocha-framework": "8.4.0",
-    "@wdio/protocols": "8.3.11",
+    "@wdio/mocha-framework": "8.5.6",
+    "@wdio/protocols": "8.5.6",
     "@wdio/types": "8.4.0",
-    "@wdio/utils": "8.4.0",
+    "@wdio/utils": "8.5.6",
     "ast-types": "^0.14.2",
     "deepmerge-ts": "^4.3.0",
     "expect-webdriverio": "^4.1.2",
@@ -56,8 +56,8 @@
     "vite": "^4.1.3",
     "vite-plugin-istanbul": "^4.0.0",
     "vite-plugin-top-level-await": "^1.2.4",
-    "webdriver": "8.5.1",
-    "webdriverio": "8.5.1",
+    "webdriver": "8.5.6",
+    "webdriverio": "8.5.6",
     "ws": "^8.12.1"
   },
   "scripts": {
@@ -68,7 +68,7 @@
   },
   "devDependencies": {
     "@types/ws": "^8.5.4",
-    "@wdio/runner": "8.5.4"
+    "@wdio/runner": "8.5.6"
   },
-  "gitHead": "32e80c3543f24a346cc1b8dde7fcbe8b34724c56"
+  "gitHead": "01be486a93582b19bfade3f6f0778f2b5e2d4c01"
 }