Istruzioni per Puppeteer e TypeScript

Nella radice della cartella di test, installa il pacchetto @axe-core/watcher e tutte le sue dipendenze utilizzando npm o il tuo gestore di pacchetti preferito (ad esempio, Yarn o pnpm).

npm install --save-dev @axe-core/watcher

Nel file o nei file di test, importa la funzione puppeteerConfig , la funzione wrapPuppeteer() e la classe PuppeteerController da @axe-core/watcher:

import {
  puppeteerConfig,
  wrapPuppeteerPage,
  PuppeteerController
} from '@axe-core/watcher'

Aggiorna il codice di configurazione del test (in genere in un blocco before o beforeAll ) inserendo qualsiasi codice esistente per la creazione di un'istanza browser con una chiamata a puppeteerConfig(), mentre ottieni la tua chiave API dall'ambiente (come 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(
  puppeteerConfig({
    axe: {
      apiKey: API_KEY
    },
    headless: false
  })
);

Crea un'istanza di PuppeteerController e incapsula il tuo 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)

Infine, assicurarsi che tutti i risultati dei test di axe Watcher siano stati completamente elaborati. Per fare ciò, aggiungi il seguente blocco di codice al tuo codice di smantellamento del test (in genere in un blocco afterEach ):

afterEach(async () => {
  await controller.flush()
});