Instructions for WebDriverJS and JavaScript

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Configuring your tests with WebDriverJS and JavaScript

Not for use with personal data

important

Axe Watcher requires a supported browser already installed on your system: Chrome for Testing (a separate browser install, distinct from Google Chrome), Chromium, or Microsoft Edge. Google Chrome, version 139 or later, is not supported. See Setting Up and Configuring Browsers for Use with Axe Watcher for installation and configuration instructions.

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:
```
const {
  webdriverConfig,
  wrapWebdriver,
  WebdriverController
} = require('@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:
let 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 SERVER_URL = process.env.SERVER_URL

let browser = await new Builder()
  .forBrowser('chrome')
  .setChromeOptions(
    webdriverConfig({
      axe: {
        apiKey: ACCESSIBILITY_API_KEY,
        projectId: PROJECT_ID,
        serverURL: SERVER_URL
      }
    }
  )
  .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). If your organization uses a regional, private cloud, or on-premises Axe Developer Hub instance, also set SERVER_URL to the base URL of that instance (for example, https://axe-eu.deque.com); otherwise, omit SERVER_URL and the default https://axe.deque.com will be used.
Create an instance of the WebdriverController:
```
const controller = new WebdriverController(browser)
```
note

If you enable screenshot capture (takeScreenshots: true), note that WebdriverController does not implement screenshot capture in @axe-core/watcher 4.6.0. To capture screenshots, subclass WebdriverController, override captureScreenshot() to call Selenium's own takeScreenshot() method, and instantiate your subclass instead:
```
class ScreenshotWebdriverController extends WebdriverController {
  async captureScreenshot() {
    return await this.driver.takeScreenshot()
  }
}

const controller = new ScreenshotWebdriverController(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()
})
```

Instructions for WebDriverJS and JavaScript

Is this page helpful?

Help us improve this page

Still need help?