Utilizzare Axe DevTools Linter con Jenkins

È possibile inviare il proprio codice ad Axe DevTools Linter per controllare i problemi di accessibilità come parte di una build Jenkins. Questa guida mostra come configurare un passo di build in Jenkins per invocare Connettore Axe DevTools Linter e riportare a Jenkins eventuali errori di accessibilità riscontrati.

Requisiti

Per aggiungere Axe DevTools Linter alle build di Jenkins, è necessario avere installato il seguente software:

• Jenkins. Vedere Installare Jenkins per le istruzioni su come configurare Jenkins.
• Axe DevTools Linter e Connettore. Vedere Configurare il server on-premises o Installare con Docker, e Utilizzare il Connettore Axe DevTools Linter per le istruzioni di configurazione.
• Lo script di build axe-linter-jenkins-sonarqube.sh. Le istruzioni per installare questo script si trovano nella sezione successiva.

Installare lo Script di Build di Jenkins

Il codice sorgente per lo script di build di Jenkins è fornito nella sezione Lo Script di Build qui sotto. Crea un file denominato axe-linter-jenkins-sonarqube.sh copiando il codice sorgente da quella sezione.

Modifica lo script per riflettere l'URL corretto e la porta della tua istanza di Axe DevTools Linter (sia essa SaaS o on-premises). Ci sono due variabili di ambiente nello script alle linee 12 e 13 che potresti dover modificare, come mostrato di seguito:

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

Ora create una directory in /opt con l'account admin utilizzando il seguente comando:

sudo mkdir /opt/axeScripts

Copiate lo script in /opt/axeScripts:

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

Impostate il flag di esecuzione dello script:

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

Aggiungere un Passo di Build

Per questo esempio, utilizzerete un progetto esistente e aggiungerete semplicemente un nuovo passo di build.

Scegliete il lavoro che desiderate modificare e selezionate Configura nel pannello sinistro. Poi, selezionate la scheda Build per scorrere alla sezione Build, dove sceglierete il menu a discesa Aggiungi passo di build e selezionerete Esegui shell.

Nel nuovo passo di build Esegui shell, inserite quanto segue nella casella di testo Comando:

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

Selezionate il pulsante Avanzate... su questo passo di build per impostare il codice di uscita che indicherà un errore a Jenkins. Inserite 1 nella casella di testo Codice di uscita per impostare build instabile. Lo script restituisce 1 se ci sono errori di accessibilità.

Scegliete Salva o Applica per accettare le vostre modifiche.

Lo Script di Build

Il script axe-linter-jenkins-sonarqube.sh esegue Axe DevTools Linter Connector sui file nella directory radice del build di Jenkins e genera un rapporto, axe-linter-report.json. Successivamente, lo script cerca eventuali errori nel rapporto e riporta l'errore restituendo 1, il che fa sì che il build venga contrassegnato come instabile in Jenkins.

Il codice sorgente per lo script di build è riportato di seguito:

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

Il risultato di questo script è un semplice pass/fail a seconda che ci siano o meno errori di accessibilità trovati da Axe DevTools Linter. Nessun'altra informazione viene inviata a Jenkins. Tuttavia, il rapporto generato, axe-linter-report.json, contiene informazioni più specifiche sugli errori di accessibilità: nome del file, numero di riga e informazioni sull'errore di accessibilità. Un modo per catturare queste informazioni è importare il rapporto in SonarQube. Per ulteriori informazioni, vedere Utilizzare Axe DevTools Linter con SonarQube