Instruções para Puppeteer e TypeScript

No nível raiz da sua pasta de testes, instale o @axe-core/watcher pacote e todas as suas dependências usando npm ou o seu gerenciador de pacotes preferido (por exemplo, yarn ou pnpm).

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

No seu arquivo ou arquivos de teste, importe a puppeteerConfig() função, a wrapPuppeteer() função e a PuppeteerController classe de @axe-core/watcher/puppeteer:

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

Atualize o código de configuração do seu teste (normalmente em um before ou beforeAll bloco) envolvendo qualquer código existente para criar uma browser instância com uma chamada para puppeteerConfig(), enquanto obtém sua chave de API do ambiente (como ACCESSIBILITY_API_KEY):

// Original code:

browser = await puppeteer.launch({
  // Your existing launch options...
})

// Becomes:

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

const browser = await puppeteer.launch(
  puppeteerConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID
    },
    headless: false
  })
);

Certifique-se de definir ACCESSIBILITY_API_KEY e PROJECT_ID no seu ambiente como a sua chave de API pessoal (encontrada na sua conta do axe, na aba **API KEYS** ) e o seu ID de projeto (mostrado no topo destas instruções quando você criou seu projeto ou disponível na página de Projetos, escolhendo **Configurar projeto** em **Configurações**).

Crie uma instância de PuppeteerController e envolva seu 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)

Finalmente, certifique-se de que todos os resultados dos testes do axe Watcher sejam liberados. Para fazer isso, adicione o seguinte bloco de código ao seu código de finalização de teste (normalmente em um afterEach bloco):

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