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

Em cypress.config.ts, importe a cypressConfig() função do pacote @axe-core/watcher e envolva sua configuração com ela:

import { defineConfig } from 'cypress';
import { cypressConfig } from '@axe-core/watcher/cypress/config';

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

export default defineConfig(
  cypressConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID
    },
    // Your existing Cypress configuration code here
  })
);

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

No seu arquivo de suporte do Cypress (comumente chamado de cypress/support/e2e.ts), importe @axe-core-watcher/cypress/support e chame axeWatcherFlush() após cada teste:

import '@axe-core/watcher/cypress/support';

afterEach(() => {
  cy.axeWatcherFlush();
});

Está tudo pronto. Execute seus testes ponta a ponta e verifique seus resultados. Por favor, note que @axe-core/watcher só é executado no Chrome para Testes ou Chromium e deve ser usado apenas no Cypress modo de execução . Ele pode ser usado com --headless=new ou --headed (por exemplo, cypress run --headed --browser=chrome-for-testing).