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"
        )
    })
})

実際のブラウザでのE2Eおよびユニット/コンポーネントテスト！

WebdriverIOはWebアプリ開発のためのオールインワンフレームワークです。小さく軽量なコンポーネントテストの実行と、ブラウザやモバイルデバイスでのe2eテストシナリオの実行が可能です。これにより、ユーザーが使用する環境でのテストが保証されます。

例えばReact componentsとの対話を簡素化したり、ネストされたシャドウDOMツリーで深いセレクタクエリを実行したりするためのスマートなセレクタ戦略が付属しています。相互作用は標準化された自動化プロトコルを通じて行われるため、ネイティブな動作が保証され、JavaScriptでエミュレートされるだけではありません。

以下によるウェブコンポーネントテストの簡単なセットアップ：

数秒でWebdriverIOをスタート

WebdriverIOテストランナーには、強力な構成ユーティリティを提供し、1分以内にテスト環境を作成するのに役立つコマンドラインインターフェイスが付属しています。利用可能なテストフレームワーク統合から選択し、サポートされているすべてのレポーターとサービスプラグインを簡単に追加できます！

たった一つのシンプルなコマンドで完全なテストスイートをセットアップできます：


$ npm init wdio@latest ./

WebdriverIOについてさらに学び、はじめ方をYouTubeでで知ることができます。

WebdriverIOに関する講演を見る

WebdriverIOを取り巻くコミュニティは、WebdriverIOを使用した自動テストに関する特定のトピックについて、さまざまなユーザーグループやカンファレンスで積極的に発言しています。Open Quality ConferenceでのJulia PottingerによるWebdriverIOのお気に入り機能のこの講演をチェックしてください。

また、Klamping、Seventeenth Sep、Automation Broなどのコミュニティメンバーによる有用なチュートリアルを含む多くのYouTubeチャンネルもあります。

Google Lighthouse統合

WebdriverIOはWebDriverプロトコルに基づく自動化を実行するだけでなく、Chrome DevToolsやGoogle Lighthouseなどの人気のある開発者ツールへの統合を可能にするネイティブブラウザAPIも活用しています。@wdio/lighthouse-serviceプラグインを使用すると、アプリが有効なPWAアプリケーションかどうかを検証するコマンドや、`speedIndex`などのフロントエンドパフォーマンスメトリックをキャプチャするためのコマンドにアクセスできます。

以下のような開発者ツールとの統合：

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

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

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

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

WebdriverIOを誰が使用していますか？

オープンソースとオープンガバナンス

私たちは透明性とコミュニティガバナンスへの強いコミットメントを持つオープンソースプロジェクトです。私たちはLinux Foundationの一部であるOpenJS Foundationの一員です。プロジェクトは完全にボランティアによって運営され、プロジェクトの成功を望む投資企業によって資金提供されています。プロジェクトチームはこれらの企業の寛大なスポンサーシップに感謝しています。