@wdio/cli 9.0.0 → 9.0.3

package/build/commands/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/commands/config.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAWjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAUxE,eAAO,MAAM,OAAO,WAAW,CAAA;AAC/B,eAAO,MAAM,IAAI,4EAA4E,CAAA;AAE7F,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;CAkBV,CAAA;AAEV,eAAO,MAAM,OAAO,UAAW,IAAI;;;;;;;;;;;;;;;;;;GAKlC,CAAA;AAED,eAAO,MAAM,YAAY,QAAwB,OAAO,KAAG,OAAO,CAAC,aAAa,CAyF/E,CAAA;AAED,wBAAsB,gBAAgB,CAAC,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,iBAqBlF;AAED,wBAAsB,OAAO,CAAC,IAAI,EAAE,sBAAsB,EAAE,YAAY,0BAAmB;;;;GAQ1F;AAED;;;;GAIG;AACH,wBAAsB,qBAAqB,CAAC,MAAM,EAAE,MAAM;;;GAMzD;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CAAC,UAAU,EAAE,MAAM,+BAQ3D;AAED;;;;;;GAMG;AACH,wBAAsB,0BAA0B,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,0BAAmB,8BA4BpH"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/commands/config.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAWjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAUxE,eAAO,MAAM,OAAO,WAAW,CAAA;AAC/B,eAAO,MAAM,IAAI,4EAA4E,CAAA;AAE7F,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;CAkBV,CAAA;AAEV,eAAO,MAAM,OAAO,UAAW,IAAI;;;;;;;;;;;;;;;;;;GAKlC,CAAA;AAED,eAAO,MAAM,YAAY,QAAwB,OAAO,KAAG,OAAO,CAAC,aAAa,CAyF/E,CAAA;AAED,wBAAsB,gBAAgB,CAAC,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,iBAqBlF;AAED,wBAAsB,OAAO,CAAC,IAAI,EAAE,sBAAsB,EAAE,YAAY,0BAAmB;;;;GAQ1F;AAED;;;;GAIG;AACH,wBAAsB,qBAAqB,CAAC,MAAM,EAAE,MAAM;;;GAMzD;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CAAC,UAAU,EAAE,MAAM,+BAQ3D;AAED;;;;;;GAMG;AACH,wBAAsB,0BAA0B,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,0BAAmB,8BA6BpH"}

package/build/index.js

@@ -87,7 +87,7 @@ import { HOOK_DEFINITION } from "@wdio/utils";
 // package.json
 var package_default = {
   name: "@wdio/cli",
-  version: "9.0.0-alpha.0",
+  version: "9.0.1",
   description: "WebdriverIO testrunner command line interface",
   author: "Christian Bromann <mail@bromann.dev>",
   homepage: "https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-cli",
@@ -1849,6 +1849,7 @@ async function runAppiumInstaller(parsedAnswers) {
   }
   const answer = await inquirer.prompt({
     name: "continueWithAppiumSetup",
+    // @ts-expect-error
     message: "Continue with Appium setup using appium-installer (https://github.com/AppiumTestDistribution/appium-installer)?",
     type: "confirm",
     default: true
@@ -2672,12 +2673,13 @@ async function canAccessConfigPath(configPath) {
 }
 async function missingConfigurationPrompt(command5, configPath, runConfigCmd = runConfigCommand) {
   const message = `Could not execute "${command5}" due to missing configuration, file "${path3.parse(configPath).name}[.js/.ts]" not found! Would you like to create one?`;
-  const { config } = await inquirer2.prompt([{
+  const { config } = await inquirer2.prompt({
     type: "confirm",
     name: "config",
+    // @ts-expect-error
     message,
     default: false
-  }]);
+  });
   if (!config) {
     console.log(`No WebdriverIO configuration found in "${process.cwd()}"`);
     return !process.env.VITEST_WORKER_ID && process.exit(0);

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

@@ -0,0 +1,121 @@
+:root {
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    text-align: center;
+
+    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,154 @@
+import { LitElement, css, html } from 'lit'
+<%- answers.isUsingTypeScript ? `import { customElement, property } from 'lit/decorators.js'\n` : ''
+%>
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+<%- answers.isUsingTypeScript ? `@customElement('my-element')\n` : ''
+%>export class MyElement extends LitElement {<%
+if (answers.isUsingTypeScript) { %>
+    /**
+     * Copy for the read the docs hint.
+     */
+    @property()
+    docsHint = 'Click on the WebdriverIO logo to learn more!'
+
+    /**
+     * The number of times the button has been clicked.
+     */
+    @property({ type: Number })
+    count = 0
+<% } else { %>
+    static get properties() {
+        return {
+            /**
+            * Copy for the read the docs hint.
+            */
+            docsHint: { type: String },
+
+            /**
+            * The number of times the button has been clicked.
+            */
+            count: { type: Number },
+        }
+    }
+
+    constructor() {
+        super()
+        this.docsHint = 'Click on the WebdriverIO logo to learn more!'
+        this.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.<%- answers.isUsingTypeScript ? `ts` : 'js' %></code> and save to test HMR
+            </p>
+        </div>
+        <p class="read-the-docs">${this.docsHint}</p>
+    `
+    }
+
+    <%- answers.isUsingTypeScript ? `private ` : ''%>_onClick() {
+        this.count++
+    }
+
+    <% if (answers.isUsingTypeScript) { %>static styles = css`<% } else { %>static get styles() {
+        return 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;
+      }
+    }
+  `
+  <% if (!answers.isUsingTypeScript) { %>}<% } %>
+}
+<% if (answers.isUsingTypeScript) { %>
+declare global {
+    interface HTMLElementTagNameMap {
+        'my-element': MyElement
+    }
+}<%
+} else { %>
+window.customElements.define('my-element', MyElement)<%
+} %>

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

@@ -0,0 +1,24 @@
+import { html, render } from 'lit'
+import { $, expect } from '@wdio/globals'
+
+import './Component.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')<%-
+        answers.includeVisualTesting ? `
+        await expect(button).toMatchElementSnapshot('counterButton')` : '' %>
+    })
+})

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

@@ -0,0 +1,28 @@
+import { useState } from 'preact/hooks'
+import './Component.css'
+
+export default function ExampleComponent () {
+    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.<%- answers.isUsingTypeScript ? `tsx` : 'jsx' %></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,59 @@
+<%
+const harnessImport = answers.installTestingLibrary
+    ? `import { h } from 'preact'\nimport { render, screen, fireEvent } from '@testing-library/preact'`
+    : `import { h, render } from 'preact'\nimport htm from 'https://esm.sh/htm'`
+const renderCommand = answers.installTestingLibrary
+    ? `render(<ExampleComponent />)`
+    : "render(html`<${ExampleComponent} />`, container)"
+%>
+import { expect, $ } from '@wdio/globals'
+<%- harnessImport %>
+<% if (answers.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'
+
+describe('Preact Component Tests', () => {
+    <% if (answers.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<%- answers.isUsingTypeScript ? `: 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')
+        await expect(component).toBePresent()
+        await expect(component).toHaveText('count is 0')
+
+        await component.click()
+        await component.click()
+
+        await expect(component).toHaveText('count is 2')<%-
+        answers.includeVisualTesting ? `
+        await expect(component).toMatchElementSnapshot('counterButton')` : '' %>
+    })
+})

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.<%- answers.isUsingTypeScript ? `tsx` : 'jsx' %></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,58 @@
+<%
+const harnessImport = answers.installTestingLibrary
+    ? `import { render, screen, fireEvent } from '@testing-library/react'`
+    : `import { createRoot } from 'react-dom/client'`
+const renderCommand = answers.installTestingLibrary
+    ? `render(<ExampleComponent />)`
+    : `const root = createRoot(container)
+        root.render(<ExampleComponent />)`
+%>
+import React from 'react'
+import { expect, $ } from '@wdio/globals'
+<%- harnessImport %>
+<% if (answers.installTestingLibrary) { %>
+import * as matchers from '@testing-library/jest-dom/matchers'
+expect.extend(matchers)
+<% } %>
+import ExampleComponent from './Component'
+
+describe('React Component Tests', () => {
+    <% if (answers.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<%- answers.isUsingTypeScript ? `: 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')
+        await expect(component).toBePresent()
+        await expect(component).toHaveText('count is 0')
+
+        await component.click()
+        await component.click()
+
+        await expect(component).toHaveText('count is 2')<%-
+        answers.includeVisualTesting ? `
+        await expect(component).toMatchElementSnapshot('counterButton')` : '' %>
+    })
+})

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

@@ -0,0 +1,28 @@
+import { createSignal } from 'solid-js'
+import './Component.css'
+
+export default function ExampleComponent () {
+    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.<%- answers.isUsingTypeScript ? `tsx` : 'jsx' %></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,58 @@
+<%
+const harnessImport = answers.installTestingLibrary
+    ? `import { cleanup, render, screen, fireEvent } from 'solid-testing-library'`
+    : `import { render } from 'solid-js/web'`
+const renderCommand = answers.installTestingLibrary
+    ? `render(() => <ExampleComponent />)`
+    : `render(<ExampleComponent />, container)`
+%>
+import { expect, $ } from '@wdio/globals'
+<%- harnessImport %>
+<% if (answers.installTestingLibrary) { %>
+import * as matchers from '@testing-library/jest-dom/matchers'
+expect.extend(matchers)
+<% } %>
+import ExampleComponent from './Component'
+
+describe('Preact Component Tests', () => {
+    <% if (answers.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<%- answers.isUsingTypeScript ? `: 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')
+        await expect(component).toBePresent()
+        await expect(component).toHaveText('count is 0')
+
+        await component.click()
+        await component.click()
+
+        await expect(component).toHaveText('count is 2')<%-
+        answers.includeVisualTesting ? `
+        await expect(component).toMatchElementSnapshot('counterButton')` : '' %>
+    })
+})

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

@@ -0,0 +1,43 @@
+import { Component, Prop, h, Fragment } from '@stencil/core'
+
+@Component({
+    tag: 'my-element',
+    shadow: true,
+    styleUrl: 'Component.css'
+})
+export class MyElement {
+    @Prop() count = 0
+    @Prop() docsHint = 'Click on the WebdriverIO logo to learn more!'
+
+    normalize(name: string): string {
+        if (name) {
+            return name.slice(0, 1).toUpperCase() + name.slice(1).toLowerCase()
+        }
+        return ''
+    }
+
+    render() {
+        return (
+            <>
+                <div>
+                    <a href="https://webdriver.io/docs/component-testing" target="_blank">
+                        <img src="https://webdriver.io/assets/images/robot-3677788dd63849c56aa5cb3f332b12d5.svg" class="logo"
+                            alt="WebdriverIO logo" />
+                    </a>
+                </div>
+                <h1>
+                    <slot />
+                </h1>
+                <div class="card">
+                    <button onClick={() => { this.count = this.count + 1; }} 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>
+            </>
+        )
+    }
+}