Installeer in de hoofdmap van uw testmap het @axe-core/watcher-pakket en al zijn afhankelijkheden met behulp van npm of uw voorkeurs pakketbeheerder (bijvoorbeeld yarn of pnpm).
```
npm install --save-dev @axe-core/watcher
```
Importeer in je testbestand of -bestanden de playwrightConfig() functie, de wrapPlaywright() functie en de PlaywrightController klasse uit @axe-core/watcher/playwright:
```
const {
  wrapPlaywrightPage,
  playwrightConfig,
  PlaywrightController
} = require('@axe-core/watcher/playwright')
```

In je testopstelfase (meestal in een before of beforeAll blok), omwikkel eventuele bestaande code voor het aanmaken van een browserContext instantie met een aanroep naar playwrightConfig() terwijl je je API-sleutel opgeeft:

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']
  })
);

Zorg ervoor dat u ACCESSIBILITY_API_KEY en PROJECT_ID in uw omgeving instelt op uw persoonlijke API-sleutel (te vinden in uw Axe-account, tabblad API-SLEUTELS) en uw project-ID (weergegeven bovenaan deze instructies toen u uw project maakte of beschikbaar op de Projecten-pagina door Project configureren te kiezen onder Instellingen).

Zodra je een page instantie hebt, maak je een instantie van de PlaywrightController klasse en omwikkel je je 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);

Zorg er ten slotte voor dat alle testresultaten van axe Watcher worden verwerkt. Om dit te doen, voeg je het volgende codeblok toe aan je testafbreekfase (meestal in een afterEach blok):
```
afterEach(async () => {
  await controller.flush()
})
```