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はウェブアプリ開発のためのオールインワンフレームワークです。小規模で軽量なコンポーネントテストを実行できるほか、ブラウザやモバイルデバイス上での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プロトコルに基づく自動化を実行するだけでなく、ネイティブブラウザAPIを活用してChrome DevToolsやGoogle Lighthouseなどの人気のある開発者ツールとの統合を可能にします。@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を使用しているのは？

Open Source and Open Governed

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

💎 Premium Sponsors

🥇 Gold Sponsors

あなたの組織内でWebdriverIOを使用している場合は、becoming a sponsorによるプロジェクトの支援をご検討ください。プロジェクトの継続と進化を支援するのに役立ちます。

実環境でのテスト

汎用性と機能の豊富さ

自動待機

Webスタンダードに基づく

ネイティブモバイルサポート

献身的なコミュニティ