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コンポーネントとの対話を簡素化したり、ネストされたシャドウDOMツリーで詳細なセレクタークエリを実行したりするスマートセレクタ戦略が付属しています。対話は標準化された自動化プロトコルを介して行われるため、ネイティブに動作することが保証され、単なるJavaScriptエミュレーションではありません。

Webコンポーネントのテストを簡単に設定

数秒以内にWebdriverIOを始めましょう

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

1つの簡単なコマンドだけで、完全なテストスイートをセットアップできます


$ npm init wdio@latest ./

YouTubeで、WebdriverIOの詳細と開始方法について学び始めましょう。

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.emulateDevice('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を使用していますか？

オープンソースおよびオープンガバナンス

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

💎 プレミアムスポンサー

🥇 ゴールドスポンサー

組織内でWebdriverIOを使用している場合は、スポンサーになることでプロジェクトをサポートすることを検討してください。プロジェクトの継続的な運営と進化に役立ちます。

実際の環境でテスト

多用途で機能豊富

自動待機

Web 標準に基づく

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

献身的なコミュニティ