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 função cypressConfig() do pacote @axe-core/watcher e envolva sua configuração com ela. Defina o array testingTypes para incluir component:

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,
      testingTypes: ['component']
    },
    // Your existing Cypress configuration code here
    component: {
      // Your component testing configuration
      
      // For example:
      
      // devServer: {
      //  framework: 'react',
      //  bundler: 'webpack',
      //},
    },
  })
);

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 de componentes Cypress (comumente chamado de cypress/support/component.ts), importe @axe-core/watcher/cypress/support e chame axeWatcherFlush() após cada teste:

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

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

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