create-wdio 9.0.0 → 9.17.0

package/build/install.d.ts

@@ -0,0 +1,4 @@
+import type { PACKAGE_MANAGER } from './constants.js';
+export declare function installPackages(cwd: string, packages: string[], dev: boolean): Promise<boolean>;
+export declare function getInstallCommand(pm: PACKAGE_MANAGER, packages: string[], dev: boolean): string;
+//# sourceMappingURL=install.d.ts.map

package/build/install.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"install.d.ts","sourceRoot":"","sources":["../src/install.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAgBrD,wBAAsB,eAAe,CAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,OAAO,oBAwBnF;AAED,wBAAgB,iBAAiB,CAAE,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,OAAO,UAGvF"}

package/build/templates/EjsHelpers.d.ts

@@ -0,0 +1,18 @@
+export interface EjsHelpersConfig {
+    useEsm?: boolean;
+    useTypeScript?: boolean;
+}
+export declare class EjsHelpers {
+    readonly useTypeScript: boolean;
+    readonly useEsm: boolean;
+    constructor(config: EjsHelpersConfig);
+    if(condition: boolean, trueValue: string, falseValue?: string): string;
+    ifTs: (trueValue: string, falseValue?: string) => string;
+    ifEsm: (trueValue: string, falseValue?: string) => string;
+    param(name: string, type: string): string;
+    returns(type: string): string;
+    import(exports: string, moduleId: string): string;
+    private modulePathFrom;
+    export(keyword: 'class' | 'function' | 'const' | 'let', name: string): string;
+}
+//# sourceMappingURL=EjsHelpers.d.ts.map

package/build/templates/EjsHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EjsHelpers.d.ts","sourceRoot":"","sources":["../../src/templates/EjsHelpers.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,qBAAa,UAAU;IACnB,SAAgB,aAAa,EAAE,OAAO,CAAA;IACtC,SAAgB,MAAM,EAAE,OAAO,CAAA;gBAEnB,MAAM,EAAE,gBAAgB;IAKpC,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,GAAE,MAAW;IAMjE,IAAI,GAAI,WAAW,MAAM,EAAE,aAAY,MAAW,YACI;IAEtD,KAAK,GAAI,WAAW,MAAM,EAAE,aAAY,MAAW,YACJ;IAE/C,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;IAMhC,OAAO,CAAC,IAAI,EAAE,MAAM;IAMpB,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAkBxC,OAAO,CAAC,cAAc;IAYtB,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,EAAE,IAAI,EAAE,MAAM;CAevE"}

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>
+            </>
+        )
+    }
+}

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

@@ -0,0 +1,45 @@
+import { h } from '@stencil/core'
+import { render } from '@wdio/browser-runner/stencil'
+import { $, expect } from '@wdio/globals'
+
+import { MyElement } from './Component.js'
+
+describe('Stencil component testing', () => {
+    it('should increment value on click automatically', async () => {
+        await render({
+            components: [MyElement],
+            autoApplyChanges: true,
+            template: () => (
+                <my-element count={42}>WebdriverIO Component Testing</my-element>
+            )
+        })
+
+        const button = await $('my-element').$('button')
+        await expect(button).toHaveText('count is 42')
+
+        await button.click()
+        await button.click()
+
+        await expect(button).toHaveText('count is 44')
+    })
+
+    it('should increment value on click after flush', async () => {
+        const { flushAll } = await render({
+            components: [MyElement],
+            template: () => (
+                <my-element count={42}>WebdriverIO Component Testing</my-element>
+            )
+        })
+
+        const button = await $('my-element').$('button')
+        await expect(button).toHaveText('count is 42')
+
+        await button.click()
+        await button.click()
+        flushAll()
+
+        await expect(button).toHaveText('count is 44')<%-
+        answers.includeVisualTesting ? `
+        await expect(button).toMatchElementSnapshot('counterButton')` : '' %>
+    })
+})