Uso de la acción de GitHub del Axe Developer Hub

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Verifica automáticamente los PRs y commits en busca de defectos de accesibilidad

Not for use with personal data

Requiere:

note

Para otros pipelines de CI/CD (como los de GitLab, Bitbucket o CircleCI) o cuando uses Axe DevTools para APIs web/CLI, puedes usar el servicio REST de Axe Developer Hub como base para tu propia integración.

Resumen

La acción de GitHub Axe Developer Hub te permite configurar flujos de trabajo de GitHub para proyectos web que integran Axe Watcher, para bloquear commits y pull requests si contienen errores de accesibilidad.

Cuando tu suite de pruebas modificada se ejecuta, asocia los resultados de accesibilidad con un SHA de commit de Git y envía esa información a los servidores de Deque. La acción de GitHub se ejecuta después que corre tu suite de pruebas, y consulta los servidores de Deque para obtener los resultados de accesibilidad asociados con el último commit SHA de la rama actual.

La cantidad de nuevos problemas y problemas resueltos que los informes de Acción utilizan la línea base del compromiso anterior que tiene un escaneo en esa misma rama, no en la rama por defecto. Solo los compromisos contra los que realmente se ejecutó su suite de pruebas tienen un escaneo, por lo que ese compromiso de línea base puede estar varios compromisos atrás. Si ese compromiso ejecutó un conjunto diferente de pruebas, las cantidades reflejarán la diferencia de cobertura en lugar de un cambio genuino; vea Mejores prácticas para comparaciones precisas.

Configuración

  1. Crea una Variable de Entorno para tu ID de Proyecto - Recomendamos que almacenes tu ID de proyecto en una variable de entorno u otra variable de GitHub. Para este ejemplo, guardaremos el ID del proyecto como una variable de entorno llamada PROJECT_ID.

  2. Crea un Secreto para tu Clave API - Para este ejemplo, el secreto creado se llama AXE_DEV_HUB_API_KEY, con tu clave API personal como su valor, pero puedes nombrar el secreto como quieras. Debe ser referenciado por el mismo nombre en el trabajo del flujo de trabajo. Tu clave API es una credencial: siempre guárdala como un secreto en GitHub Actions en lugar de codificarla directamente en el archivo del flujo de trabajo.

  3. Agrega Comprobaciones de Accesibilidad a tu Suite de Pruebas - Asegúrate de haber completado los pasos en configuración del proyecto para integrar las verificaciones de accesibilidad en la suite de pruebas que se utiliza en tu (Axe Watcher) pipeline de CI/CD.

  4. Modifica tu Flujo de Trabajo Actual - Necesitas modificar tu flujo de trabajo actual del runner de pruebas en .github/workflows y añadir la acción de GitHub después al trabajo que ejecuta tu suite de pruebas.

Trabajo de Ejemplo

El trabajo que sigue a la acción de tu suite de pruebas debe ejecutar la acción de GitHub del Axe Developer Hub. Consulta el siguiente ejemplo:

jobs:

# ...
# your-CI-test
# ...

# Add the following new job:
# Be sure to replace <choose_latest_tag> with the appropriate version tag
  axe-dev-hub:
    runs-on: ubuntu-latest
    needs: your-CI-test
    steps:
      - uses: actions/checkout@v5
      - uses: dequelabs/axe-devhub-action@<choose_latest_tag>
        with:
          api_key: ${{ secrets.axe_DEV_HUB_API_KEY }}
          project_id: ${{ env.PROJECT_ID }}

El trabajo axe-dev-hub en el ejemplo depende del trabajo que ejecuta tu suite de pruebas, especificado con la línea needs: your-CI-test. Asegúrate de actualizar esta línea para que coincida con el nombre del trabajo que ejecuta tu suite de pruebas.

Puedes usar múltiples parámetros de entrada para la acción de GitHub. Por ejemplo, puedes habilitar el umbral de accesibilidad (a11y threshold) usando enable_a11y_threshold: true. Una lista completa de parámetros de entrada se puede encontrar en el README de la acción de GitHub Axe Developer Hub.

note

No necesitas establecer el parámetro server_url si creaste tu proyecto en axe.deque.com. Si tu organización utiliza una instancia regional, nube privada o despliegue local de Axe Developer Hub, debes configurar server_url con la URL base de esa instancia (por ejemplo, https://axe-eu.deque.com).

Resultados

La acción de GitHub establece varios parámetros de salida, incluyendo un conteo de los problemas de accesibilidad que se detectaron, los problemas que se resolvieron, y los problemas que superan el umbral de a11y.

Si no has habilitado el umbral de a11y, la acción de GitHub fallará cuando haya más de cero errores de accesibilidad. Si está habilitado, solo las infracciones que superen el umbral de a11y causarán que la acción de GitHub falle. Obtén más información sobre cómo usar el umbral de a11y para personalizar Axe Developer Hub según lo que tu organización desea priorizar.

El fallo de la acción de GitHub adjuntará un comentario similar al siguiente a tu solicitud de extracción y puede bloquear la fusión.

Un mensaje de ejemplo que la acción de GitHub adjunta a una solicitud de inserción cuando se encontraron errores de accesibilidad.

Haz clic en el enlace en el comentario de la solicitud de extracción para revisar la información de defectos de accesibilidad para ese commit en Axe Developer Hub.

Solución de problemas

Podrías recibir un error como el siguiente:

Error: Resource not accessible by integration

Verifica que tienes los permisos necesarios en la página de configuraciones para acciones. Necesitas permisos de lectura y y escritura para permitir que la acción agregue comentarios a las solicitudes de extracción. Para más granularidad, puedes optar por usar un GITHUB_TOKEN diferente para la acción de GitHub. Agrega este valor al parámetro de entrada github_token.

Ejemplo de flujo de trabajo

Si aún no tienes un flujo de trabajo que ejecute tu suite de pruebas, puedes usar el flujo de trabajo de ejemplo como punto de partida para crear tu propio runner de pruebas.

El flujo de trabajo de ejemplo se llama Tests (tests.yml) y se ejecuta en cualquier commit o pull request. El trabajo que ejecuta la suite de pruebas modificada, cypress, muestra cómo ejecutar una suite de pruebas de Cypress. El siguiente trabajo en el ejemplo, axe-dev-hub, es una invocación de la acción de GitHub Axe Developer Hub.

Tu trabajo de suite de pruebas siempre debe ejecutarse antes la acción de GitHub Axe Developer Hub.

tip

El directorio de ejemplos contiene un proyecto de prueba completo con el que puedes experimentar.

Referencias

Is this page helpful?

Help us improve this page

Still need help?