Axe DevTools Linter gebruiken met Jenkins

Je kunt je code indienen bij Axe DevTools Linter om te worden gecontroleerd op toegankelijkheidsproblemen als onderdeel van een Jenkins-build. Deze gids laat zien hoe je een bouwstap in Jenkins kunt instellen om Axe DevTools Linter Connector aan te roepen en meldt Jenkins eventuele gevonden toegankelijkheidsfouten.

Vereisten

Om Axe DevTools Linter toe te voegen aan Jenkins-builds, moet je de volgende software geïnstalleerd hebben:

• Jenkins. Zie Jenkins installeren voor instructies over het instellen van Jenkins.
• Axe DevTools Linter en Connector. Zie De lokale server instellen of Installeren met Docker, en Axe DevTools Linter Connector gebruiken voor installatie-instructies.
• Het axe-linter-jenkins-sonarqube.sh bouwscript. Instructies voor het installeren van dit script staan in de volgende sectie.

Het Jenkins-bouwscript installeren

Je zou een gecomprimeerd tar-bestand moeten hebben dat het voorbeeld van het Jenkins-bouwscript bevat. Het tar-bestand zou genaamd moeten zijn axeScripts.tar.gz. Je kunt het script uitpakken door het volgende in te typen:

tar xvfz axeScripts.tar.gz

Er zou één bestand uit het archief gehaald moeten worden, axe-linter-jenkins-sonarqube.sh. Bewerk het script om de correcte URL en poort van je Axe DevTools Linter-instantie (of deze nu SaaS of lokaal is) weer te geven. Er zijn twee omgevingsvariabelen in het script op regels 12 en 13 die je mogelijk moet aanpassen, zoals hieronder weergegeven:

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

Maak nu een directory in /opt met het beheerdersaccount met behulp van de volgende opdracht:

sudo mkdir /opt/axeScripts

Kopieer het script naar /opt/axeScripts:

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

Stel de uitvoeringsvlag van het script in:

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

Een bouwstap toevoegen

Voor dit voorbeeld gebruik je een bestaand project en voeg je eenvoudig een nieuwe bouwstap toe.

Kies de taak die je wilt wijzigen en kies Configureren in het linker paneel. Selecteer vervolgens de Bouwen tab om naar het bouwgedeelte te scrollen, waar je de optie Bouwstap toevoegen uitklapt en selecteer Shell uitvoeren.

In de nieuwe Shell uitvoeren bouwstap, voer je het volgende in het Opdracht tekstvak in:

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

Selecteer de Geavanceerd... knop in deze bouwstap om de exitcode in te stellen die een fout aan Jenkins aangeeft. Voer 1 in het Exitcode om build instabiel te maken tekstvak. Het script retourneert 1 als er toegankelijkheidsfouten zijn.

Kies Opslaan of Toepassen om uw wijzigingen te accepteren.

Het Build Script

Het axe-linter-jenkins-sonarqube.sh script voert Axe DevTools Linter Connector uit over de bestanden in de hoofdmap van de Jenkins-build en genereert een rapport, axe-linter-report.json. Het script doorzoekt vervolgens het rapport op eventuele fouten en rapporteert de fout door 1terug te geven, waardoor de build als onstabiel in Jenkins wordt gemarkeerd.

De broncode voor het buildscript wordt hieronder weergegeven:

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

Het resultaat van dit script is een eenvoudige pass/fail afhankelijk van of er toegankelijkheidsfouten worden gevonden door Axe DevTools Linter. Er wordt geen andere informatie naar Jenkins gestuurd. Het gegenereerde rapport, axe-linter-report.json bevat echter wel meer specifieke informatie over toegankelijkheidsfouten: bestandsnaam, regelnummer en toegankelijkheidsfoutinformatie. Een manier om deze informatie vast te leggen, is door het rapport in SonarQube te importeren. Voor meer informatie, zie Axe DevTools Linter gebruiken met SonarQube