import { $, expect } from '@wdio/globals'
import { render } from '@testing-library/vue'
import HelloWorld from '../../src/components/HelloWorld.vue'

describe('Component Testing', () => {
    it('increments value on click', async () => {
        const { getByText } = render(HelloWorld)
        const btn = getByText('count is 0')

        // transform into WebdriverIO element
        const button = await $(btn)

        // interact with element like a real user
        await button.click()
        await button.click()

        await expect(button).toMatchInlineSnapshot(
            "count is 2"
        )
    })
})

在真實瀏覽器中進行端對端和單元/元件測試！

WebdriverIO 是適用於您的 Web 應用程式開發的一體式框架。它讓您能夠執行小型且輕量的元件測試，以及在瀏覽器或行動裝置上執行端對端測試場景。這保證您可以在使用者使用的環境中進行測試。

它配備智慧選取器策略，可簡化與React 元件互動或使用巢狀陰影 DOM 樹執行深度選取器查詢的操作。由於互動是透過標準化的自動化協定進行的，因此保證它們的行為是原生的，而不僅僅是 JavaScript 模擬的。

輕鬆設定 Web 元件測試，搭配

在幾秒鐘內開始使用 WebdriverIO

WebdriverIO 測試執行器配備一個命令列介面，提供強大的組態公用程式，並協助您在不到一分鐘的時間內建立測試設定。它讓您從可用的測試框架整合中選擇，並輕鬆新增所有支援的報告器和服務外掛！

只需一個簡單的命令，您就可以設定完整的測試套件


$ npm init wdio@latest ./

開始深入瞭解 WebdriverIO，以及如何開始使用在 YouTube 上的教學影片。

觀看有關 WebdriverIO 的演講

WebdriverIO 社群積極在各種使用者群組或會議上，針對使用 WebdriverIO 進行自動化測試的特定主題發表演講。請查看Julia Pottinger 在Open Quality Conference 上關於我最喜歡的 WebdriverIO 功能的演講。

還有許多 YouTube 頻道提供社群成員製作的實用教學影片，例如Klamping、Seventeenth Sep 或Automation Bro。

Google Lighthouse 整合

WebdriverIO 不僅根據 WebDriver 協定執行自動化，還利用原生瀏覽器 API 來啟用與熱門開發人員工具（例如 Chrome DevTools 或 Google Lighthouse）的整合。透過 @wdio/lighthouse-service 外掛程式，您可以存取用於驗證您的應用程式是否為有效的 PWA 應用程式的指令，以及用於擷取前端效能指標（例如 `speedIndex` 和其他指標）的指令。

與開發人員工具的整合，例如

await browser.emulateDevice('iPhone X')
await browser.enablePerformanceAudits({
    networkThrottling: 'Good 3G',
    cacheEnabled: true,
    formFactor: 'mobile'
})

// open application under test
await browser.url('https://127.0.0.1:3000')

expect(await browser.getMetrics().firstMeaningfulPaint)
    .toBeBelow(2500)

const pwaCheckResult = await browser.checkPWA()
expect(pwaCheckResult.passed).toBe(true)