Uso de Axe DevTools Linter con Jenkins

Puede enviar su código al Axe DevTools Linter para que sea revisado por problemas de accesibilidad como parte de una construcción en Jenkins. Esta guía muestra cómo configurar un paso de construcción en Jenkins para invocar Conector de Axe DevTools Linter y reportar a Jenkins cualquier error de accesibilidad encontrado.

Requisitos

Para agregar Axe DevTools Linter a las construcciones de Jenkins, necesita tener el siguiente software instalado:

• Jenkins. Consulte Instalación de Jenkins para instrucciones sobre cómo configurar Jenkins.
• Axe DevTools Linter y Conector. Vea Configuración del servidor local o Instalación con Docker, y Uso del Conector de Axe DevTools Linter para instrucciones de configuración.
• El script de construcción axe-linter-jenkins-sonarqube.sh. Las instrucciones para instalar este script están en la siguiente sección.

Instalación del Script de Construcción de Jenkins

El código fuente para el script de compilación de Jenkins se proporciona en la sección El script de construcción a continuación. Crea un archivo llamado axe-linter-jenkins-sonarqube.sh copiando el código fuente de esa sección.

Edita el script para reflejar la URL y el puerto correctos de tu instancia de Axe DevTools Linter (ya sea SaaS o local). Hay dos variables de entorno en el script en las líneas 12 y 13 que podrías necesitar cambiar, como se muestra a continuación:

export AXE_LINTER_SERVER_URL=http://localhost
export AXE_LINTER_SERVER_PORT=3000

Ahora cree un directorio en /opt con la cuenta de administrador utilizando el siguiente comando:

sudo mkdir /opt/axeScripts

Copie el script a /opt/axeScripts:

sudo cp axe-linter-jenkins-sonarqube.sh /opt/axeScripts

Establezca el indicador de ejecución del script:

sudo chmod +x /opt/axeScripts/axe-linter-jenkins-sonarqube.sh

Agregar un paso de construcción

Para este ejemplo, utilizará un proyecto existente y simplemente agregará un nuevo paso de construcción.

Elija el trabajo que desea modificar y elija Configurar en el panel izquierdo. Luego seleccione la pestaña Construir para desplazarse a la sección de Construcción, donde elegirá el menú desplegable Agregar paso de construcción y seleccionará Ejecutar shell.

En el nuevo paso de construcción Ejecutar shell, ingrese lo siguiente en el cuadro de texto Comando:

/opt/axeScripts/axe-linter-jenkins-sonarqube.sh

Seleccione el botón Avanzado... en este paso de construcción para establecer el código de salida que indicará un error a Jenkins. Ingrese 1 en el cuadro de texto Código de salida para establecer construcción inestable. El script devuelve 1 si hay algún error de accesibilidad.

Elija Guardar o Aplicar para aceptar sus cambios.

El script de construcción

El script axe-linter-jenkins-sonarqube.sh ejecuta Axe DevTools Linter Connector sobre los archivos en el directorio raíz de la construcción de Jenkins y genera un informe, axe-linter-report.json. El script luego busca errores en el informe y reporta el error devolviendo 1, lo que hace que la construcción sea marcada como inestable en Jenkins.

El código fuente del script de construcción se muestra a continuación:

#!/bin/bash
# axe-linter-jenkins-sonarqube.sh
# This script will setup the environment variables needed for axe-linter-connector
# and execute axe-linter-connector. The output file will be reviewed and call back with exit codes:
## 0 - No Accessibility Defects
## 1 - Axe DevTools Linter Detected Accessibility Defects
## 2 - Execution problem, or Axe DevTools Linter unavailable.

echo "Axe DevTools Linter Jenkins SonarQube Starting $(date)"

# Setup variables for Axe DevTools Linter
export AXE_LINTER_SERVER_URL=http://localhost
export AXE_LINTER_SERVER_PORT=3000

# Configure outfile: output in Generic Issue Import Format for SonarQube in execution directory.

OutFile="axe-linter-report.json"

# Remove previous results
rm $OutFile

# execute axe-linter-connector
axe-linter-connector -s . -d .

echo "Checking for Results $(date)"

if [ ! -f "$OutFile" ];
   then
     echo "$OutFile Does Not Exit"
     exit 2

   elif cat "$OutFile" | grep -q "BUG"; then
      echo "Axe DevTools Linter Accessibility Defect Detected"
      exit 1
   else
     echo "No Axe DevTools Linter Bugs Detected"
fi
exit 0

El resultado de este script es una simple aprobación/desaprobación dependiendo de si se encuentran o no errores de accesibilidad por el Axe DevTools Linter. No se envía otra información a Jenkins. Sin embargo, el informe generado, axe-linter-report.json, contiene información más específica sobre errores de accesibilidad: nombre del archivo, número de línea e información del error de accesibilidad. Una forma de capturar esta información es importar el informe a SonarQube. Para más información, consulte Uso de Axe DevTools Linter con SonarQube.