Free Trial

Verwenden von axe DevTools Linter mit SonarQube

Link to Verwenden von axe DevTools Linter mit SonarQube copied to clipboard
Free Trial
Not for use with personal data

Sie können axe DevTools Linter in SonarQube integrieren und Ihren Code auf Zugänglichkeitsprobleme überwachen.

Anforderungen

Um axe DevTools Linter mit SonarQube verwenden zu können, müssen Sie mehrere Softwarekomponenten einrichten, wie unten aufgeführt:

Einrichten von Regeln in SonarQube

Der erste Schritt zum Einrichten von SonarQube besteht darin, redundante Regeln zu deaktivieren (Regeln, die sich mit Regeln überschneiden, die von axe DevTools Linter überprüft werden). Sie können die überlappenden Regeln in der SonarQube-Administratoroberfläche deaktivieren.

Erstellen eines neuen Qualitätsprofils in SonarQube

Um die Regeln zu ändern, klicken Sie oben auf der SonarQube-Administrator-Website auf Qualitätsprofile . Wählen Sie dann im Dropdown-Menü Profile filtern nach: die Option HTML aus. Sie sollten jetzt das integrierte SonarQube-HTML-Profil sehen. Sie müssen dieses Profil duplizieren, indem Sie auf das Dropdown-Menü mit dem Zahnrad auf der rechten Seite des Profils klicken und Kopieren auswählen. SonarQube fordert Sie auf, dem neuen kopierten Profil einen Namen zu geben. Nennen Sie das neue Profil axe-linter und klicken Sie auf die Schaltfläche Kopieren .

Sie sollten jetzt ein neues HTML-Qualitätsprofil namens axe-linter haben. Wählen Sie das Dropdown-Menü mit dem Zahnrad für das Profil axe-linter und wählen Sie Als Standard festlegen , damit das Profil axe-linter zum Überprüfen aller HTML-Dateien verwendet wird.

Redundante Regeln entfernen

Der nächste Schritt besteht darin, redundante Regeln im soeben erstellten axe-linter Qualitätsprofil zu entfernen. In der Liste der HTML-Regeln sollten zwei Profile vorhanden sein. Das Axe-Linter Profil und das Sonar way Profil. Klicken Sie auf das Profil axe-linter , um zur Profilkonfigurationsseite zu gelangen. Auf der linken Seite des Bildschirms sollten Sie eine Liste mit verschiedenen Regeltypen im Profil sehen. Klicken Sie auf die Zahl oben rechts bei Gesamt und in der Spalte Aktiv , um die aktiven Regeln im Profil axe-linter zu bearbeiten.

Auf der rechten Seite der Anzeige befindet sich eine Liste der Regeln, die im HTML-Profil axe-linter aktiviert sind. Deaktivieren Sie die folgenden Regeln:

  • Das Element „<html>“ sollte ein Sprachattribut haben. Dieses Problem wurde bereits vom axe DevTools Linter erkannt.
  • Bilder, Bereiche und Schaltflächen mit Bild-Tags sollten ein „alt“-Attribut haben. Bereits vom axe DevTools Linter erkannt.
  • "<object>"-Tag sollte einen alternativen Inhalt bereitstellen. Diese Prüfung wird bereits vom axe DevTools Linter durchgeführt.
  • „<th>“-Tags sollten die Attribute „id“ oder „scope“ haben. axe DevTools Linter prüft nicht die ID oder den Bereich , da diese nicht immer benötigt werden. Es prüft jedoch die korrekte Verwendung, wenn diese Attribute verwendet werden.

Fügen Sie Jenkins einen SonarQube-Build-Schritt hinzu

Es gibt zwei Build-Schritte, die Sie zu Jenkins hinzufügen müssen, um die Zugänglichkeitsfehler von axe DevTools Linter in SonarQube zu importieren. Der erste Build-Schritt erfolgt, wenn Jenkins den axe DevTools Linter Connector startet und einen Bericht mit den von axe DevTools Linter erkannten Zugänglichkeitsfehlern generiert. Das Hinzufügen dieses Build-Schritts wird unter [Verwenden von axe DevTools Linter mit Jenkins] behandelt(axe-linter-with-jenkins). Sobald im ersten Schritt der Bericht erstellt wurde, ruft Jenkins den SonarQube-Scanner auf, um den Bericht in SonarQube zu importieren.

Die folgenden Schritte zeigen, wie Jenkins eingerichtet wird, um den SonarQube Scanner aufzurufen und den von axe DevTools Linter Connector und axe DevTools Linter erstellten Zugänglichkeitsbericht zu importieren.

Installieren Sie das SonarQube-Plugin in Jenkins

Sie müssen jetzt das SonarQube Scanner-Plugin in Jenkins installieren. Im Dashboard in Jenkins, auf der linken Seite des Bildschirms, klicken Sie auf Jenkins verwalten . Wählen Sie dann Plugins verwalten. Wählen Sie dann oben auf dem Bildschirm die Registerkarte Verfügbar und geben Sie sonarqube in das Filtertextfeld ein. Wählen Sie Installieren für den SonarQube Scanner für Jenkins.

Einen SonarQube Scanner Build-Schritt hinzufügen

Wählen Sie das Projekt, das Sie überprüfen möchten, aus dem Dashboard aus. Wählen Sie auf der linken Seite der Jenkins-Weboberfläche Konfigurieren. Klicken Sie nun auf die Registerkarte Build , um zum Abschnitt Build der Konfiguration zu scrollen.

Wählen Sie nach dem Build-Schritt Shell ausführen , den Sie bereits unter Using axe DevTools Linter mit Jenkins hinzugefügt haben, die Option SonarQube Scanner ausführen aus der Dropdown-Liste Build-Schritt hinzufügen .

Erstellen Sie eine SonarQube-Konfigurationsdatei

Sie müssen eine Konfigurationsdatei für den SonarScanner von SonarQube erstellen. Nachfolgend sehen Sie eine Beispielkonfigurationsdatei: sonar-project.properties.

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

Der ** sonar.projectKey** ist der Name des Projekts in SonarQube, in dem Jenkins und SonarScanner Ergebnisse melden sollen. Wenn Jenkins den Build-Schritt des SonarQube-Scanners ausführt, wird dieser Projektschlüssel verwendet.

Fügen Sie den Namen dieser Konfigurationsdatei dem Textfeld Pfad zu den Projekteigenschaften im soeben erstellten Build-Schritt SonarQube Scanner ausführen hinzu. Wenn Sie sonar-project.properties im Stammverzeichnis Ihres Projekts platziert haben, müssen Sie diesem Textfeld nur sonar-project.properties (ohne Pfad) hinzufügen.

Generieren Sie ein SonarQube-Sicherheitstoken

Der SonarQube-Scanner muss eine Verbindung zu SonarQube herstellen können, um Ergebnisse zu melden. Sie können dies tun, indem Sie im SonarQube Admin-Webinterface ein Anmeldetoken erstellen.

Um ein Anmeldetoken zu erstellen, klicken Sie im SonarQube Admin-Webinterface oben in der Mitte des Bildschirms auf Administration . Klicken Sie dann oben auf dem Bildschirm auf das Dropdown-Menü Sicherheit und wählen Sie Benutzer. Wählen Sie einen Benutzer aus, den Jenkins zum Melden von Ergebnissen an SonarQube verwenden kann, und klicken Sie auf das Symbol unter Tokens , um ein Sicherheitstoken für diesen Benutzer zu erstellen. Geben Sie im Popup-Fenster unter Token generieren den Namen des Tokens ein und klicken Sie auf Generieren. Speichern Sie den Wert dieses Tokens (eine 32-Bit-Hex-Zeichenfolge), da es keine Möglichkeit gibt, ihn erneut anzuzeigen, nachdem Sie das Fenster Token geschlossen haben. (Sie können jedoch jederzeit ein neues Token generieren.)

Fügen Sie den Login-Token zu Jenkins hinzu

Wählen Sie jetzt in der Jenkins-Weboberfläche den Build aus, den Sie für SonarQube konfigurieren möchten. Klicken Sie auf der linken Seite des Bildschirms auf Konfigurieren und oben auf dem Bildschirm auf Erstellen . Scrollen Sie nach unten zum Build-Schritt SonarQube Scanner ausführen und geben Sie Folgendes für Ihr Sicherheitstoken in das Textfeld Analyseeigenschaften ein:

sonar.login=YOUR SECURITY TOKEN

Speichern oder Übernehmen , um Ihr Anmeldetoken zu speichern. Jetzt kann Jenkins die Scannerergebnisse für dieses Projekt an SonarQube melden.

In Jenkins wählen Sie Jetzt erstellen , um den Build mit SonarQube zu testen.

Alle von axe DevTools Linter gefundenen Probleme werden angezeigt, wenn Sie in der SonarQube-Weboberfläche für Ihr Projekt auf Probleme klicken. axe DevTools Linter-Probleme werden für Markdown-Dateien durch AXE-LINTER-MD und für HTML-Dateien durch AXE-LINTER-HTML gekennzeichnet.

Der Bericht

Der axe DevTools Linter Connector generiert einen JSON-Bericht, der dem SonarQube Generic Report-Format folgt. Weitere Informationen zum Berichtsformat finden Sie unter [SonarQube Generic Report format].(https://docs.sonarqube.org/latest/analysis/generic-issue/)

Sie können einige der Optionen im Bericht ändern, indem Sie die Befehlszeilenoptionen des axe DevTools Linter Connector verwenden. Weitere Informationen finden Sie unter Optionale Befehlszeilenoptionen .

Is this page helpful?

Help us improve this page

Try axe DevTools® Linter

Free Trial

Still need help?