ランナー
WebdriverIOのランナーは、テストランナーを使用する際にテストがどこでどのように実行されるかを調整します。WebdriverIOは現在、ローカルランナーとブラウザランナーという2つの異なるタイプのランナーをサポートしています。
ローカルランナー
ローカルランナーは、フレームワーク（例：Mocha、JasmineまたはCucumber）をワーカープロセス内で起動し、Node.js環境内ですべてのテストファイルを実行します。各テストファイルは、機能ごとに別々のワーカープロセスで実行され、最大の並行性を可能にします。各ワーカープロセスは単一のブラウザインスタンスを使用し、そのため独自のブラウザセッションを実行して最大の分離を確保します。
すべてのテストが独自の分離されたプロセスで実行されるため、テストファイル間でデータを共有することはできません。これを回避するには2つの方法があります：
@wdio/shared-store-serviceを使用してすべてのワーカー間でデータを共有する- specファイルをグループ化する（詳細はテストスイートの整理を参照）
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. | Web標準、特にWHATWG DOMとHTML標準の再実装を使用してNode.js内でテストを実行 | 実際のブラウザでテストを実行し、ユーザーが使用する環境でコードを実行 |
| 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と一緒に使用することはできません。
型: vue | svelte | solid | react | preact | stencil
例:
export const {
// ...
runner: ['browser', {
preset: 'svelte'
}],
// ...
}
viteConfig
独自のVite設定を定義します。カスタムオブジェクトを渡すか、開発にVite.jsを使用している場合は既存のvite.conf.tsファイルをインポートできます。WebdriverIOはテストハーネスを設定するためにカスタムVite構成を保持することに注意してください。
型: string または UserConfig または (env: ConfigEnv) => UserConfig | Promise<UserConfig>
例:
import viteConfig from '../vite.config.ts'
export const {
// ...
runner: ['browser', { viteConfig }],
// または単に：
runner: ['browser', { viteConfig: '../vites.config.ts' }],
// または値が読み取られるときにのみ解決したい場合は
// 多くのプラグインを含むvite configに関数を使用します
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をモックすることが推奨されます。詳細はモッキングをお読みください。
例
コンポーネントテストに関するドキュメントを確認し、これらやその他のさまざまなフレームワークを使用した例についてはサンプルリポジトリをご覧ください。
