Comece com o Axe Watcher
Como começar a usar o Axe Watcher com suas suítes de teste
Este guia orienta você na configuração do Axe Watcher para adicionar testes de acessibilidade automatizados à sua suíte de teste de ponta a ponta existente.
Compreendendo o Watcher e o Axe Developer Hub
O Axe Watcher é uma fonte de entrada para o Axe Developer Hub que você integra à sua suíte de testes, enquanto o Axe Developer Hub é a plataforma web onde você visualiza e gerencia seus resultados de acessibilidade. Eles funcionam juntos como uma solução completa de testes de acessibilidade:
Axe Watcher executa com seus testes automatizados, analisando cada página que seus testes visitam em busca de problemas de acessibilidade. Ele detecta alterações no DOM e captura múltiplos estados da página, sendo ideal para testar conteúdo dinâmico como aplicações de página única, fluxos de login e componentes interativos. Quando integrado ao Git, o Watcher associa os resultados a commits e branches específicos.
Axe Developer Hub recebe resultados de acessibilidade de fontes de entrada como o Watcher e os apresenta em uma interface organizada. Você pode rastrear problemas de acessibilidade por commits, comparar branches, filtrar por gravidade e monitorar o progresso de acessibilidade do seu projeto ao longo do tempo. A plataforma de-duplica problemas, para que você veja cada problema único uma vez.
Passos de Configuração
Esses passos assumem que você tem uma Conta Axe e acesso a uma assinatura Axe Developer Hub.
Para obter ajuda com sua Conta Axe ou assinatura de Axe Developer Hub, entre em contato diretamente com seu representante Deque, entre em contato através de nossa central de suporte ou envie-nos um e-mail.
1. Crie um Projeto Watcher
Um projeto no Axe Developer Hub armazena seus resultados de acessibilidade, informações de execução de teste e dados do Git. Cada projeto tem um ID único que vincula suas execuções de teste a ele.
Para criar um projeto:
- Visite a página de inicialização do Axe Developer Hub ou clique em Adicionar novo projeto na sua página de Projetos.
- Escolha Axe Watcher na página Escolha Seu Método de Integração.
- Nomeie seu projeto.
- Selecione sua linguagem de programação.
- Escolha sua plataforma de automação de navegador.
Para instruções completas, consulte Configurar Projetos.
2. Modifique Sua Suíte de Testes
Integrar o Watcher requer mudanças mínimas em seus testes existentes. O processo geral envolve:
- Instalar o pacote Watcher
- Importar as funções de configuração e classes controladoras
- Envolver sua configuração de navegador com a função de configuração do Watcher
- Envolver sua instância de navegador ou página com o Watcher
- Liberar seus resultados após cada teste para enviar resultados ao Axe Developer Hub
A implementação específica varia por plataforma. Escolha seu idioma nos links abaixo para ser direcionado às instruções específicas para sua plataforma de automação de navegador:
Se você não possui uma suíte de testes existente para modificar, o repositório de Exemplos do Axe Watcher fornece exemplos funcionais para cada plataforma suportada.
3. Execute Seus Testes e Verifique os Resultados
Depois de modificar sua suíte de testes, execute-a como faria normalmente. O Watcher analisa automaticamente as páginas e envia os resultados para o Axe Developer Hub.
Após a conclusão da execução do teste, visite seu projeto no Axe Developer Hub para revisar os resultados. Você verá:
- Página de Branches (projetos Git): Mostra todas as branches escaneadas com resumos de acessibilidade.
- Página de Commits (projetos Git): Mostra commits dentro de um ramo com dados de comparação.
- Página de Execuções de Teste (projetos não-Git): Mostra cada execução de teste com carimbos de data/hora e contagem de problemas.
- Página de Resumo: Exibe todas as regras de acessibilidade violadas com contagem de problemas por impacto.
- Página de Detalhes: Fornece informações detalhadas sobre cada violação, incluindo a localização do elemento, código-fonte e orientações de correção.
Para orientações sobre como navegar em seus resultados, consulte Compreender os Resultados.
Próximos Passos
- Automatize verificações de acessibilidade em CI/CD: Use a Ação do GitHub para bloquear pull requests com erros de acessibilidade, ou integre-se com outras plataformas usando o serviço REST
- Personalize seus testes: Saiba mais sobre o modo manual para controlar quais páginas são analisadas
- Configure os limites: Configure o limite de a11y para definir a tolerância de sua organização para erros de acessibilidade
- Use uma configuração global: Aplique padrões de acessibilidade consistentes em toda a sua organização