Verwendung von axe DevTools Linter mit Jenkins

Sie können Ihren Code an axe DevTools Linter senden, um ihn im Rahmen eines Jenkins-Builds auf Zugänglichkeitsprobleme überprüfen zu lassen. Diese Anleitung zeigt, wie Sie einen Build-Schritt in Jenkins einrichten, um axe DevTools Linter Connector aufzurufen und gefundene Zugänglichkeitsfehler an Jenkins zu melden.

Anforderungen

Um axe DevTools Linter zu Jenkins-Builds hinzuzufügen, müssen Sie die folgende Software installiert haben:

• Jenkins. Anweisungen zum Einrichten von Jenkins finden Sie unter Jenkins installieren .
• axe DevTools Linter und Connector hinzufügen. Anweisungen zur Einrichtung finden Sie unter Einrichten des lokalen Servers und Using axe DevTools Linter Connector .

– Das axe-linter-jenkins-sonarqube.sh Build-Skript. Anweisungen zur Installation dieses Skripts finden Sie im nächsten Abschnitt.

Installieren des Jenkins Build-Skripts

Sie sollten über eine komprimierte TAR-Datei verfügen, die das Beispiel-Build-Skript von Jenkins enthält. Die Tar-Datei sollte axeScripts.tar.gz heißen. Sie können das Skript extrahieren, indem Sie Folgendes eingeben:

tar xvfz axeScripts.tar.gz

Eine Datei sollte aus dem Archiv extrahiert sein: axe-linter-jenkins-sonarqube.sh. Bearbeiten Sie das Skript, um die richtige URL und den richtigen Port Ihrer axe DevTools Linter-Instanz (egal ob SaaS oder vor Ort) wiederzugeben. In den Zeilen 12 und 13 des Skripts gibt es zwei Umgebungsvariablen, die Sie möglicherweise ändern müssen, wie unten gezeigt:

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

Erstellen Sie nun mit dem Administratorkonto ein Verzeichnis in /opt mit dem folgenden Befehl:

sudo mkdir /opt/axeScripts

Kopieren Sie das Skript nach /opt/axeScripts:

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

Setzen Sie das Ausführungsflag für das Skript:

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

Hinzufügen eines Build-Schritts

Für dieses Beispiel verwenden Sie ein vorhandenes Projekt und fügen einfach einen neuen Build-Schritt hinzu.

Wählen Sie den Job aus, den Sie ändern möchten, und wählen Sie Konfigurieren im linken Bereich aus. Wählen Sie dann die Registerkarte Build aus, um zum Abschnitt „Build“ zu scrollen. Wählen Sie dort das Dropdown-Menü Build-Schritt hinzufügen und wählen Sie Shell ausführen aus.

Geben Sie im neuen Build-Schritt Shell ausführen Folgendes in das Textfeld Befehl ein:

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

Wählen Sie in diesem Build-Schritt die Schaltfläche Erweitert… , um den Exit-Code festzulegen, der Jenkins einen Fehler anzeigt. Geben Sie 1 in das Textfeld Exitcode, um Build als instabil festzulegen ein. Das Skript gibt 1 zurück, wenn Zugänglichkeitsfehler vorliegen.

Wählen Sie Speichern oder Übernehmen , um Ihre Änderungen zu akzeptieren.

Das Build-Skript

Das Skript axe-linter-jenkins-sonarqube.sh führt den axe DevTools Linter Connector über die Dateien im Stammverzeichnis des Jenkins-Builds aus und generiert einen Bericht, axe-linter-report.json. Anschließend durchsucht das Skript den Bericht nach Fehlern und meldet den Fehler durch die Rückgabe von 1, was dazu führt, dass der Build in Jenkins als instabil markiert wird.

Der Quellcode für das Build-Skript wird unten angezeigt:

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

Das Ergebnis dieses Skripts ist ein einfaches Bestehen/Nichtbestehen, abhängig davon, ob der axe DevTools Linter irgendwelche Barrierefreiheitsfehler findet. Es werden keine weiteren Informationen an Jenkins gesendet. Der generierte Bericht axe-linter-report.json enthält jedoch spezifischere Informationen zu Barrierefreiheitsfehlern: Dateiname, Zeilennummer und Informationen zum Barrierefreiheitsfehler. Eine Möglichkeit, diese Informationen zu erfassen, besteht darin, den Bericht in SonarQube zu importieren. Weitere Informationen finden Sie unter [Verwenden von axe DevTools Linter mit SonarQube].(axe-linter-with-sonarqube)