1. 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

  2. Em cypress.config.js, importe a função cypressConfig() do pacote @axe-core/watcher e envolva sua configuração com ela. Defina o array testingTypes para incluir component:

    const { defineConfig } = require('cypress');
const { cypressConfig } = require('@axe-core/watcher/cypress/config');

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

module.exports = 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).

  3. No seu arquivo de suporte de componentes Cypress (comumente chamado de cypress/support/component.js), importe o pacote @axe-core/watcher e chame cypressCommands após cada teste: axeWatcherFlush() Você terminou. Execute seus testes de componente e verifique seus resultados. Por favor, note que

    require('@axe-core/watcher/cypress/support');

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

  4. só roda no Chrome para Testes ou Chromium e deve ser usado apenas no modo de execução do Cypress. Pode ser usado com @axe-core/watcher ou --headless=new (por exemplo, --headed ). cypress run --headed --browser=chrome-for-testing --component).