Utiliser Axe DevTools Linter avec Jenkins

Vous pouvez soumettre votre code à Axe DevTools Linter pour le vérifier à la recherche de problèmes d'accessibilité dans le cadre d'un build Jenkins. Ce guide montre comment configurer une étape de build dans Jenkins pour invoquer Connecteur Axe DevTools Linter et signaler à Jenkins toutes les erreurs d'accessibilité trouvées.

Prérequis

Pour ajouter Axe DevTools Linter aux builds Jenkins, vous devez avoir le logiciel suivant installé :

• Jenkins. Voir Installer Jenkins pour les instructions sur la configuration de Jenkins.
• Axe DevTools Linter et Connecteur. Voir Configurer le serveur sur site ou Installation avec Docker, et Utiliser le connecteur Axe DevTools Linter pour les instructions de configuration.
• Le script de build axe-linter-jenkins-sonarqube.sh. Les instructions pour installer ce script sont dans la section suivante.

Installer le script de build Jenkins

Le code source du script de build Jenkins est fourni dans la section Le script de build ci-dessous. Créez un fichier nommé axe-linter-jenkins-sonarqube.sh en copiant le code source à partir de cette section.

Modifiez le script pour refléter l'URL et le port corrects de votre instance Axe DevTools Linter (que ce soit SaaS ou sur site). Il y a deux variables d'environnement dans le script aux lignes 12 et 13 que vous devrez peut-être changer, comme indiqué ci-dessous :

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

Créez maintenant un répertoire dans /opt avec le compte administrateur en utilisant la commande suivante :

sudo mkdir /opt/axeScripts

Copiez le script dans /opt/axeScripts :

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

Définir le drapeau d'exécution du script :

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

Ajouter une étape de build

Pour cet exemple, vous utiliserez un projet existant et ajouterez simplement une nouvelle étape de build.

Choisissez le projet que vous souhaitez modifier et sélectionnez Configurer dans le panneau de gauche. Ensuite, sélectionnez l'onglet Build pour descendre à la section Build, où vous choisirez le menu déroulant Ajouter une étape de build et sélectionnerez Exécuter le shell.

Dans la nouvelle étape de build Exécuter le shell, entrez ce qui suit dans la zone de texte Commande :

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

Sélectionnez le bouton Avancé... sur cette étape de build pour définir le code de sortie qui indiquera une erreur à Jenkins. Entrez 1 dans la zone de texte Code de sortie pour mettre le build instable. Le script retourne 1 s'il y a des erreurs d'accessibilité.

Choisissez Enregistrer ou Appliquer pour accepter vos modifications.

Le script de build

Le script axe-linter-jenkins-sonarqube.sh exécute le Connecteur Axe DevTools Linter sur les fichiers du répertoire racine du build Jenkins et génère un rapport, axe-linter-report.json. Ensuite, le script recherche les erreurs dans le rapport et signale l'erreur en retournant 1, ce qui fait que le build est marqué comme instable dans Jenkins.

Le code source du script de build est montré ci-dessous :

#!/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

Le résultat de ce script est un simple succès/échec selon qu'il y a ou non des erreurs d'accessibilité trouvées par Axe DevTools Linter. Aucune autre information n'est envoyée à Jenkins. Le rapport généré, axe-linter-report.json, contient cependant des informations plus spécifiques sur les erreurs d'accessibilité : nom de fichier, numéro de ligne et informations sur l'erreur d'accessibilité. Une façon de capturer ces informations est d'importer le rapport dans SonarQube. Pour plus d'informations, voir Utiliser Axe DevTools Linter avec SonarQube