Lit

Lit 是一個簡單的程式庫，用於建構快速、輕量的 Web 元件。 使用 WebdriverIO 測試 Lit Web 元件非常容易，這要歸功於 WebdriverIO 的 shadow DOM 選擇器，您只需一個指令即可查詢陰影根中巢狀的元素。

設定

若要在您的 Lit 專案中設定 WebdriverIO，請依照我們的元件測試文件中說明進行操作。 對於 Lit，您不需要預設值，因為 Lit Web 元件不需要透過編譯器執行，它們是純粹的 Web 元件增強。

設定完成後，您可以執行以下命令開始測試

npx wdio run ./wdio.conf.js

撰寫測試

假設您有以下 Lit 元件

./components/Component.ts

import { LitElement, css, html } from 'lit'
import { customElement, property } from 'lit/decorators.js'

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
    @property()
    name?: string = 'World'

    // Render the UI as a function of component state
    render() {
        return html`<p>Hello, ${this.name}!</p>`
    }
}

為了測試元件，您必須在測試開始之前將其渲染到測試頁面中，並確保之後將其清除。

lit.test.js

import expect from 'expect'
import { waitFor } from '@testing-library/dom'

// import Lit component
import './components/Component.ts'

describe('Lit Component testing', () => {
    let elem: HTMLElement

    beforeEach(() => {
        elem = document.createElement('simple-greeting')
    })

    it('should render component', async () => {
        elem.setAttribute('name', 'WebdriverIO')
        document.body.appendChild(elem)

        await waitFor(() => {
            expect(elem.shadowRoot.textContent).toBe('Hello, WebdriverIO!')
        })
    })

    afterEach(() => {
        elem.remove()
    })
})

您可以在我們的範例儲存庫中找到適用於 Lit 的 WebdriverIO 元件測試套件完整範例。