Utilizzo di axe DevTools Linter con SonarQube

Link to Utilizzo di axe DevTools Linter con SonarQube copied to clipboard

Not for use with personal data

Puoi integrare axe DevTools Linter con SonarQube e monitorare il tuo codice per problemi di accessibilità.

Requisiti

Per utilizzare axe DevTools Linter con SonarQube sarà necessario configurare diversi software, come elencato di seguito:

Jenkins. Per ulteriori informazioni, vedere Utilizzo di axe DevTools Linter con Jenkins . È necessario configurare Jenkins per generare un report utilizzando axe DevTools Linter Connector come parte del processo di compilazione e quindi inviare il report a SonarQube per l'analisi.
axe DevTools Linter e Connector. Per le istruzioni di configurazione, vedere Configurazione del server in sede e Utilizzo di axe DevTools Linter Connector .
SonarQube. Per maggiori informazioni, vedere Prova SonarQube . Per istruzioni dettagliate sull'installazione, vedere Installazione del server.
Il plugin SonarQube per Jenkins, SonarScanner per Jenkins.

Setting Up Rules in SonarQube

Il primo passo per configurare SonarQube è disabilitare le regole ridondanti (regole che si sovrappongono alle regole controllate da axe DevTools Linter). È possibile disattivare le regole sovrapposte nell'interfaccia di amministrazione di SonarQube.

Creazione di un nuovo profilo di qualità in SonarQube

Per modificare le regole, fare clic su ** Profili di qualità** nella parte superiore del sito Web di amministrazione di SonarQube. Quindi nel menu a discesa ** Filtra profili per:** seleziona HTML. Ora dovresti vedere il profilo HTML SonarQube integrato. Devi duplicare quel profilo cliccando sul menu a discesa a forma di ingranaggio sul lato destro del profilo e scegliendo Copia. SonarQube ti chiederà di assegnare un nome al nuovo profilo copiato. Chiama il nuovo profilo axe-linter e clicca sul pulsante Copia .

Ora dovresti avere un nuovo profilo di qualità HTML denominato axe-linter. Seleziona il menu a discesa dell'equipaggiamento per il profilo axe-linter e scegli Imposta come predefinito in modo che il profilo axe-linter venga utilizzato per controllare tutti i file HTML.

Rimuovi regole ridondanti

Il passo successivo è rimuovere nel profilo di qualità axe-linter appena creato le regole ridondanti. Nell'elenco delle regole HTML dovrebbero esserci due profili. Il profilo axe-linter e il profilo sonar way . Fare clic sul profilo axe-linter per andare alla pagina di configurazione del profilo. Nella parte sinistra dello schermo dovresti vedere un elenco dei diversi tipi di regole presenti nel profilo. Fare clic sul numero in alto a destra in Totale e nella colonna in Attivo per modificare le regole attive nel profilo axe-linter .

Sul lato destro della visualizzazione è presente un elenco di regole abilitate nel profilo HTML axe-linter . Disattiva le seguenti regole:

L'elemento " <html>" dovrebbe avere un attributo di lingua. Questo problema è già stato rilevato da axe DevTools Linter.
L'immagine, l'area e il pulsante con tag immagine dovrebbero avere un attributo "alt". Già rilevato da axe DevTools Linter.
"<object>" tag dovrebbe fornire un contenuto alternativo. Questo controllo è già eseguito da axe DevTools Linter.
"<th>" tag dovrebbero avere gli attributi "id" o "scope". axe DevTools Linter non controlla id o scope perché non sono sempre necessari, ma verifica l'utilizzo corretto se tali attributi vengono utilizzati.

Aggiungere un passaggio di build SonarQube a Jenkins

Per importare gli errori di accessibilità di axe DevTools Linter in SonarQube, è necessario aggiungere due passaggi di compilazione a Jenkins. Il primo passaggio di compilazione avviene quando Jenkins avvia axe DevTools Linter Connector e genera un report contenente gli errori di accessibilità rilevati da axe DevTools Linter. L'aggiunta di questo passaggio di build è trattata in Utilizzo di axe DevTools Linter con Jenkins. Una volta creato il report nel primo passaggio, Jenkins richiama SonarQube Scanner per importare il report in SonarQube.

I passaggi seguenti mostrano come configurare Jenkins per richiamare SonarQube Scanner e importare il report di accessibilità creato da axe DevTools Linter Connector e axe DevTools Linter.

Installa il plugin SonarQube in Jenkins

Ora devi installare il plugin SonarQube Scanner in Jenkins. Sul lato sinistro dello schermo di Jenkins, fare clic su Gestisci Jenkins . Quindi seleziona Gestisci plugin. Quindi seleziona la scheda Disponibile nella parte superiore dello schermo e digita sonarqube nella casella di testo del filtro. Seleziona Installa per lo Scanner SonarQube per Jenkins.

Aggiungi un passaggio di build dello scanner SonarQube

Per il progetto che desideri controllare, seleziona il progetto dalla Dashboard. Sul lato sinistro dell'interfaccia web di Jenkins, seleziona Configura. Ora fai clic sulla scheda Build per scorrere fino alla sezione Build della configurazione.

Dopo il passaggio di build Esegui shell già aggiunto da Utilizzo di axe DevTools Linter con Jenkins, scegli Esegui SonarQube Scanner dal menu a discesa Aggiungi passaggio di build .

Creare un file di configurazione SonarQube

È necessario creare un file di configurazione per SonarScanner di SonarQube. Di seguito è riportato un esempio di file di configurazione, sonar-project.properties.

sonar.projectKey=Test-Deque
sonar.externalIssuesReportPaths=axe-linter-report.json

** sonar.projectKey** è il nome del progetto in SonarQube in cui desideri che Jenkins e SonarScanner segnalino i risultati. Quando Jenkins esegue la fase di build dello scanner SonarQube, utilizzerà questa chiave di progetto.

Aggiungi il nome di questo file di configurazione alla casella di testo Percorso delle proprietà del progetto nel passaggio di build Esegui scanner SonarQube appena creato. Se hai posizionato sonar-project.properties alla radice del tuo progetto, devi solo aggiungere sonar-project.properties (senza percorso) a questa casella di testo.

Genera un token di sicurezza SonarQube

Per poter comunicare i risultati, lo scanner SonarQube deve essere in grado di connettersi a SonarQube. Puoi farlo creando un token di accesso nell'interfaccia web di amministrazione di SonarQube.

Nella parte superiore centrale dello schermo, fare clic su Amministrazione nell'interfaccia web di amministrazione di SonarQube. Nella parte superiore dello schermo, fare clic sul menu a discesa Sicurezza e scegliere Utenti. Seleziona un utente che Jenkins può utilizzare per segnalare i risultati a SonarQube e fai clic sull'icona sotto Token per creare un token di sicurezza per quell'utente. Sotto 'Genera token' nella finestra popup, digita il nome del token e fai clic su Genera . **** Salva il valore di questo token (una stringa esadecimale a 32 bit) perché non è possibile visualizzarlo nuovamente dopo aver chiuso la finestra Token . (Tuttavia, puoi generare un nuovo token in qualsiasi momento.)

Aggiungi il token di accesso a Jenkins

Ora nell'interfaccia web di Jenkins, seleziona la build che desideri configurare per SonarQube. Sul lato sinistro dello schermo, fare clic su Configurazione e quindi su Build nella parte superiore dello schermo. Scorri verso il basso fino al passaggio di build Esegui scanner SonarQube e immetti quanto segue per il tuo token di sicurezza nella casella di testo Proprietà analisi :

sonar.login=YOUR SECURITY TOKEN

Salva o Applica per salvare il tuo token di login. Ora Jenkins può comunicare i risultati della scansione per questo progetto a SonarQube.

Seleziona Build ora in Jenkins per testare la build con SonarQube.

Eventuali problemi rilevati da axe DevTools Linter verranno visualizzati facendo clic su Problemi nell'interfaccia web di SonarQube per il tuo progetto. I problemi di axe DevTools Linter vengono identificati da AXE-LINTER-MD per i file markdown e da AXE-LINTER-HTML per i file html.

Il Resoconto

Axe DevTools Linter Connector genera un rapporto JSON che segue il formato del rapporto generico SonarQube. Per ulteriori informazioni sul formato del report, vedere Formato del report generico SonarQube

È possibile modificare alcune delle opzioni nel rapporto utilizzando le opzioni della riga di comando di axe DevTools Linter Connector. Per ulteriori informazioni, vedere Opzioni facoltative della riga di comando .