Instructions for Playwright 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 Playwright and JavaScript

Not for use with personal data

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 playwrightConfig() function, the wrapPlaywright() function, and the PlaywrightController class from @axe-core/watcher/playwright:
```
const {
  wrapPlaywrightPage,
  playwrightConfig,
  PlaywrightController
} = require('@axe-core/watcher/playwright')
```

In your test setup code (typically in a before or beforeAll block), wrap any existing code for creating a browserContext instance with a call to playwrightConfig() while providing your API key:

const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID

const browserContext = await playwright.chromium.launchPersistentContext(
  /**
   * We set userDataDir to an empty string which saves
   * browser data to a temporary directory
   * @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch-persistent-context
   */
  '',
  playwrightConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID
    },
    /**
     * We support both headless and headed mode with Chrome.
     * 
     * For headless mode:
     * - Use '--headless=chrome' for browsers v94-108.
     * - Use '--headless=new' for browsers v109+.
     * 
     * For headed mode:
     * - Remove the '--headless' flag.
     * 
     * @see https://playwright.dev/docs/chrome-extensions#headless-mode
    */
    headless: false,
    args: ['--headless=new']
  })
);

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).

Once you have a page instance, create an instance of the PlaywrightController class and wrap your browserContext:

// Create a page instance, using your browser context.
let page = await browserContext.newPage();

// Initialize the PlaywrightController by passing in the Playwright page.
const controller = new PlaywrightController(page);

// Use the new wrapped Playwright page instance.
page = wrapPlaywrightPage(page, 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 Playwright and JavaScript

Is this page helpful?

Help us improve this page

Try

Still need help?