Utiliser axe DevTools Linter avec Jenkins

Vous pouvez soumettre votre code à axe DevTools Linter pour qu'il soit vérifié pour les problèmes d'accessibilité dans le cadre d'une build Jenkins. Ce guide montre comment configurer une étape de build dans Jenkins pour invoquer axe DevTools Linter Connector et signaler à Jenkins toute erreur d'accessibilité détectée.

Exigences

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

• Jenkins. Consultez Installation de Jenkins pour obtenir des instructions sur la configuration de Jenkins.
• axe DevTools Linter et Connecteur. Consultez Configuration du serveur sur site et Utilisation d'axe DevTools Linter Connector pour obtenir des instructions de configuration.
• Le axe-linter-jenkins-sonarqube.sh script de construction **** . Les instructions pour l'installation de ce script se trouvent dans la section suivante.

Installation du Script de Build Jenkins

Vous devriez avoir un fichier tar compressé contenant l'exemple de script de construction Jenkins. Le fichier tar doit être appelé axeScripts.tar.gz. Vous pouvez extraire le script en tapant ce qui suit :

tar xvfz axeScripts.tar.gz

Il devrait y avoir un fichier extrait de l'archive, axe-linter-jenkins-sonarqube.sh. Modifiez le script pour refléter l'URL et le port corrects de votre instance axe DevTools Linter (qu'elle 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 modifier, 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

Activer l'indicateur d'exécution du script :

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

Ajout d'une étape de construction

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

Choisissez la tâche que vous souhaitez modifier et choisissez Configurer dans le panneau de gauche. Sélectionnez ensuite l'onglet Construction pour faire défiler jusqu'à la section Construction, où vous choisirez la liste déroulante Ajouter une étape de construction et sélectionnerez Exécuter le script shell.

Dans la nouvelle étape de création Exécuter le script 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 construction pour définir le code de sortie qui indiquera une erreur à Jenkins. Saisissez 1 dans la zone de texte Code de sortie pour rendre la construction instable . Le script renvoie 1 s'il y a des erreurs d'accessibilité.

Choisissez Enregistrer ou Appliquer pour accepter vos modifications.

Le script de construction

Le script axe-linter-jenkins-sonarqube.sh exécute axe DevTools Linter Connector sur les fichiers du répertoire racine de la build Jenkins et génère un rapport, axe-linter-report.json. Le script recherche ensuite dans le rapport les erreurs éventuelles et signale l'erreur en renvoyant 1, ce qui entraîne le marquage de la build comme instable dans Jenkins.

Le code source du script de construction est affiché 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é détecté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 les erreurs d'accessibilité. Une façon de capturer ces informations est d’importer le rapport dans SonarQube. Pour plus d'informations, voir Utilisation d'axe DevTools Linter avec SonarQube