Uso de la acción de GitHub del axe Developer Hub
Verifique automáticamente los PR y los commits para detectar defectos de accesibilidad con la acción de GitHub del axe Developer Hub
Este artículo explica cómo configurar la acción de GitHub del axe Developer Hub, que permite que los flujos de trabajo de GitHub bloqueen commits y solicitudes de extracción si contienen algún error de accesibilidad.
Para otras canalizaciones de CI/CD (como las de GitLab, Bitbucket o CircleCI), puede utilizar el servicio REST proporcionado por axe Developer Hub como base para su propia integración.
Visión general
Cuando su conjunto de pruebas modificado se ejecuta, asocia los resultados de accesibilidad con una confirmación de Git SHA y envía esa información a los servidores de Deque. Más tarde, cuando se ejecuta la acción de GitHub, consulta a Deque para obtener estos resultados.
La acción de GitHub debe ejecutarse después de que se ejecute el conjunto de pruebas porque consulta los servidores de Deque para obtener los resultados de accesibilidad asociados con el último SHA del commit de la rama actual.
Requisitos
Hay algunos requisitos que cumplir antes de poder utilizar la acción de GitHub:
- Un proyecto en axe Developer Hub y su clave API.
- Un conjunto de pruebas que has modificado siguiendo las instrucciones de axe Developer Hub cuando creaste el proyecto.
- Un flujo de trabajo de GitHub que ejecuta su conjunto de pruebas cada vez que alguien hace un commit a su repositorio.
Las siguientes secciones describen los pasos necesarios para modificar un flujo de trabajo para utilizar la acción axe de GitHub de Developer Hub.
Paso 1: Crea un secreto para tu clave API
Ver Secretos cifrados en un flujo de trabajo para obtener información sobre cómo crear un secreto para su flujo de trabajo.
Para este ejemplo, el secreto creado se llama AXE_DEV_HUB_API_KEY, con la clave API de su proyecto como su valor, pero puede nombrar el secreto como desee. Debe ser referenciado por el mismo nombre en el trabajo del flujo de trabajo.
Paso 2: Modifique su flujo de trabajo actual
Debe modificar el flujo de trabajo del test runner actual en .github/workflows y agregar la acción de GitHub después de la tarea que ejecuta su conjunto de pruebas.
Si aún no tiene un flujo de trabajo que ejecute su conjunto de pruebas, puede usar el flujo de trabajo de ejemplo como punto de partida. (El directorio de ejemplo Contiene un proyecto de prueba completo con el que puedes experimentar). Consulte el Flujo de trabajo de ejemplo a continuación para obtener más información.
La tarea que sigue a la acción de su conjunto de pruebas debe ejecutar la acción de axe Developer Hub de GitHub. A continuación se muestra un ejemplo de un trabajo que ejecuta la acción de GitHub de axe Developer Hub (la línea jobs: se incluye para mostrar dónde está la acción en el flujo de trabajo):
jobs:
# ...
# Job that runs your test suite (deleted for brevity)
# ...
# Add the following new job:
axe-dev-hub:
runs-on: ubuntu-latest
needs: cypress
steps:
- uses: actions/checkout@v3
- uses: dequelabs/axe-devhub-action@v1
with:
api_key: ${{ secrets.AXE_DEV_HUB_API_KEY }}Consulte la tabla de parámetros de entrada para ver todos los parámetros de entrada posibles para la acción de GitHub. Puede, por ejemplo, habilitar el umbral a11y usando enable_a11y_threshold: true. (Siempre verifique la invocación de ejemplo en el repositorio de acciones de GitHub para obtener la configuración de trabajo más reciente.) Sin embargo, a diferencia de la invocación de ejemplo, no configure el parámetro server_url a menos que utilice un servidor de prueba, lo cual es poco común).
Esta tarea depende de la tarea que ejecuta su suite de pruebas, especificado con la línea needs: cypress . Asegúrese de actualizar esta línea para que coincida con el nombre de la tarea que ejecuta su suite de pruebas.
Resultados
Si la acción de GitHub falla (más de cero errores de accesibilidad), adjunta un comentario similar al siguiente a su pull request y bloquea el merge:
![Un mensaje de ejemplo que la acción de GitHub adjunta a una solicitud de inserción cuando se encuentran errores de accesibilidad].(images/dh-gha-pr-message.png)
Si hace clic en el enlace, se lo dirigirá a la página del axe Developer Hub, que muestra información sobre defectos de accesibilidad para ese commit.
La acción de GitHub establece varios parámetros de salida. Consulte la tabla de parámetros de salida para obtener más información.
Solución de problemas
Es posible que reciba un error como el siguiente:
Error: Resource not accessible by integrationPara corregir este error, necesita permisos de lectura y escritura para las acciones (para permitir que la acción agregue comentarios a los pull requests), ya sea en la página de configuración de las acciones o, para mayor granularidad, a través de un GITHUB_TOKEN diferente. Consulte Modificación de los permisos para GITHUB_TOKEN para obtener más información. Puede utilizar el valor de entrada github_token para especificar un token diferente para la acción de GitHub.
Ejemplo de flujo de trabajo
El repositorio de acciones de GitHub de axe Developer Hub contiene un flujo de trabajo de ejemplo que puedes usar para crear tu propio ejecutor de pruebas. El flujo de trabajo de ejemplo se llama Pruebas (tests.yml) y se ejecuta en cualquier confirmación o solicitud de extracción.
El trabajo que ejecuta el conjunto de pruebas modificado, cypress, muestra cómo ejecutar un conjunto de pruebas Cypress. El siguiente trabajo, axe-dev-hub, es un ejemplo de invocación de la acción axe Developer Hub de GitHub. El trabajo de su conjunto de pruebas siempre debe ejecutarse antes de la acción axe de Developer Hub de GitHub.
Referencia
Consulta el archivo README de axe Developer Hub para obtener información sobre los parámetros de entrada y salida para la acción de GitHub.