Instructions for Puppeteer and TypeScript

Link to Instructions for Puppeteer and TypeScript copied to clipboard

Configuring your tests with Puppeteer and TypeScript

Free Trial
  1. 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
  2. In your test file or files, import the puppeteerConfig function, the wrapPuppeteer() function, and the PuppeteerController class from @axe-core/watcher:

    import {
    } from '@axe-core/watcher'
  3. Update your test setup code (typically in a before or beforeAll block) by wrapping any existing code for creating a browser instance with a call to puppeteerConfig(), while obtaining your API key from the environment (as API_KEY):

    // Original code:
    browser = await puppeteer.launch({
      // Your existing launch options...
    // Becomes:
    const API_KEY = process.env.API_KEY
    const browser = await puppeteer.launch(
        axe: {
          apiKey: API_KEY
        headless: false
  4. Create an instance of PuppeteerController and wrap your Puppeteer browserContext:

    // Create a page instance, using your browser instance.
    let page = await browser.newPage()
    // Initialize the PuppeteerController by passing in the Puppeteer page.
    const controller = new PuppeteerController(page)
    // Use the new wrapped Puppeteer page instance.
    page = wrapPuppeteerPage(page, controller)
  5. 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()