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()
    })