ランナー

WebdriverIO のランナーは、テストランナーを使用する際に、テストがどのように、どこで実行されるかを調整します。現在、WebdriverIO は、ローカルランナーとブラウザーランナーの 2 種類のランナーをサポートしています。

ローカルランナー

ローカルランナーは、ワーカープロセス内でフレームワーク (例: Mocha、Jasmine、Cucumber) を開始し、Node.js 環境内のすべてのテストファイルを実行します。すべてのテストファイルは、最大限の並行処理を可能にするために、機能ごとに個別のワーカープロセスで実行されます。すべてのワーカープロセスは、単一のブラウザーインスタンスを使用するため、最大限の分離を可能にする独自のブラウザーセッションを実行します。

すべてのテストは独自の分離されたプロセスで実行されるため、テストファイル間でデータを共有することはできません。これを回避するには、次の 2 つの方法があります。

すべてのワーカー間でデータを共有するには、@wdio/shared-store-serviceを使用します。
スペックファイルをグループ化します (詳細については、テストスイートの編成を参照してください)。

wdio.conf.js で他に何も定義されていない場合、ローカルランナーは WebdriverIO のデフォルトのランナーです。

インストール

ローカルランナーを使用するには、次の方法でインストールできます。

npm install --save-dev @wdio/local-runner

セットアップ

ローカルランナーは WebdriverIO のデフォルトのランナーであるため、wdio.conf.js 内で定義する必要はありません。明示的に設定したい場合は、次のように定義できます。

// wdio.conf.js
export const {
    // ...
    runner: 'local',
    // ...
}

ブラウザーランナー

ローカルランナーとは対照的に、ブラウザーランナーは、ブラウザー内でフレームワークを開始および実行します。これにより、他の多くのテストフレームワークのように JSDOM ではなく、実際のブラウザーで単体テストまたはコンポーネントテストを実行できます。

JSDOMはテスト目的で広く使用されていますが、結局のところ実際のブラウザーではありませんし、モバイル環境をエミュレートすることもできません。このランナーを使用すると、WebdriverIO を使用して、ブラウザーでテストを簡単に実行し、WebDriver コマンドを使用してページにレンダリングされた要素を操作できます。

JSDOM でのテストの実行と WebdriverIO ブラウザーランナーでのテストの実行の概要を以下に示します。

	JSDOM	WebdriverIO ブラウザーランナー
1.	Node.js 内で、特に WHATWG DOM および HTML 標準の再実装を使用してテストを実行します。	実際のブラウザーでテストを実行し、ユーザーが使用する環境でコードを実行します。
2.	コンポーネントとのインタラクションは、JavaScript を介してのみ模倣できます。	WebdriverIO API を使用して、WebDriver プロトコルを介して要素を操作できます。
3.	Canvas のサポートには、追加の依存関係が必要で、制限があります。	実際の Canvas API にアクセスできます。
4.	JSDOM には、注意点とサポートされていない Web API があります。	実際のブラウザーでテストが実行されるため、すべての Web API がサポートされます。
5.	ブラウザーをまたいだエラーを検出することは不可能です。	モバイルブラウザーを含むすべてのブラウザーをサポートしています。
6.	要素の擬似状態をテストすることはできません。	`:hover` や `:active` などの擬似状態をサポートしています。

このランナーは、Vite を使用してテストコードをコンパイルし、ブラウザーにロードします。次のコンポーネントフレームワークのプリセットが付属しています。

React
Preact
Vue.js
Svelte
SolidJS
Stencil

すべてのテストファイル/テストファイルグループは単一のページ内で実行されます。つまり、各テスト間でページがリロードされ、テスト間の分離が保証されます。

インストール

ブラウザーランナーを使用するには、次の方法でインストールできます。

npm install --save-dev @wdio/browser-runner

セットアップ

ブラウザーランナーを使用するには、wdio.conf.js ファイル内で runner プロパティを定義する必要があります。例:

// wdio.conf.js
export const {
    // ...
    runner: 'browser',
    // ...
}

ランナーオプション

ブラウザーランナーでは、次の構成が可能です。

`preset`

上記のいずれかのフレームワークを使用してコンポーネントをテストする場合、すぐにすべてが構成されるようにプリセットを定義できます。このオプションは、viteConfig と一緒に使用することはできません。

wdio.conf.js
export const {
    // ...
    runner: ['browser', {
        preset: 'svelte'
    }],
    // ...
}

`viteConfig`

独自の Vite 構成を定義します。カスタムオブジェクトを渡すか、開発に Vite.js を使用する場合は、既存の vite.conf.ts ファイルをインポートできます。WebdriverIO は、テストハーネスをセットアップするために、カスタム Vite 構成を維持することに注意してください。

タイプ: string または UserConfig または (env: ConfigEnv) => UserConfig | Promise<UserConfig>
例

wdio.conf.ts
import viteConfig from '../vite.config.ts'

export const {
    // ...
    runner: ['browser', { viteConfig }],
    // or just:
    runner: ['browser', { viteConfig: '../vites.config.ts' }],
    // or use a function if your vite config contains a lot of plugins
    // which you only want to resolve when value is read
    runner: ['browser', {
        viteConfig: () => ({
            // ...
        })
    }],
    // ...
}

`headless`

true に設定すると、ランナーはテストをヘッドレスで実行するように機能を更新します。デフォルトでは、CI 環境変数が '1' または 'true' に設定されている CI 環境内でこれが有効になります。

タイプ: boolean
デフォルト: false、CI 環境変数が設定されている場合は true

`rootDir`

プロジェクトのルートディレクトリ。

タイプ: string
デフォルト: process.cwd()

`coverage`

WebdriverIO は、istanbul を介したテストカバレッジレポートをサポートしています。詳細については、カバレッジオプションを参照してください。

タイプ: object
デフォルト: undefined

カバレッジオプション

次のオプションを使用すると、カバレッジレポートを構成できます。

`enabled`

カバレッジ収集を有効にします。

タイプ: boolean
デフォルト: false

`include`

グロブパターンとしてカバレッジに含まれるファイルのリスト。

タイプ: string[]
デフォルト: [**]

`exclude`

グロブパターンとしてカバレッジから除外されるファイルのリスト。

タイプ: string[]
デフォルト

[
  'coverage/**',
  'dist/**',
  'packages/*/test{,s}/**',
  '**/*.d.ts',
  'cypress/**',
  'test{,s}/**',
  'test{,-*}.{js,cjs,mjs,ts,tsx,jsx}',
  '**/*{.,-}test.{js,cjs,mjs,ts,tsx,jsx}',
  '**/*{.,-}spec.{js,cjs,mjs,ts,tsx,jsx}',
  '**/__tests__/**',
  '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*',
  '**/.{eslint,mocha,prettier}rc.{js,cjs,yml}',
]

`extension`

レポートに含める必要があるファイル拡張子のリスト。

タイプ: string | string[]
デフォルト: ['.js', '.cjs', '.mjs', '.ts', '.mts', '.cts', '.tsx', '.jsx', '.vue', '.svelte']

`reportsDirectory`

カバレッジレポートを書き込むディレクトリ。

タイプ: string
デフォルト: ./coverage

`reporter`

使用するカバレッジレポーター。istanbul ドキュメントで、すべてのレポーターの詳細なリストを参照してください。

タイプ: string[]
デフォルト: ['text', 'html', 'clover', 'json-summary']

`perFile`

ファイルごとの閾値をチェックします。実際の閾値については、lines、functions、branches、statementsを参照してください。

タイプ: boolean
デフォルト: false

`clean`

テスト実行前にカバレッジ結果をクリアします。

タイプ: boolean
デフォルト: true

`lines`

行の閾値。

型: number
デフォルト: undefined

`functions`

関数の閾値。

型: number
デフォルト: undefined

`branches`

分岐の閾値。

型: number
デフォルト: undefined

`statements`

ステートメントの閾値。

型: number
デフォルト: undefined

制限事項

WebdriverIOブラウザランナーを使用する場合、alertやconfirmのようなスレッドをブロックするダイアログはネイティブに使用できないことに注意することが重要です。これは、それらがWebページをブロックするため、WebdriverIOがページとの通信を継続できなくなり、実行がハングアップするためです。

このような状況では、WebdriverIOはこれらのAPIに対してデフォルトの戻り値を持つデフォルトのモックを提供します。これにより、ユーザーが誤って同期ポップアップWeb APIを使用した場合でも、実行がハングアップしないことが保証されます。ただし、より良いエクスペリエンスのために、これらのWeb APIをモックすることをお勧めします。詳しくはモックをご覧ください。

例

コンポーネントテストに関するドキュメントと、これらやその他のさまざまなフレームワークを使用した例については、サンプルリポジトリを必ず確認してください。

ローカルランナー​

インストール​

セットアップ​

ブラウザーランナー​

インストール​

セットアップ​

ランナーオプション​

preset​

viteConfig​

headless​

rootDir​

coverage​

カバレッジオプション​

enabled​

include​

exclude​

extension​

reportsDirectory​

reporter​

perFile​

clean​

lines​

functions​

branches​

statements​

制限事項​

例​

ローカルランナー

インストール

セットアップ

ブラウザーランナー

インストール

セットアップ

ランナーオプション

`preset`

`viteConfig`

`headless`

`rootDir`

`coverage`

カバレッジオプション

`enabled`

`include`

`exclude`

`extension`

`reportsDirectory`

`reporter`

`perFile`

`clean`

`lines`

`functions`

`branches`

`statements`

制限事項

例