本文へスキップ

コンポーネントテスト

WebdriverIOのブラウザランナーを使用すると、WebdriverIOとWebDriverプロトコルを使用して、ページにレンダリングされるものを自動化および操作しながら、実際のデスクトップまたはモバイルブラウザ内でテストを実行できます。このアプローチは、JSDOMに対してのみテストを許可する他のテストフレームワークと比較して、多くの利点があります。

動作原理​

ブラウザランナーはViteを使用してテストページをレンダリングし、テストフレームワークを初期化してブラウザでテストを実行します。現在、Mochaのみサポートしていますが、JasmineとCucumberはロードマップに掲載されています。これにより、Viteを使用していないプロジェクトでも、あらゆる種類のコンポーネントをテストできます。

ViteサーバーはWebdriverIOテストランナーによって起動され、通常のe2eテストと同様にすべてのレポーターとサービスを使用できるように構成されています。さらに、ページ上の任意の要素と対話するためにbrowserインスタンスを初期化します。e2eテストと同様に、グローバルスコープにアタッチされたbrowser変数から、またはinjectGlobalsの設定方法に応じて@wdio/globalsからインポートすることで、このインスタンスにアクセスできます。

WebdriverIOは、次のフレームワークを組み込みでサポートしています。

  • Nuxt：WebdriverIOのテストランナーはNuxtアプリケーションを検出し、プロジェクトのcomposableを自動的に設定し、Nuxtバックエンドのモック作成を支援します。Nuxtドキュメントで詳細をご覧ください。
  • TailwindCSS：WebdriverIOのテストランナーは、TailwindCSSを使用しているかどうかを検出し、テストページに環境を適切にロードします。

設定​

ブラウザでのユニットテストまたはコンポーネントテストのためにWebdriverIOを設定するには、次のようにして新しいWebdriverIOプロジェクトを開始します。

npm init wdio@latest ./
# or
yarn create wdio ./

設定ウィザードが開始したら、ユニットテストとコンポーネントテストの実行にbrowserを選択し、必要に応じてプリセットのいずれかを選択するか、基本的なユニットテストのみを実行する場合は「その他」を選択します。プロジェクトですでにViteを使用している場合は、カスタムVite設定を構成することもできます。詳細については、すべてのランナーオプションを確認してください。

情報

注記：WebdriverIOはデフォルトで、CI環境でヘッドレスにブラウザテストを実行します（例：CI環境変数が'1'または'true'に設定されている場合）。ランナーのheadlessオプションを使用して、この動作を手動で構成できます。

このプロセスの最後に、runnerプロパティを含むさまざまなWebdriverIO設定を含むwdio.conf.jsが見つかるはずです。

wdio.comp.conf.js
loading...

異なる機能を定義することで、必要に応じて異なるブラウザで、並列にテストを実行できます。

すべてがどのように機能するかまだ不明な場合は、WebdriverIOでコンポーネントテストを始める方法に関する次のチュートリアルをご覧ください。

テストハーネス​

テストで実行する内容とコンポーネントのレンダリング方法は、完全にユーザー次第です。ただし、さまざまなコンポーネントフレームワーク（React、Preact、Svelte、Vueなど）のプラグインを提供するため、ユーティリティフレームワークとしてTesting Libraryを使用することをお勧めします。テストページにコンポーネントをレンダリングするのに非常に役立ち、各テスト後にこれらのコンポーネントを自動的にクリーンアップします。

Testing LibraryプリミティブとWebdriverIOコマンドを自由に組み合わせることができます。

component-testing/svelte-example.js
loading...

注記：Testing Libraryのレンダリングメソッドを使用すると、テスト間で作成されたコンポーネントを削除するのに役立ちます。Testing Libraryを使用しない場合は、テスト間でクリーンアップされるコンテナにテストコンポーネントをアタッチしてください。

設定スクリプト​

Node.jsまたはブラウザで任意のスクリプトを実行してテストを設定できます（例：スタイルの挿入、ブラウザAPIのモック、サードパーティサービスへの接続）。WebdriverIOのフックを使用してNode.jsでコードを実行できますが、mochaOpts.requireを使用すると、テストがロードされる前にスクリプトをブラウザにインポートできます。

export const config = {
    // ...
    mochaOpts: {
        ui: 'tdd',
        // provide a setup script to run in the browser
        require: './__fixtures__/setup.js'
    },
    before: () => {
        // set up test environment in Node.js
    }
    // ...
}

たとえば、次の設定スクリプトを使用して、テスト内のすべてのfetch()呼び出しをモックしたい場合

import { fn } from '@wdio/browser-runner'

// run code before all tests are loaded
window.fetch = fn()

export const mochaGlobalSetup = () => {
    // run code after test file is loaded
}

export const mochaGlobalTeardown = () => {
    // run code after spec file was executed
}

これで、テストで、すべてのブラウザリクエストにカスタム応答値を提供できます。Mochaドキュメントでグローバルフィクスチャの詳細をご覧ください。

テストファイルとアプリケーションファイルの監視​

ブラウザテストをデバッグするには、いくつかの方法があります。最も簡単な方法は、--watchフラグを使用してWebdriverIOテストランナーを起動することです。

$ npx wdio run ./wdio.conf.js --watch

これにより、最初にすべてのテストが実行され、すべての実行が完了すると停止します。その後、個々のファイルに変更を加えることができ、それらが個別に再実行されます。アプリケーションファイルを指すfilesToWatchを設定すると、アプリに変更が加えられると、すべてのテストが再実行されます。

デバッグ​

IDEでブレークポイントを設定して、リモートブラウザによって認識させることは（まだ）できませんが、debugコマンドを使用して、任意の時点でテストを停止できます。これにより、ソースタブでブレークポイントを設定してテストをデバッグするために、DevToolsを開くことができます。

debugコマンドが呼び出されると、ターミナルにNode.jsのREPLインターフェースが表示され、次のように表示されます。

The execution has stopped!
You can now go into the browser or use the command line as REPL
(To exit, press ^C again or type .exit)

テストを続行するには、CtrlまたはCommand + cを押すか、.exitと入力します。

Selenium Gridを使用した実行​

Selenium Gridを設定してブラウザをそのグリッド経由で実行する場合は、テストファイルが提供されている正しいホストにブラウザがアクセスできるように、hostブラウザランナーオプションを設定する必要があります。

export const config: WebdriverIO.Config = {
    runner: ['browser', {
        // network IP of the machine that runs the WebdriverIO process
        host: 'http://172.168.0.2'
    }]
}

これにより、ブラウザは、WebdriverIOテストを実行するインスタンスでホストされている正しいサーバーインスタンスを正しく開きます。

例​

一般的なコンポーネントフレームワークを使用したコンポーネントテストの様々な例は、こちらのサンプルリポジトリでご覧いただけます。

ようこそ！お手伝いできることはありますか？

WebdriverIO AI Copilot