Importing and Initializing for Browser JavaScript

Once you've installed Axe DevTools for Web, you need to import it into your testing setup and initialize the package.

Prerequisites

In order to import and initialize Axe DevTools for Web, it needs to be installed first. If you haven't yet, read the guide on how to install it from your artifact repository, or from Deque's Agora.

Importing and Initializing

The browser package is meant to run inside a bundled test suite, so it is imported with ES module syntax in both JavaScript and TypeScript. @axe-devtools/browser ships its own type declarations, so there is no separate @types/ package to install.

JavaScript

import { AxeDevTools } from '@axe-devtools/browser';

TypeScript

The import statement is the same. Add the AxeResults type from axe-core when you want to annotate the results a scan returns:

import { AxeDevTools } from '@axe-devtools/browser';
import type { AxeResults } from 'axe-core';

Initializing

Once you've imported the browser package, initialize it with the ruleset you want to test against. The statement is the same in both languages:

AxeDevTools.init('wcag2');

The ruleset argument is required, and TypeScript checks it against the supported ruleset ids: wcag2, wcag21, wcag22, wcag2aaa, wcag21aaa, wcag22aaa, 508, en301549, ttv5, and rgaav4.

Next Steps

Once you've installed, imported, and initialized Axe DevTools, you're ready to move on to scanning for accessibility and writing accessibility tests. To do that, see the guide on writing tests.

Troubleshooting

If you have trouble with any of the importing or initializing of Axe DevTools, contact your Deque representative directly, reach us via our support desk, or send us an email. We'll be happy to help.