Free Trial

Utilisation d'axe DevTools Linter avec SonarQube

Link to Utilisation d'axe DevTools Linter avec SonarQube copied to clipboard
Free Trial
Not for use with personal data

Vous pouvez intégrer axe DevTools Linter avec SonarQube et surveiller votre code pour détecter les problèmes d'accessibilité.

Prérequis

Vous devrez configurer plusieurs logiciels pour utiliser axe DevTools Linter avec SonarQube comme indiqué ci-dessous :

Configuration des règles dans SonarQube

La première étape pour configurer SonarQube consiste à désactiver les règles redondantes (règles qui chevauchent les règles vérifiées par axe DevTools Linter). Vous pouvez désactiver les règles de chevauchement dans l'interface d'administration de SonarQube.

En créant un nouveau profil de qualité dans SonarQube

Pour modifier les règles, cliquez sur Profils de qualité en haut du site Web d'administration de SonarQube. Ensuite, dans la liste déroulante Filtrer les profils par : , sélectionnez HTML. Vous devriez maintenant voir le profil HTML SonarQube intégré. Vous devez dupliquer ce profil en cliquant sur le menu déroulant des paramètres sur le côté droit du profil et en choisissant Copier. SonarQube vous demandera de nommer le nouveau profil copié. Nommez le nouveau profil axe-linter et cliquez sur le bouton Copier .

Vous devriez maintenant avoir un nouveau profil de qualité HTML appelé axe-linter. Choisissez le menu déroulant des paramètres pour le profil axe-linter et choisissez Définir par défaut afin que le profil axe-linter soit utilisé pour vérifier tous les fichiers HTML.

Supprimer les règles redondantes

L’étape suivante consiste à supprimer les règles redondantes dans le profil de qualité axe-linter que vous venez de créer. Dans la liste des règles HTML, il devrait y avoir deux profils. Le profil axe-linter et le profil Sonar way . Cliquez sur le profil axe-linter pour accéder à la page de configuration du profil. Sur la partie gauche de l'écran, vous devriez voir une liste de différents types de règles dans le profil. Cliquez sur le numéro en haut à droite de Total et dans la colonne Active pour modifier les règles actives dans le profil axe-linter .

Sur le côté droit de l'écran se trouve une liste de règles activées dans le profil HTML axe-linter . Désactiver les règles suivantes :

  • L'élément "<html>" doit avoir un attribut de langue. Ce problème est déjà détecté par axe DevTools Linter.
  • L'image, la zone et le bouton avec des balises d'image doivent avoir un attribut « alt ». Déjà détecté par axe DevTools Linter.
  • La balise "<object>" doit fournir un contenu alternatif. Cette vérification est déjà effectuée par axe DevTools Linter.
  • Les balises "<th>" doivent avoir des attributs « id » ou « scope ». axe DevTools Linter ne vérifie pas l' id ou scope car ils ne sont pas toujours nécessaires, mais il vérifie l'utilisation correcte si ces attributs sont utilisés.

Ajouter une étape de construction SonarQube à Jenkins

Il y a deux étapes de construction que vous devez ajouter à Jenkins pour importer les erreurs d'accessibilité d'axe DevTools Linter dans SonarQube. La première étape de construction se produit lorsque Jenkins démarre axe DevTools Linter Connector et génère un rapport contenant les erreurs d'accessibilité détectées par axe DevTools Linter. L'ajout de cette étape de construction est traité dans Utilisation d'axe DevTools Linter avec Jenkins. Une fois que la première étape a créé le rapport, Jenkins appelle ensuite le scanner SonarQube pour importer le rapport dans SonarQube.

Les étapes suivantes montrent comment configurer Jenkins pour appeler le scanner SonarQube et importer le rapport d'accessibilité créé par axe DevTools Linter Connector et axe DevTools Linter.

Installer le plugin SonarQube dans Jenkins

Vous devez maintenant installer le plugin SonarQube Scanner dans Jenkins. Dans le tableau de bord de Jenkins, cliquez sur Gérer Jenkins sur le côté gauche de l'écran. Choisissez ensuite Gérer les plugins. Choisissez ensuite l'onglet Disponible en haut de l'écran et saisissez sonarqube dans la zone de texte du filtre. Choisissez Installer pour le scanner SonarQube pour Jenkins.

Ajouter une étape de construction du scanner SonarQube

Pour le projet que vous souhaitez vérifier, sélectionnez le projet dans le tableau de bord. Sur le côté gauche de l'interface Web Jenkins, choisissez Configurer. Cliquez maintenant sur l'onglet Build pour accéder à la section Build de la configuration.

Après l'étape de construction Exécuter le shell que vous avez déjà ajoutée à partir de Utilisation d'axe DevTools Linter avec Jenkins, choisissez Exécuter le scanner SonarQube dans la liste déroulante Ajouter une étape de construction .

Créer un fichier de configuration SonarQube

Vous devez créer un fichier de configuration pour SonarScanner de SonarQube. Voici un exemple de fichier de configuration, sonar-project.properties.

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

Le sonar.projectKey est le nom du projet dans SonarQube pour lequel vous souhaitez que Jenkins et SonarScanner signalent les résultats. Lorsque Jenkins exécute l'étape de construction du scanner SonarQube, il utilisera cette clé de projet.

Ajoutez le nom de ce fichier de configuration à la zone de texte Chemin vers les propriétés du projet dans l'étape de construction Exécuter SonarQube Scanner que vous venez de créer. Si vous avez placé le sonar-project.properties à la racine de votre projet, il vous suffit d'ajouter sonar-project.properties (sans chemin) à cette zone de texte.

Générer un jeton de sécurité SonarQube

Le scanner SonarQube doit pouvoir se connecter à SonarQube afin de signaler les résultats. Vous pouvez le faire en créant un jeton de connexion dans l’interface Web d’administration de SonarQube.

Pour créer un jeton de connexion, cliquez en haut au centre de l'écran sur Administration dans l'interface Web d'administration de SonarQube. Cliquez en haut de l'écran sur le menu déroulant Sécurité et choisissez Utilisateurs. Choisissez un utilisateur que Jenkins peut utiliser pour signaler les résultats à SonarQube et cliquez sur l'icône sous Jetons pour créer un jeton de sécurité pour cet utilisateur. Sous Générer un jeton dans le popup, saisissez le nom du jeton et cliquez sur Générer. Enregistrez la valeur de ce jeton (une chaîne hexadécimale de 32 bits) car il n'y a aucun moyen de la réafficher après avoir fermé la fenêtre Jeton . (Vous pouvez cependant générer un nouveau jeton à tout moment.)

Ajouter le jeton de connexion à Jenkins

Maintenant, dans l'interface Web Jenkins, choisissez le build que vous souhaitez configurer pour SonarQube. Sur le côté gauche de l'écran, cliquez sur Configurer et cliquez sur Construire vers le haut de l'écran. Faites défiler jusqu'à Exécuter le scanner SonarQube et saisissez les éléments suivants pour votre jeton de sécurité dans la zone de texte Propriétés d'analyse  :

sonar.login=YOUR SECURITY TOKEN

Enregistrez ou Appliquez pour enregistrer votre jeton de connexion. Jenkins peut désormais signaler les résultats du scanner pour ce projet à SonarQube.

Choisissez Construire maintenant dans Jenkins pour tester la construction avec SonarQube.

Tous les problèmes détectés par axe DevTools Linter seront affichés en cliquant sur Incidents dans l'interface Web SonarQube de votre projet. Les problèmes d'axe DevTools Linter sont identifiés par AXE-LINTER-MD pour les fichiers markdown et AXE-LINTER-HTML pour les fichiers HTML.

Le rapport

axe DevTools Linter Connector génère un rapport JSON qui suit le format de rapport générique SonarQube. Pour plus d'informations sur le format du rapport, voir Format de rapport générique SonarQube

Vous pouvez modifier certaines des options du rapport en utilisant les options de ligne de commande de axe DevTools Linter Connector. Voir Options de ligne de commande facultatives pour plus d'informations.

Is this page helpful?

Help us improve this page

Try axe DevTools® Linter

Free Trial

Still need help?