Verwendung von Axe DevTools Linter mit Jenkins

Sie können Ihren Code an Axe DevTools Linter übermitteln, um ihn im Rahmen eines Jenkins-Builds auf Barrierefreiheitsprobleme zu überprüfen. In diesem Leitfaden wird erläutert, wie Sie in Jenkins einen Build-Step einrichten, um Axe DevTools Linter Connector aufzurufen und Jenkins über gefundene Barrierefreiheitsfehler zu berichten.

Anforderungen

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

• Jenkins. Siehe Jenkins installieren für Anweisungen zur Einrichtung von Jenkins.
• Axe DevTools Linter und Connector. Siehe Einrichten des On-Premises-Servers oder Installation mit Docker und Verwendung von Axe DevTools Linter Connector für Einrichtungshinweise.
• Das axe-linter-jenkins-sonarqube.sh Build-Skript. Anweisungen zur Installation dieses Skripts finden Sie im nächsten Abschnitt.

Jenkins-Build-Skript installieren

Der Quellcode für das Jenkins-Build-Skript ist im Abschnitt Das Build-Skript unten angegeben. Erstellen Sie eine Datei namens axe-linter-jenkins-sonarqube.sh, indem Sie den Quellcode aus diesem Abschnitt kopieren.

Bearbeiten Sie das Skript, um die korrekte URL und den Port Ihrer Axe DevTools Linter-Instanz (ob SaaS oder On-Premises) widerzuspiegeln. Es gibt zwei Umgebungsvariablen im Skript in den Zeilen 12 und 13, 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 ein Verzeichnis in /opt mit dem Administratorkonto mit folgendem 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ührungsbit des Skripts:

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

Hinzufügen eines Build-Schritts

In diesem Beispiel verwenden Sie ein bestehendes 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. Wählen Sie dann die Registerkarte Build aus, um zum Abschnitt Build zu scrollen, wo Sie das Dropdown-Menü Build-Schritt hinzufügen auswählen und Shell ausführen wählen.

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

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

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

Wählen Sie Speichern oder Anwenden, um Ihre Änderungen zu übernehmen.

Das Build-Skript

Das axe-linter-jenkins-sonarqube.sh Skript führt den Axe DevTools Linter Connector über die Dateien im Stammverzeichnis des Jenkins-Builds aus und generiert einen Bericht, axe-linter-report.json. Das Skript durchsucht dann den Bericht nach Fehlern und meldet den Fehler, indem es 1 zurückgibt, wodurch der Build in Jenkins als instabil markiert wird.

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

#!/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 vom Axe DevTools Linter Barrierefreiheitsfehler gefunden werden. Es wird keine andere Information an Jenkins gesendet. Der generierte Bericht, axe-linter-report.json, enthält jedoch spezifischere Informationen über Barrierefreiheitsfehler: Dateiname, Zeilennummer und Informationen zum Barrierefreiheitsfehler. Eine Möglichkeit, diese Informationen zu erfassen, besteht darin, den Bericht in SonarQube zu importieren. Für weitere Informationen siehe Verwendung von Axe DevTools Linter mit SonarQube