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 otras canalizaciones CI/CD (como las de GitLab, Bitbucket o CircleCI) o al usar Axe DevTools para API/CLI web, puedes usar API de estado de commit del Axe Developer Hub como base para tu propia integración.

Resumen

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

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

Los nuevos problemas y los resueltos que informa la acción utilizan la línea base del commit anterior que tiene un escaneo en esa misma rama, no de la rama predeterminada. Sólo los commits contra los cuales tu conjunto de pruebas realmente se ejecutó tienen un escaneo, por lo que ese commit base puede estar varios commits atrás. Si ese commit ejecutó un conjunto diferente de pruebas, los conteos reflejarán la diferencia de cobertura en lugar de un cambio genuino; consulta 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, almacenaremos el ID de 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 personal de API como su valor, pero puedes nombrar el secreto como desees. Debe ser referenciado con 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 de flujo de trabajo.

  3. Agrega Revisiones de Accesibilidad a tu Conjunto de Pruebas - Asegúrate de haber completado los pasos en configuración del proyecto para integrar revisiones de accesibilidad en el conjunto de pruebas que se utiliza en tu canalización CI/CD (Axe Watcher).

  4. Modifica tu Flujo de Trabajo Actual - Debes modificar tu flujo de trabajo actual del ejecutor de pruebas en .github/workflows y agregar la acción de GitHub después al trabajo que ejecuta tu conjunto de pruebas.

Trabajo de Ejemplo

El trabajo después de tu acción del conjunto de pruebas debería 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 conjunto 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 conjunto de pruebas.

Puedes usar múltiples parámetros de entrada para la acción de GitHub. Por ejemplo, puedes habilitar el umbral de a11y 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 del Axe Developer Hub.

note

You do not need to set the server_url parameter if you created your project on axe.deque.com. If your organization uses a regional instance, private cloud, or on-premises deployment of Axe Developer Hub, you must set server_url to the base URL of that instance (for example, https://axe-eu.deque.com).

Resultados

La acción de GitHub establece varios parámetros de salida, incluyendo un conteo de problemas de accesibilidad que fueron detectados, problemas que fueron resueltos y problemas que superan el umbral de a11y.

Si no has habilitado el umbral de a11y, la acción de GitHub fallará siempre que haya más de cero errores de accesibilidad presentes. Si está habilitado, solo las violaciones que superen el umbral de a11y causarán que la acción de GitHub falle. Aprende más sobre el uso del umbral de a11y para personalizar el Axe Developer Hub de acuerdo a lo que tu organización desea priorizar.

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

Un ejemplo de mensaje que la acción de GitHub adjunta a una solicitud de empuje 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 los defectos de accesibilidad para ese commit en el 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 configuración para las acciones. Necesitas permisos de lectura y escritura para permitir que la acción agregue comentarios a las solicitudes de extracción. Para mayor granularidad, puedes optar por usar una GITHUB_TOKEN diferente para la acción de GitHub. Agrega este valor al parámetro de entrada github_token.

Flujo de Trabajo de Ejemplo

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

El ejemplo de flujo de trabajo se llama Pruebas (tests.yml) y se ejecuta en cualquier commit o pull request. El trabajo que ejecuta el conjunto de pruebas modificado, cypress, muestra cómo ejecutar un conjunto 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 conjunto de pruebas siempre debe ejecutarse antes la acción de GitHub Axe Developer Hub.

tip

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

Referencias

Is this page helpful?

Help us improve this page

Still need help?