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

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

    const {
      puppeteerConfig,
      wrapPuppeteerPage,
      PuppeteerController
    } = require('@axe-core/watcher/puppeteer')
  3. テストのセットアップコード(通常 before または beforeAll ブロック内)を更新し、 browser インスタンスを作成する既存のコードを puppeteerConfig()で呼び出し、APIキーを提供します:

    const 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
        },
        // Your existing launch options...
      })
    )

    環境に ACCESSIBILITY_API_KEYPROJECT_ID を設定し、あなたの個人的なAPIキーに設定してください(Axeアカウントの API KEYS タブで見つけられます)、およびプロジェクトID(プロジェクトを作成した際のこれらの説明の上部に示されています。または、プロジェクトページで プロジェクトを設定 を選択し、 設定から確認できます)。

  4. のインスタンスを作成し、Puppeteerをラップします PuppeteerControllerbrowserContext

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