Importing and Initializing for Playwright

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 a bundle, from your artifact repository, or from Deque's Agora. You also need a downloaded and configured Playwright version of your choice.

Importing and Initializing

Import both Axe DevTools for Web and Playwright. The syntax depends on the language and module system your project uses. Pick the one that matches your project:

JavaScript with CommonJS modules

This is the default for a Node.js project without "type": "module" in its package.json.

const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');

JavaScript with ES modules

Use this syntax in a project with "type": "module" in its package.json, or in .mjs files.

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';

TypeScript

TypeScript uses the same import syntax as ES modules. @axe-devtools/playwright ships its own type declarations, so there is no separate @types/ package to install. Scan results are typed as AxeResults, which axe-core exports:

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';
import type { AxeResults } from 'axe-core';

Initializing Playwright

Once you've imported Axe DevTools for Web, you can initialize the driver. Each scan requires its own instance of Axe DevTools for Web, so you'll initialize that while writing tests.

The initialization code is the same in JavaScript and TypeScript, except that TypeScript can infer or annotate the types Playwright returns. In JavaScript:

// This will open up a headless instance of chromium
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

In TypeScript, with the types written out:

import type { Browser, BrowserContext, Page } from 'playwright';

// This will open up a headless instance of chromium
const browser: Browser = await playwright.chromium.launch();
const context: BrowserContext = await browser.newContext();
const page: Page = await context.newPage();

Next Steps

Once you've installed, imported, and initialized Axe DevTools for Web, 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 for Web, contact your Deque representative directly, reach us via our support desk, or send us an email. We'll be happy to help.