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/watcherEm cypress.config.js, importe a cypressConfig() função do pacote @axe-core/watcher e envolva sua configuração com ela:
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
},
// 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 cypress/support/e2e.js), importe cypressCommands e chame axeWatcherFlush() após cada teste:
require('@axe-core/watcher/cypress/support');
afterEach(() => {
cy.axeWatcherFlush();
});Tudo pronto. Execute seus testes de ponta a ponta 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 Cypress run mode. Ele pode ser usado com --headless=new ou --headed (por exemplo, cypress run --headed --browser=chrome-for-testing).