Instructions for WebDriverJS and TypeScript

In the root level of your testing folder, install the @axe-core/watcher package and all of its dependencies using npm or your preferred package manager (for example, yarn or pnpm).

npm install --save-dev @axe-core/watcher

In your test file or files, import the webdriverConfig() function, the wrapWebdriver() function, and the WebdriverController class from @axe-core/watcher/webdriver:

import {
  webdriverConfig,
  wrapWebdriver,
  WebdriverController
} from '@axe-core/watcher/webdriver'

Update your test setup code (typically in a before or beforeAll block), specifying Chrome options when instantiating your browser instance, providing your API key:

// Original code:
const browser = await new Builder()
  .forBrowser('chrome')
  .build()

// Becomes:
const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID

const browser = await new Builder()
  .forBrowser('chrome')
  .setChromeOptions(
    webdriverConfig({
      axe: {
        apiKey: ACCESSIBILITY_API_KEY,
        projectId: PROJECT_ID
      }
    }
  )
  .build()

Be sure to set ACCESSIBILITY_API_KEY and PROJECT_ID in your environment to your personal API key (found in your axe Account, API KEYS tab) and your project ID (shown at the top of these instructions when you created your project or available from the Projects page by choosing Configure project under Settings).

Create an instance of the WebdriverController:

const controller = new WebdriverController(browser)

Wrap your browser instance with the wrapWebdriver() function:

browser = wrapWebdriver(browser, controller)

Finally, ensure all test results from axe Watcher are flushed out. To do this, add the following block of code to your test teardown code (typically in an afterEach block):

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