Instructions for WebDriverJS and TypeScript

Link to Instructions for WebDriverJS and TypeScript copied to clipboard

Configuring your tests with WebDriverJS and TypeScript

Free Trial
  1. 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
  2. In your test file or files, import the webdriverConfig function, the wrapWebdriver function, and the WebdriverController class from @axe-core/watcher**:

    import {
      webdriverConfig,
      wrapWebdriver,
      WebdriverController
    } from '@axe-core/watcher'
  3. 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 API_KEY = process.env.API_KEY
    
    const browser = await new Builder()
      .forBrowser('chrome')
      .setChromeOptions(
        webdriverConfig({
          axe: {
            apiKey: API_KEY
          }
        }
      )
      .build()
  4. Create an instance of the WebdriverController:

    const controller = new WebdriverController(browser)
  5. Write your browser instance with the wrapWebdriver() function:

    browser = wrapWebdriver(browser, controller)
  6. 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()
    })