@wdio/cli 8.6.1 → 8.6.3

package/build/constants.d.ts

@@ -239,10 +239,13 @@ export declare const SUPPORTED_PACKAGES: {
         readonly value: "wdio-vitaqai-service$--$vitaqai";
     }];
 };
-export declare const SUPPORTED_BROWSER_RUNNER_PRESETS: {
+export declare const SUPPORTED_BROWSER_RUNNER_PRESETS: ({
     name: string;
     value: string;
-}[];
+} | {
+    name: string;
+    value: boolean;
+})[];
 export declare const TESTING_LIBRARY_PACKAGES: Record<string, string>;
 export declare const BACKEND_CHOICES: readonly ["On my local machine", "In the cloud using Experitest", "In the cloud using Sauce Labs", "In the cloud using BrowserStack", "In the cloud using Testingbot or LambdaTest or a different service", "I have my own Selenium cloud"];
 export declare const PROTOCOL_OPTIONS: readonly ["https", "http"];
@@ -266,10 +269,13 @@ export declare const QUESTIONNAIRE: ({
     type: string;
     name: string;
     message: string;
-    choices: {
+    choices: ({
         name: string;
         value: string;
-    }[];
+    } | {
+        name: string;
+        value: boolean;
+    })[];
     when: typeof isBrowserRunner;
     default?: undefined;
     validate?: undefined;

package/build/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAG9C,eAAO,MAAM,GAAG,KAA6B,CAAA;AAE7C,eAAO,MAAM,YAAY,QAAqE,CAAA;AAE9F,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAA;AAED,eAAO,MAAM,mBAAmB,8HAI/B,CAAA;AAED,eAAO,MAAM,6BAA6B,8cAYzC,CAAA;AAED,eAAO,MAAM,iCAAiC,8CAG7C,CAAA;AAED,eAAO,MAAM,WAAW,KAAK,CAAA;AAE7B,eAAO,MAAM,cAAc;;;;CAI1B,CAAA;AAED,eAAO,MAAM,UAAU;;;;CAItB,CAAA;AAED,eAAO,MAAM,uBAAuB,iGAI1B,CAAA;AAEV,eAAO,MAAM,gBAAgB;;;;CAInB,CAAA;AAEV;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFrB,CAAA;AAEV,eAAO,MAAM,gCAAgC;;;GAQ5C,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAK3D,CAAA;AAED,eAAO,MAAM,eAAe,6OAOlB,CAAA;AAEV,eAAO,MAAM,gBAAgB,4BAGnB,CAAA;AAEV,eAAO,MAAM,aAAa,+BAIhB,CAAA;AAEV,iBAAS,eAAe,CAAE,OAAO,EAAE,YAAY,WAE9C;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAoBqB,YAAY;;;;;;;uBAWR,YAAY;;;;;;;;oBAchB,YAAY;;;;;;;;;oBAMZ,YAAY;;;;;;;;;oBAyBZ,YAAY;;;;;;;oBAkDZ,YAAY;;;;;;;uBAuBR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAcb,YAAY;;;;;;;;;;;;;;;uBAUZ,YAAY;oBACf,YAAY;;;;;;;;oBAkBZ,YAAY;;;;;;;uBAWT,YAAY;oBAKf,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAqBpC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAaZ,YAAY;wBAcgB,MAAM,EAAE;;IA+BzD,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAG9C,eAAO,MAAM,GAAG,KAA6B,CAAA;AAE7C,eAAO,MAAM,YAAY,QAAqE,CAAA;AAE9F,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAA;AAED,eAAO,MAAM,mBAAmB,8HAI/B,CAAA;AAED,eAAO,MAAM,6BAA6B,8cAYzC,CAAA;AAED,eAAO,MAAM,iCAAiC,8CAG7C,CAAA;AAED,eAAO,MAAM,WAAW,KAAK,CAAA;AAE7B,eAAO,MAAM,cAAc;;;;CAI1B,CAAA;AAED,eAAO,MAAM,UAAU;;;;CAItB,CAAA;AAED,eAAO,MAAM,uBAAuB,iGAI1B,CAAA;AAEV,eAAO,MAAM,gBAAgB;;;;CAInB,CAAA;AAEV;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFrB,CAAA;AAEV,eAAO,MAAM,gCAAgC;;;;;;IAQ5C,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAM3D,CAAA;AAED,eAAO,MAAM,eAAe,6OAOlB,CAAA;AAEV,eAAO,MAAM,gBAAgB,4BAGnB,CAAA;AAEV,eAAO,MAAM,aAAa,+BAIhB,CAAA;AAEV,iBAAS,eAAe,CAAE,OAAO,EAAE,YAAY,WAE9C;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAoBqB,YAAY;;;;;;;uBAWR,YAAY;;;;;;;;oBAchB,YAAY;;;;;;;;;oBAMZ,YAAY;;;;;;;;;oBAyBZ,YAAY;;;;;;;oBAkDZ,YAAY;;;;;;;uBAuBR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAcb,YAAY;;;;;;;;;;;;;;;uBAUZ,YAAY;oBAIf,YAAY;;;;;;;;oBAkBZ,YAAY;;;;;;;uBAWT,YAAY;oBAKf,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAqBpC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAaZ,YAAY;wBAcgB,MAAM,EAAE;;IA+BzD,CAAA"}

package/build/constants.js

@@ -147,13 +147,14 @@ export const SUPPORTED_BROWSER_RUNNER_PRESETS = [
     { name: 'SolidJS (https://www.solidjs.com/)', value: 'vite-plugin-solid$--$solid' },
     { name: 'React (https://reactjs.org/)', value: '@vitejs/plugin-react$--$react' },
     { name: 'Preact (https://preactjs.com/)', value: '@preact/preset-vite$--$preact' },
-    { name: 'Other', value: '' }
+    { name: 'Other', value: false }
 ];
 export const TESTING_LIBRARY_PACKAGES = {
     react: '@testing-library/react',
     preact: '@testing-library/preact',
     vue: '@testing-library/vue',
-    svelte: '@testing-library/svelte'
+    svelte: '@testing-library/svelte',
+    solid: 'solid-testing-library'
 };
 export const BACKEND_CHOICES = [
     'On my local machine',
@@ -342,7 +343,10 @@ export const QUESTIONNAIRE = [{
         type: 'input',
         name: 'specs',
         message: 'Where should these files be located?',
-        default: /* istanbul ignore next */ (answers) => getDefaultFiles(answers, 'test/specs/**/*'),
+        default: /* istanbul ignore next */ (answers) => {
+            const pattern = isBrowserRunner(answers) ? 'src/**/*.test' : 'test/specs/**/*';
+            return getDefaultFiles(answers, pattern);
+        },
         when: /* istanbul ignore next */ (answers) => answers.generateTestFiles && answers.framework.match(/(mocha|jasmine)/)
     }, {
         type: 'input',

package/build/templates/exampleFiles/browser/Component.css.ejs

@@ -0,0 +1,120 @@
+:root {
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+
+a {
+    font-weight: 500;
+    color: #EA5906;
+    text-decoration: inherit;
+}
+
+a:hover {
+    color: #EA5906;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+h1 {
+    font-size: 3.2em;
+    line-height: 1.1;
+}
+
+button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
+}
+
+button:hover {
+    border-color: #EA5906;
+}
+
+button:focus,
+button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #EA590633;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+#root {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
+.logo {
+    height: 12em;
+    padding: 1.5em;
+    will-change: filter;
+}
+
+.logo:hover {
+    filter: drop-shadow(0 0 2em #EA5906aa);
+}
+
+.logo.react:hover {
+    filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    a:nth-of-type(2) .logo {
+        animation: logo-spin infinite 20s linear;
+    }
+}
+
+.card {
+    padding: 2em;
+}
+
+.read-the-docs {
+    color: #888;
+}

package/build/templates/exampleFiles/browser/Component.lit.ejs

@@ -0,0 +1,128 @@
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+@customElement('my-element')
+export class MyElement extends LitElement {
+    /**
+     * Copy for the read the docs hint.
+     */
+    @property()
+    docsHint = 'Click on the Vite and Lit logos to learn more'
+
+    /**
+     * The number of times the button has been clicked.
+     */
+    @property({ type: Number })
+    count = 0
+
+    render() {
+        return html`
+        <div>
+            <a href="https://webdriver.io/docs/component-testing" target="_blank">
+                <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo"
+                    alt="WebdriverIO logo" />
+            </a>
+        </div>
+        <h1>
+            <slot></slot>
+        </h1>
+        <div class="card">
+            <button @click=${this._onClick} part="button">
+                count is ${this.count}
+            </button>
+            <p>
+                Edit <code>src/Component.test.tsx</code> and save to test HMR
+            </p>
+        </div>
+        <p class="read-the-docs">${this.docsHint}</p>
+    `
+    }
+
+    private _onClick() {
+        this.count++
+    }
+
+    static styles = css`
+    :host {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 2rem;
+      text-align: center;
+    }
+
+    .logo {
+      height: 6em;
+      padding: 1.5em;
+      will-change: filter;
+      transition: filter 300ms;
+    }
+    .logo:hover {
+      filter: drop-shadow(0 0 2em #646cffaa);
+    }
+    .logo.lit:hover {
+      filter: drop-shadow(0 0 2em #325cffaa);
+    }
+
+    .card {
+      padding: 2em;
+    }
+
+    .read-the-docs {
+      color: #888;
+    }
+
+    h1 {
+      font-size: 3.2em;
+      line-height: 1.1;
+    }
+
+    a {
+      font-weight: 500;
+      color: #646cff;
+      text-decoration: inherit;
+    }
+    a:hover {
+      color: #535bf2;
+    }
+
+    button {
+      border-radius: 8px;
+      border: 1px solid transparent;
+      padding: 0.6em 1.2em;
+      font-size: 1em;
+      font-weight: 500;
+      font-family: inherit;
+      background-color: #1a1a1a;
+      cursor: pointer;
+      transition: border-color 0.25s;
+    }
+    button:hover {
+      border-color: #646cff;
+    }
+    button:focus,
+    button:focus-visible {
+      outline: 4px auto -webkit-focus-ring-color;
+    }
+
+    @media (prefers-color-scheme: light) {
+      a:hover {
+        color: #747bff;
+      }
+      button {
+        background-color: #f9f9f9;
+      }
+    }
+  `
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'my-element': MyElement
+    }
+}

package/build/templates/exampleFiles/browser/Component.lit.test.ejs

@@ -0,0 +1,22 @@
+import { html, render } from 'lit'
+import { $, expect } from '@wdio/globals'
+
+import './Component.lit.js'
+import './Component.css'
+
+describe('Lit component testing', () => {
+    it('should increment value on click', async () => {
+        render(
+            html`<my-element id="root">WebdriverIO Component Testing</my-element>`,
+            document.body
+        )
+
+        const button = await $('my-element').$('>>>button')
+        await expect(button).toHaveText('count is 0')
+
+        await button.click()
+        await button.click()
+
+        await expect(button).toHaveText('count is 2')
+    })
+})

package/build/templates/exampleFiles/browser/Component.preact.ejs

@@ -0,0 +1,28 @@
+import { useState } from 'preact/hooks'
+import './Component.css'
+
+export function App() {
+    const [count, setCount] = useState(0)
+
+    return (
+        <>
+            <div>
+                <a href="https://webdriver.io/docs/component-testing" target="_blank">
+                    <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo" alt="WebdriverIO logo" />
+                </a>
+            </div>
+            <h1>WebdriverIO Component Testing</h1>
+            <div class="card">
+                <button onClick={() => setCount((count) => count + 1)}>
+                    count is {count}
+                </button>
+                <p>
+                    Edit <code>src/Component.test.tsx</code> and save to test HMR
+                </p>
+            </div>
+            <p class="read-the-docs">
+                Click on the Vite and Preact logos to learn more
+            </p>
+        </>
+    )
+}

package/build/templates/exampleFiles/browser/Component.preact.test.ejs

@@ -0,0 +1,57 @@
+<%
+const harnessImport = installTestingLibrary
+    ? `import { h } from 'preact'\nimport { render, screen, fireEvent } from '@testing-library/preact'`
+    : `import { render, h } from 'preact'\nimport htm from 'https://esm.sh/htm'`
+const renderCommand = installTestingLibrary
+    ? `render(<ExampleComponent />)`
+    : `const root = createRoot(container)
+        root.render(<ExampleComponent />)`
+%>
+import { expect, $ } from '@wdio/globals'
+<%- harnessImport %>
+<% if (installTestingLibrary) { %>
+import * as matchers from '@testing-library/jest-dom/matchers'
+expect.extend(matchers)
+<% } else { %>
+// Initialize htm with Preact
+const html = htm.bind(h);
+<% } %>
+import ExampleComponent from './Component.js'
+
+describe('Preact Component Tests', () => {
+    <% if (installTestingLibrary) { %>
+    it('should test component with Testing Library', async () => {
+        render(<ExampleComponent />)
+        const component = screen.getByText(/count is 0/i)
+        expect(component).toBeInTheDocument()
+
+        await fireEvent.click(component)
+        await fireEvent.click(component)
+
+        expect(screen.getByText(/count is 2/i)).toBeInTheDocument()
+    })
+    <% } else { %>
+    let container: Element
+
+    beforeEach(() => {
+        container = document.createElement('div')
+        document.body.appendChild(container)
+    })
+
+    afterEach(() => {
+        container?.remove()
+    })
+    <% } %>
+
+    it('should test component with WebdriverIO', async () => {
+        <%- renderCommand %>
+
+        const component = await $('button=count is 0')
+        await expect(component).toBePresent()
+
+        await component.click()
+        await component.click()
+
+        await expect($('button=count is 2')).toBePresent()
+    })
+})

package/build/templates/exampleFiles/browser/Component.react.ejs

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+
+import './Component.css'
+
+export default function ExampleComponent () {
+    const [count, setCount] = useState(0)
+
+    return (
+        <div id="root">
+            <div>
+                <a href="https://webdriver.io/docs/component-testing" target="_blank">
+                    <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo" alt="WebdriverIO logo" />
+                </a>
+            </div>
+            <h1>WebdriverIO Component Testing</h1>
+            <div className="card">
+                <button onClick={() => setCount((count) => count + 1)}>
+                    count is {count}
+                </button>
+                <p>
+                    Edit <code>src/Component.test.tsx</code> and save to test HMR
+                </p>
+            </div>
+            <p className="read-the-docs">
+                Click on the WebdriverIO logo to learn more
+            </p>
+        </div>
+    )
+}

package/build/templates/exampleFiles/browser/Component.react.test.ejs

@@ -0,0 +1,55 @@
+<%
+const harnessImport = installTestingLibrary
+    ? `import { render, screen, fireEvent } from '@testing-library/react'`
+    : `import { createRoot } from 'react-dom/client'`
+const renderCommand = installTestingLibrary
+    ? `render(<ExampleComponent />)`
+    : `const root = createRoot(container)
+        root.render(<ExampleComponent />)`
+%>
+import React from 'react'
+import { expect, $ } from '@wdio/globals'
+<%- harnessImport %>
+<% if (installTestingLibrary) { %>
+import * as matchers from '@testing-library/jest-dom/matchers'
+expect.extend(matchers)
+<% } %>
+import ExampleComponent from './Component.js'
+
+describe('React Component Tests', () => {
+    <% if (installTestingLibrary) { %>
+    it('should test component with Testing Library', async () => {
+        render(<ExampleComponent />)
+        const component = screen.getByText(/count is 0/i)
+        expect(component).toBeInTheDocument()
+
+        await fireEvent.click(component)
+        await fireEvent.click(component)
+
+        expect(screen.getByText(/count is 2/i)).toBeInTheDocument()
+    })
+    <% } else { %>
+    let container: Element
+
+    beforeEach(() => {
+        container = document.createElement('div')
+        document.body.appendChild(container)
+    })
+
+    afterEach(() => {
+        container?.remove()
+    })
+    <% } %>
+
+    it('should test component with WebdriverIO', async () => {
+        <%- renderCommand %>
+
+        const component = await $('button=count is 0')
+        await expect(component).toBePresent()
+
+        await component.click()
+        await component.click()
+
+        await expect($('button=count is 2')).toBePresent()
+    })
+})

package/build/templates/exampleFiles/browser/Component.solid.ejs

@@ -0,0 +1,28 @@
+import { createSignal } from 'solidjs'
+import './Component.css'
+
+export function App() {
+    const [count, setCount] = createSignal(0)
+
+    return (
+        <>
+            <div>
+                <a href="https://webdriver.io/docs/component-testing" target="_blank">
+                    <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo" alt="WebdriverIO logo" />
+                </a>
+            </div>
+            <h1>WebdriverIO Component Testing</h1>
+            <div class="card">
+                <button onClick={() => setCount((count) => count + 1)}>
+                    count is {count}
+                </button>
+                <p>
+                    Edit <code>src/Component.test.tsx</code> and save to test HMR
+                </p>
+            </div>
+            <p class="read-the-docs">
+                Click on the Vite and Preact logos to learn more
+            </p>
+        </>
+    )
+}

package/build/templates/exampleFiles/browser/Component.solid.test.ejs

@@ -0,0 +1,55 @@
+<%
+const harnessImport = installTestingLibrary
+    ? `import { cleanup, render, screen } from 'solid-testing-library'`
+    : `import { render } from 'solid-js/web'`
+const renderCommand = installTestingLibrary
+    ? `render(() => <ExampleComponent />)`
+    : `render(<ExampleComponent />, container)`
+%>
+import { expect, $ } from '@wdio/globals'
+<%- harnessImport %>
+<% if (installTestingLibrary) { %>
+import * as matchers from '@testing-library/jest-dom/matchers'
+expect.extend(matchers)
+<% } %>
+import ExampleComponent from './Component.js'
+
+describe('Preact Component Tests', () => {
+    <% if (installTestingLibrary) { %>
+    afterEach(cleanup)
+
+    it('should test component with Testing Library', async () => {
+        render(() => <ExampleComponent />)
+        const component = screen.getByText(/count is 0/i)
+        expect(component).toBeInTheDocument()
+
+        await fireEvent.click(component)
+        await fireEvent.click(component)
+
+        expect(screen.getByText(/count is 2/i)).toBeInTheDocument()
+    })
+    <% } else { %>
+    let container: Element
+
+    beforeEach(() => {
+        container = document.createElement('div')
+        document.body.appendChild(container)
+    })
+
+    afterEach(() => {
+        container?.remove()
+    })
+    <% } %>
+
+    it('should test component with WebdriverIO', async () => {
+        <%- renderCommand %>
+
+        const component = await $('button=count is 0')
+        await expect(component).toBePresent()
+
+        await component.click()
+        await component.click()
+
+        await expect($('button=count is 2')).toBePresent()
+    })
+})

package/build/templates/exampleFiles/browser/Component.svelte.ejs

@@ -0,0 +1,47 @@
+<script lang="ts">
+let count = 0
+const increment = () => {
+    count += 1
+}
+</script>
+
+<main id="root">
+    <div>
+        <a href="https://webdriver.io/docs/component-testing" target="_blank">
+            <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo"
+                alt="WebdriverIO logo" />
+        </a>
+    </div>
+    <h1>WebdriverIO Component Testing</h1>
+
+    <div class="card">
+        <button on:click={increment}>
+            count is {count}
+        </button>
+        <p>
+            Edit <code>src/Component.test.tsx</code> and save to test HMR
+        </p>
+    </div>
+
+    <p class="read-the-docs">
+        Click on the Vite and Svelte logos to learn more
+    </p>
+</main>
+
+<style>
+    .logo {
+        height: 6em;
+        padding: 1.5em;
+        will-change: filter;
+        transition: filter 300ms;
+    }
+    .logo:hover {
+        filter: drop-shadow(0 0 2em #646cffaa);
+    }
+    .logo.svelte:hover {
+        filter: drop-shadow(0 0 2em #ff3e00aa);
+    }
+    .read-the-docs {
+        color: #888;
+    }
+</style>

package/build/templates/exampleFiles/browser/Component.svelte.test.ejs

@@ -0,0 +1,55 @@
+<%
+const harnessImport = installTestingLibrary
+    ? `import { render, fireEvent } from '@testing-library/svelte'`
+    : ``
+const renderCommand = installTestingLibrary
+    ? `render(ExampleComponent)`
+    : `new ExampleComponent({ target: container, props: {} })`
+%>
+import { $, expect } from '@wdio/globals'
+<%- harnessImport %>
+<% if (installTestingLibrary) { %>
+import * as matchers from '@testing-library/jest-dom/matchers'
+expect.extend(matchers)
+<% } %>
+import ExampleComponent from './Component.svelte'
+import './Component.css'
+
+describe('Svelte Component Testing', () => {
+    <% if (installTestingLibrary) { %>
+    it('should test component with Testing Library', async () => {
+        const { getByText } = render(ExampleComponent)
+
+        const component = getByText(/count is 0/i)
+        expect(component).toBeInTheDocument()
+
+        await fireEvent.click(component)
+        await fireEvent.click(component)
+
+        expect(getByText(/count is 2/i)).toBeInTheDocument()
+    })
+    <% } else { %>
+    let container: Element
+
+    beforeEach(() => {
+        container = document.createElement('div')
+        document.body.appendChild(container)
+    })
+
+    afterEach(() => {
+        container?.remove()
+    })
+    <% } %>
+
+    it('should test component with WebdriverIO', async () => {
+        <%- renderCommand %>
+
+        const component = await $('button=count is 0')
+        await expect(component).toBePresent()
+
+        await component.click()
+        await component.click()
+
+        await expect($('button=count is 2')).toBePresent()
+    })
+})

package/build/templates/exampleFiles/browser/Component.vue.ejs

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+    <div id="root">
+        <div>
+            <a href="https://webdriver.io/docs/component-testing" target="_blank">
+                <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" className="logo"
+                    alt="WebdriverIO logo" />
+            </a>
+        </div>
+        <h1>{{ msg }}</h1>
+
+        <div class="card">
+            <button type="button" @click="count++">count is {{ count }}</button>
+            <p>
+                Edit <code>src/Component.test.tsx</code> and save to test HMR
+            </p>
+        </div>
+
+        <p class="read-the-docs">Click on the WebdriverIO logo to learn more</p>
+    </div>
+</template>
+
+<style scoped>
+.read-the-docs {
+    color: #888;
+}
+</style>

package/build/templates/exampleFiles/browser/Component.vue.test.ejs

@@ -0,0 +1,59 @@
+<%
+const harnessImport = installTestingLibrary
+    ? `import { render, fireEvent } from '@testing-library/vue'`
+    : `import { createApp } from 'vue'`
+const renderCommand = installTestingLibrary
+    ? `render(ExampleComponent, { props: { msg: 'WebdriverIO Component Testing' } })`
+    : `createApp(ExampleComponent, { msg: 'WebdriverIO Component Testing' }).mount(container)`
+%>
+import { $, expect } from '@wdio/globals'
+<%- harnessImport %>
+<% if (installTestingLibrary) { %>
+import * as matchers from '@testing-library/jest-dom/matchers'
+expect.extend(matchers)
+<% } %>
+import ExampleComponent from './Component.vue.ejs'
+import './Component.css'
+
+describe('Vue Component Testing', () => {
+    <% if (installTestingLibrary) { %>
+    it('should test component with Testing Library', async () => {
+        // The render method returns a collection of utilities to query your component.
+        const { getByText } = render(ExampleComponent, {
+            props: { msg: 'WebdriverIO Component Testing' }
+        })
+
+        const component = getByText(/count is 0/i)
+        expect(component).toBeInTheDocument()
+
+        await fireEvent.click(component)
+        await fireEvent.click(component)
+
+        expect(getByText(/count is 2/i)).toBeInTheDocument()
+    })
+    <% } else { %>
+    let container: Element
+
+    beforeEach(() => {
+        container = document.createElement('div')
+        container.setAttribute('id', 'app')
+        document.body.appendChild(container)
+    })
+
+    afterEach(() => {
+        container?.remove()
+    })
+    <% } %>
+
+    it('should test component with WebdriverIO', async () => {
+        <%- renderCommand %>
+
+        const component = await $('button=count is 0')
+        await expect(component).toBePresent()
+
+        await component.click()
+        await component.click()
+
+        await expect($('button=count is 2')).toBePresent()
+    })
+})

package/build/templates/exampleFiles/browser/standalone.test.ejs

@@ -0,0 +1,13 @@
+import { $, expect } from '@wdio/globals'
+
+describe('WebdriverIO Component Testing', () => {
+    it('should be able to render to the DOM and assert', async () => {
+        const component = document.createElement('button')
+        component.innerHTML = 'Hello World!'
+        document.body.appendChild(component)
+
+        await expect($('aria/Hello World!')).toBePresent()
+        component.remove()
+        await expect($('aria/Hello World!')).not.toBePresent()
+    })
+})

package/build/templates/exampleFiles/mocha/example.e2e.js.ejs

@@ -21,82 +21,6 @@ describe('My Login application', () => {
     })
 })
 
-<% } else if (runner === 'browser') {
-
-const componentSuffix = preset
-    ? ['svelte', 'vue'].includes(preset)
-        ? preset
-        : isUsingTypeScript ? 'tsx' : 'jsx'
-    : isUsingTypeScript ? 'ts' : 'js'
-const importStatement = preset
-    ? `import Component from '/path/to/component.${componentSuffix}'`
-    : `import '/path/to/component.${componentSuffix}'`
-const renderStatement = (preset
-    ? installTestingLibrary
-        ? [
-            preset.includes('react')
-                ? 'render(<Component />)'
-                : 'render(Component, { prop: \'foobar\' })',
-            'const component = screen.getByText(/Click me!/i)'
-        ]
-        : preset === 'solid'
-            ? [
-                'render(() => <Component />, ref)',
-                'const component = \'.someSelector\''
-            ]
-            : [
-                '// render component here...',
-                'const component = document.querySelector("my-component")'
-            ]
-    : [
-        `const component = document.createElement('example-component')`,
-        `component.setAttribute('prop', 'foobar')`,
-        `document.body.appendChild(component)`
-    ]
-).join('\n        ')
-const assertionStatement = preset && installTestingLibrary
-    ? `expect(component).toContainText('Click me!')`
-    : `await expect(elem).toHaveText('Click me!')`
-
-/**
- * Component Testing
- */
-%>import { expect, $ } from '@wdio/globals'
-<%- installTestingLibrary
-    ? `import { render, screen } from '@testing-library/${preset}'`
-    : preset === 'solid'
-        ? 'import { render } from \'solid-js/web\'\n'
-        : ''
-%><% if (installTestingLibrary) { %>
-
-import * as matchers from '@testing-library/jest-dom/matchers'
-expect.extend(matchers)
-<% } else if (preset === 'preact') { %>
-import {h} from 'preact'
-<% } %>
-// ToDo: fix me
-<%- importStatement %>
-
-describe('<%- (preset || 'my') %> component tests', () => {<%
-    if (preset === 'solid') { %>
-    const ref = document.createElement('div')
-
-    before(() => {
-        document.body.appendChild(ref);
-    })
-
-    after(() => {
-        document.body.removeChild(ref);
-    })
-    <% } %>
-    it('should test my component', async () => {
-        <%- renderStatement %>
-
-        const elem = await $(component)
-        await elem.click()
-        <%- assertionStatement %>
-    })
-})
 <% } else {
 
 /**

package/build/templates/wdio.conf.tpl.ejs

@@ -16,7 +16,9 @@ export const config: Options.Testrunner = {<%
     if (answers.runner === 'browser') {
         if (answers.preset) {
             %>['browser', {
-        preset: '<%- answers.preset %>'
+        preset: '<%- answers.preset %>',
+        // start browser window when `DEBUG` environment variable is set
+        headless: !Boolean(process.env.DEBUG)
     }]<%
         } else {
             %>'browser'<%

package/build/utils.d.ts

@@ -96,6 +96,7 @@ export declare function hasPackage(pkg: string): Promise<boolean>;
  * generate test files based on CLI answers
  */
 export declare function generateTestFiles(answers: ParsedAnswers): Promise<void>;
+export declare function generateBrowserRunnerTestFiles(answers: ParsedAnswers): Promise<void>;
 export declare function getAnswers(yes: boolean): Promise<Questionnair>;
 export declare function getPathForFileGeneration(answers: Questionnair, projectRootDir: string): {
     destSpecRootPath: string;

package/build/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AActD,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAGhD,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAMlE,OAAO,KAAK,EAAE,oBAAoB,EAAE,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAQrI,eAAO,MAAM,UAAU,SAAuC,MAAM,QAAQ,OAAO,MAAM,EAAE,GAAG,CAAC,KAAK,QAAQ,MAAM,CAAC,CAAA;AAEnH,qBAAa,SAAU,SAAQ,kBAAkB;IACtC,MAAM,EAAE,MAAM,CAAA;gBACT,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;CAI9C;AAED;;GAEG;AACH,wBAAsB,cAAc,CAChC,QAAQ,EAAE,QAAQ,CAAC,eAAe,EAAE,EACpC,QAAQ,EAAE,MAAM,QAAQ,CAAC,aAAa,EACtC,GAAG,IAAI,EAAE,GAAG,EAAE,sBA2BjB;AAED;;;;;GAKG;AACH,wBAAsB,eAAe,CAAC,IAAI,EAAE,QAAQ,GAAG,QAAQ,EAAE,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,yBAmBhF;AAED;;;;;;;GAOG;AACH,wBAAsB,iBAAiB,CACnC,cAAc,EAAE,QAAQ,GAAG,QAAQ,EAAE,EACrC,MAAM,EAAE,OAAO,CAAC,UAAU,EAC1B,YAAY,EAAE,YAAY,CAAC,kBAAkB,EAC7C,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,gBAAgB,sBAkB5B;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,GAAE,YAAY,CAAC,mBAAwB,UAkBxE;AAoBD,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,2BASxD;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,sBAYvE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,gBAAgB,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,MAAM,UAAQ,QA0C3F;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,SAAS,GAAG,gBAAgB,CAMvF;AAED,eAAO,MAAM,sBAAsB,YAAa,MAAM,EAAE,KAAG,OAAO,GAAG,MAgBpE,CAAA;AAED,wBAAsB,eAAe,CAAC,GAAG,EAAE,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+C9D;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,YAAY,EAAE,YAAY,CAAC,EAAE,YAAY,UAShF;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,oBAU7C;AAED;;GAEG;AACH,wBAAsB,cAAc,CAAC,OAAO,EAAE,YAAY,mGASzD;AAED;;;GAGG;AACH,wBAAsB,UAAU,CAAC,GAAG,EAAE,MAAM,oBAO3C;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,OAAO,EAAE,aAAa,iBAM7D;AAGD,wBAAsB,8BAA8B,CAAC,OAAO,EAAE,aAAa,iBAmC1E;AAmCD,wBAAsB,UAAU,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,CA6EpE;AAED,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM;;;;;EAwBrF;AAED,wBAAsB,eAAe,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,mBAQ3E;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,iBAAiB,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAYlG;AAED;;;;GAIG;AACH,wBAAsB,eAAe,CAAC,GAAG,SAAgB,GAAG,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC,CAkB5F;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,YAAY,iBAehF;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,aAAa,EAAE,aAAa,8BAgCnE;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,QAoDxF;AAED;;GAEG;AACH,wBAAsB,eAAe,CAAC,aAAa,EAAE,aAAa,iBAyCjE;AAED;;GAEG;AACH,wBAAsB,UAAU,CAAC,aAAa,EAAE,aAAa,iBA4C5D;AAED,wBAAsB,gBAAgB,CAAC,aAAa,EAAE,aAAa,iBAgBlE;AAED,wBAAsB,gBAAgB,CAAC,aAAa,EAAE,aAAa,oBAkBlE"}

package/build/utils.js

@@ -323,6 +323,46 @@ export async function hasPackage(pkg) {
  * generate test files based on CLI answers
  */
 export async function generateTestFiles(answers) {
+    if (answers.runner === 'local') {
+        return generateLocalRunnerTestFiles(answers);
+    }
+    return generateBrowserRunnerTestFiles(answers);
+}
+const TSX_BASED_FRAMEWORKS = ['react', 'preact', 'solid'];
+export async function generateBrowserRunnerTestFiles(answers) {
+    const isUsingFramework = typeof answers.preset === 'string';
+    const preset = isUsingFramework
+        ? answers.preset || 'lit'
+        : '';
+    const tplRootDir = path.join(TEMPLATE_ROOT_DIR, 'browser');
+    await fs.mkdir(answers.destSpecRootPath, { recursive: true });
+    /**
+     * render css file
+     */
+    if (isUsingFramework) {
+        const renderedCss = await renderFile(path.join(tplRootDir, 'Component.css.ejs'), answers);
+        await fs.writeFile(path.join(answers.destSpecRootPath, 'Component.css'), renderedCss);
+    }
+    /**
+     * render component file
+     */
+    const testExt = `${(answers.isUsingTypeScript ? 'ts' : 'js')}${TSX_BASED_FRAMEWORKS.includes(preset) ? 'x' : ''}`;
+    const fileExt = ['svelte', 'vue'].includes(preset)
+        ? preset
+        : testExt;
+    if (preset) {
+        const componentOutFileName = `Component.${fileExt}`;
+        const renderedComponent = await renderFile(path.join(tplRootDir, `Component.${preset}.ejs`), answers);
+        await fs.writeFile(path.join(answers.destSpecRootPath, componentOutFileName), renderedComponent);
+    }
+    /**
+     * render test file
+     */
+    const componentFileName = preset ? `Component.${preset}.test.ejs` : 'standalone.test.ejs';
+    const renderedTest = await renderFile(path.join(tplRootDir, componentFileName), answers);
+    await fs.writeFile(path.join(answers.destSpecRootPath, `Component.test.${testExt}`), renderedTest);
+}
+async function generateLocalRunnerTestFiles(answers) {
     const testFiles = answers.framework === 'cucumber'
         ? [path.join(TEMPLATE_ROOT_DIR, 'cucumber')]
         : (answers.framework === 'mocha'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wdio/cli",
-  "version": "8.6.1",
+  "version": "8.6.3",
   "description": "WebdriverIO testrunner command line interface",
   "author": "Christian Bromann <mail@bromann.dev>",
   "homepage": "https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-cli",
@@ -34,8 +34,8 @@
   "typeScriptVersion": "3.8.3",
   "dependencies": {
     "@types/node": "^18.0.0",
-    "@wdio/config": "8.6.1",
-    "@wdio/globals": "8.6.1",
+    "@wdio/config": "8.6.2",
+    "@wdio/globals": "8.6.3",
     "@wdio/logger": "8.1.0",
     "@wdio/protocols": "8.5.7",
     "@wdio/types": "8.4.0",
@@ -54,7 +54,7 @@
     "mkdirp": "^2.0.0",
     "read-pkg-up": "9.1.0",
     "recursive-readdir": "^2.2.2",
-    "webdriverio": "8.6.1",
+    "webdriverio": "8.6.3",
     "yargs": "^17.5.1",
     "yarn-install": "^1.0.0"
   },
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "739de878c7b8f9b369c332d3beb366ccce83d0f0"
+  "gitHead": "24bb631283562f45dd2bdcb622a0c0d93cf075c2"
 }