Instruções para Puppeteer e JavaScript

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:

const {
  puppeteerConfig,
  wrapPuppeteerPage,
  PuppeteerController
} = require('@axe-core/watcher/puppeteer')

Atualize seu código de configuração de teste (normalmente em um before ou beforeAll bloco), envolva qualquer código existente para criar uma browser instância com uma chamada para puppeteerConfig(), fornecendo sua chave de API:

const 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
    },
    // Your existing launch options...
  })
)

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)

Por fim, certifique-se de que todos os resultados de teste do axe Watcher sejam liberados. Para fazer isso, adicione o seguinte bloco de código à sua desmontagem de teste (normalmente em um afterEach bloco):

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