1. テストフォルダーのルートレベルで、@axe-core/watcherパッケージとそのすべての依存関係をnpmまたはお好みのパッケージマネージャー(例えば、yarnあるいはpnpm)を使用してインストールします。

    npm install --save-dev @axe-core/watcher
  2. テストファイルでは、次をインポートします。 wdioConfig() 関数、 wrapWdio() 関数、および WdioController クラスを @axe-core/watcher/wdioから:

    import {
      wdioConfig,
      wrapWdio,
      WdioController
    } from '@axe-core/watcher/wdio'
  3. テストセットアップコード(通常は before または beforeAll ブロック内)では、 browser インスタンスを作成する既存のコードを、次を呼び出してラップします。 wdioConfig()、APIキーを提供しながら:

    const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
    const PROJECT_ID = process.env.PROJECT_ID
    
    const browser = await remote(
      wdioConfig({
        axe: {
          apiKey: ACCESSIBILITY_API_KEY,
          projectId: PROJECT_ID
        }
      })
    )

    必ず、ACCESSIBILITY_API_KEYPROJECT_IDを環境に設定し、あなたの個人用APIキー(AxeアカウントのAPI KEYSタブにあります)とプロジェクトID(プロジェクト作成時のこの手順の上部に表示されるか、プロジェクトページで設定の下にあるプロジェクトを設定を選択することで確認可能です)を使用してください。

  4. インスタンスを取得したら、 browser クラスのインスタンスを作成します: WdioController クラスのインスタンスを作成します:

    const controller = new WdioController(browser);
  5. インスタンスを browser 関数でラップし、 wrapWdio() インスタンスおよび browser インスタンスを提供します: controller インスタンスを提供します:

    wrapWdio(browser, controller)
  6. 最後に、axe Watcherからのすべてのテスト結果が送信されることを確認してください。このためには、次のコードブロックをテストのティアダウンコードに追加します(通常は afterEach ブロック内):

    afterEach(async () => {
      await controller.flush()
    })