Comienza con Axe Watcher
Cómo empezar a usar Axe Watcher con tus suites de prueba
Esta guía te lleva a través de la configuración de Axe Watcher para agregar pruebas de accesibilidad automatizadas a tu suite de pruebas de extremo a extremo existente.
Comprender Watcher y Axe Developer Hub
Axe Watcher es una fuente de entrada para Axe Developer Hub que se integra en tu suite de pruebas, mientras que Axe Developer Hub es la plataforma web donde ves y gestionas tus resultados de accesibilidad. Trabajan juntos como una solución completa de pruebas de accesibilidad:
Axe Watcher se ejecuta con tus pruebas automatizadas, analizando cada página que tus pruebas visitan en busca de problemas de accesibilidad. Detecta cambios en el DOM y captura múltiples estados de página, lo que lo hace ideal para probar contenido dinámico como aplicaciones de una sola página, flujos de inicio de sesión y componentes interactivos. Cuando se integra con Git, Watcher asocia los resultados con commits y ramas específicos.
Axe Developer Hub recibe resultados de accesibilidad de fuentes de entrada como Watcher y los presenta en una interfaz organizada. Puedes rastrear problemas de accesibilidad a través de commits, comparar ramas, filtrar por severidad y monitorear el progreso de accesibilidad de tu proyecto a lo largo del tiempo. La plataforma elimina duplicados problemas, por lo que ves cada problema único solo una vez.
Pasos de configuración
Estos pasos asumen que tienes una Cuenta de Axe y acceso a una suscripción de Axe Developer Hub.
Para obtener ayuda con tu Cuenta de Axe o suscripción de Axe Developer Hub, contacta directamente a tu representante de Deque, comunícate a través de nuestra mesa de ayuda, o envíanos un email.
1. Crea un Proyecto Watcher
Un proyecto en Axe Developer Hub almacena tus resultados de accesibilidad, la información de ejecución de pruebas y los datos de Git. Cada proyecto tiene un ID de proyecto único que vincula tus ejecuciones de prueba a él.
Para crear un proyecto:
- Visita la página de inicio de Axe Developer Hub o haz clic en Agregar nuevo proyecto desde tu página de Proyectos.
- Elige Axe Watcher desde la página Elige Tu Método de Integración.
- Nombra tu proyecto.
- Selecciona tu lenguaje de programación.
- Elige tu plataforma de automatización de navegador.
Para instrucciones completas, consulta Configurar Proyectos.
2. Modifica Tu Suite de Pruebas
Integrar Watcher requiere cambios mínimos en tus pruebas existentes. El proceso general incluye:
- Instalar el paquete de Watcher
- Importar las funciones de configuración y las clases de controladores
- Envolver tu configuración del navegador con la función de configuración de Watcher
- Envolver tu navegador o instancia de página con Watcher
- Vaciar tus resultados después de cada prueba para enviar resultados a Axe Developer Hub
La implementación específica varía según la plataforma. Elige tu lenguaje de los enlaces a continuación para ser dirigido a las instrucciones específicas de tu plataforma de automatización de navegador:
Si no tienes una suite de pruebas existente para modificar, el Repositorio de ejemplos de Axe Watcher proporciona ejemplos de trabajo para cada plataforma compatible.
3. Ejecuta Tus Pruebas y Revisa Resultados
Una vez que hayas modificado tu suite de pruebas, ejecútala como lo harías normalmente. Watcher analiza automáticamente las páginas y envía los resultados a Axe Developer Hub.
Después de que se complete la ejecución de la prueba, visita tu proyecto en Axe Developer Hub para revisar los resultados. Verás:
- Página de Ramas (proyectos Git): Muestra todas las ramas escaneadas con resúmenes de accesibilidad.
- Página de Commits (proyectos Git): Muestra los commits dentro de una rama con datos de comparación.
- Página de Ejecuciones de Pruebas (proyectos no Git): Muestra cada ejecución de prueba con marcas de tiempo y conteo de problemas.
- Página de Resumen: Muestra todas las reglas de accesibilidad violadas con el conteo de problemas por impacto.
- Página de Detalles: Ofrece información detallada sobre cada violación, incluyendo la ubicación del elemento, el código fuente y orientaciones para su remediación.
Para orientación sobre cómo navegar por sus resultados, consulte Entender los Resultados.
Próximos Pasos
- Automatizar las verificaciones de accesibilidad en CI/CD: Use el GitHub Action para bloquear las solicitudes de extracción con errores de accesibilidad, o integre con otras plataformas usando el servicio REST
- Personalice sus pruebas: Aprenda sobre modo manual para controlar qué páginas se analizan
- Configurar umbrales: Configure el umbral a11y para definir la tolerancia de su organización a los errores de accesibilidad
- Usar una configuración global: Aplique estándares de accesibilidad consistentes en toda su organización