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

    npm install --save-dev @axe-core/watcher
  2. テストファイルまたはファイル群で、 puppeteerConfig() 関数、 wrapPuppeteer() 関数、および PuppeteerController クラスをインポートします: @axe-core/watcher/puppeteer

    import {
      puppeteerConfig,
      wrapPuppeteerPage,
      PuppeteerController
    } from '@axe-core/watcher/puppeteer'
  3. テストセットアップコードを更新します (通常は before または beforeAll ブロック内) で、既存の browser インスタンスを作成するコードを puppeteerConfig()に呼び出すことによってラップします。そして環境からAPIキーを取得します。 (例: ACCESSIBILITY_API_KEY):

    // Original code:
    
    browser = await puppeteer.launch({
      // Your existing launch options...
    })
    
    // Becomes:
    
    const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
    const PROJECT_ID = process.env.PROJECT_ID
    
    const browser = await puppeteer.launch(
      puppeteerConfig({
        axe: {
          apiKey: ACCESSIBILITY_API_KEY,
          projectId: PROJECT_ID
        },
        headless: false
      })
    );

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

  4. のインスタンスを作成し、あなたのPuppeteer PuppeteerController をラップします: browserContext

    // Create a page instance, using your browser instance.
    let page = await browser.newPage()
    
    // Initialize the PuppeteerController by passing in the Puppeteer page.
    const controller = new PuppeteerController(page)
    
    // Use the new wrapped Puppeteer page instance.
    page = wrapPuppeteerPage(page, controller)
  5. 最後に、axe Watcherからの全てのテスト結果がフラッシュされるようにします。そのために、次のコードブロックをテストの終了コード (通常は afterEach ブロック内) に追加してください:

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