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 组件的交互，或使用嵌套的 Shadow DOM 树运行深度选择器查询。由于交互是通过标准化的自动化协议进行的，因此可以保证它们的行为是原生的，而不仅仅是 JavaScript 模拟。

Web 组件测试的简单设置

在几秒钟内开始使用 WebdriverIO

WebdriverIO 测试运行器带有一个命令行界面，该界面提供了一个强大的配置实用程序，并帮助您在不到一分钟的时间内创建测试设置。它允许您从可用的测试框架集成中进行选择，并轻松添加所有支持的报告程序和服务插件！

只需一个简单的命令，即可设置完整的测试套件


$ npm init wdio@latest ./

开始了解有关 WebdriverIO 及其如何开始使用的更多信息在 YouTube 上。

观看有关 WebdriverIO 的演讲

WebdriverIO 周围的社区积极地在各种用户组或会议上讨论有关使用 WebdriverIO 进行自动化测试的特定主题。查看 Julia Pottinger 在开放质量大会上关于我最喜欢的 WebdriverIO 功能的演讲。Julia Pottinger

还有许多 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)