Instructions for Puppeteer and TypeScript
Configuring your tests with Puppeteer and TypeScript
-
In the root level of your testing folder, install the
@axe-core/watcher
package and all of its dependencies usingnpm
or your preferred package manager (for example,yarn
orpnpm
).npm install --save-dev @axe-core/watcher
-
In your test file or files, import the
puppeteerConfig()
function, thewrapPuppeteer()
function, and thePuppeteerController
class from@axe-core/watcher
:import { puppeteerConfig, wrapPuppeteerPage, PuppeteerController } from '@axe-core/watcher'
-
Update your test setup code (typically in a
before
orbeforeAll
block) by wrapping any existing code for creating abrowser
instance with a call topuppeteerConfig()
, while obtaining your API key from the environment (asAPI_KEY
):// Original code: browser = await puppeteer.launch({ // Your existing launch options... }) // Becomes: const API_KEY = process.env.API_KEY const browser = await puppeteer.launch( puppeteerConfig({ axe: { apiKey: API_KEY }, headless: false }) );
-
Create an instance of
PuppeteerController
and wrap your PuppeteerbrowserContext
:// 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)
-
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() });