Uso de axe DevTools Linter con SonarQube
Puede integrar axe DevTools Linter con SonarQube y monitorear su código para detectar problemas de accesibilidad.
Requisitos
Necesitará configurar varios software para usar axe DevTools Linter con SonarQube, como se detalla a continuación:
- Jenkins. Consulte Uso de axe DevTools Linter con Jenkins para obtener más información. Debe configurar Jenkins para generar un informe utilizando axe DevTools Linter Connector como parte del proceso de compilación y luego enviar el informe a SonarQube para su análisis.
- axe DevTools Linter y conector. Consulte Configuración del servidor local y Uso del conector axe DevTools Linter para obtener instrucciones de configuración.
- SonarQube. Consulte Probar SonarQube para obtener más información. Para obtener instrucciones de instalación detalladas, consulte Instalar el servidor.
- El complemento SonarQube para Jenkins, SonarScanner para Jenkins.
Configurando reglas en SonarQube
El primer paso para configurar SonarQube es deshabilitar las reglas redundantes (reglas que se superponen a las reglas verificadas por axe DevTools Linter). Puede desactivar las reglas superpuestas en la interfaz de administración de SonarQube.
Creando un nuevo perfil de calidad en SonarQube
Para cambiar las reglas, haga clic en Perfiles de calidad en la parte superior del sitio web de administración de SonarQube. Luego, en el menú desplegable Filtrar perfiles por: , seleccione HTML. Ahora debería ver el perfil HTML de SonarQube integrado. Debes duplicar ese perfil haciendo clic en el menú desplegable de configuración en el lado derecho del perfil y eligiendo Copiar. SonarQube le pedirá que nombre el nuevo perfil copiado. Llama al nuevo perfil axe-linter y haga clic en el botón Copiar .
Ahora deberías tener un nuevo perfil de calidad HTML llamado axe-linter. Seleccione el menú desplegable para el perfil axe-linter y elija Establecer como predeterminado para que el perfil axe-linter se use para verificar todos los archivos HTML.
Eliminar reglas redundantes
El siguiente paso es eliminar las reglas redundantes en el perfil de calidad de axe-linter que acaba de crear. En la lista de reglas HTML, debe haber dos perfiles. El perfil de axe-linter y el perfil de Sonar way . Haga clic en el perfil axe-linter para ir a la página de configuración del perfil. En la parte izquierda de la pantalla, debería ver una lista de diferentes tipos de reglas en el perfil. Haga clic en el número en la parte superior derecha de Total y en la columna Activo para editar las reglas activas en el perfil axe-linter .
En el lado derecho de la pantalla hay una lista de reglas que están habilitadas en el perfil HTML axe-linter . Desactive las siguientes reglas:
-El elemento **"<html>" debe tener un atributo de idioma **. Este problema ya ha sido detectado por axe DevTools Linter.
- La imagen, el área y el botón con etiquetas de imagen deben tener un atributo "alt". Ya detectado por axe DevTools Linter.
-La etiqueta "<object>" debe proporcionar un contenido alternativo. Esta comprobación ya la realiza axe DevTools Linter. -Las etiquetas "<th>" deben tener atributos "id" o "scope". Taxe DevTools Linter no verifica el id ni el alcance porque no siempre son necesarios, pero sí verifica el uso correcto si se usan esos atributos.
Agregar un paso de compilación de SonarQube a Jenkins
Hay dos pasos de compilación que debes agregar a Jenkins para importar errores de accesibilidad de Axe DevTools Linter a SonarQube. El primer paso de compilación ocurre cuando Jenkins inicia axe DevTools Linter Connector y genera un informe que contiene los errores de accesibilidad detectados por axe DevTools Linter. La adición de este paso de compilación se explica en Uso de axe DevTools Linter con Jenkins. Una vez que el primer paso crea el informe, Jenkins invoca el escáner SonarQube para importar el informe a SonarQube.
Los siguientes pasos muestran cómo configurar Jenkins para invocar el escáner SonarQube e importar el informe de accesibilidad creado por axe DevTools Linter Connector y axe DevTools Linter.
Instalar el Plugin SonarQube en Jenkins
Ahora necesitas instalar el Plugin SonarQube Scanner en Jenkins. En el Panel de control de Jenkins, haz clic en Administrar Jenkins en el lado izquierdo de la pantalla. Luego, seleccione Administrar complementos. Luego, seleccione la pestaña Disponible en la parte superior de la pantalla y escriba sonarqube en el cuadro de texto del filtro. Seleccione **Instalar ** para el Escáner SonarQube para Jenkins.
Agregar un paso de compilación del escáner SonarQube
Para el proyecto que desea verificar, seleccione el proyecto desde el Panel de control. En el lado izquierdo de la interfaz web de Jenkins, seleccione Configurar. Ahora haga clic en la pestaña Build para desplazarse a la sección Build de la configuración.
Después del paso de compilación Ejecutar shell que ya agregó desde Uso de axe DevTools Linter con Jenkins, seleccione Ejecutar escáner SonarQube en el menú desplegable Agregar paso de compilación .
Crear un archivo de configuración de SonarQube
Necesita crear un archivo de configuración para SonarScanner de SonarQube. A continuación se muestra un archivo de configuración de ejemplo, sonar-project.properties.
sonar.projectKey=Test-Deque
sonar.externalIssuesReportPaths=axe-linter-report.json** sonar.projectKey** es el nombre del proyecto en SonarQube donde desea que Jenkins y SonarScanner informen los resultados. Cuando Jenkins ejecuta el paso de compilación del escáner SonarQube, utilizará esta clave de proyecto.
Agregue el nombre de este archivo de configuración al cuadro de texto Ruta a las propiedades del proyecto en el paso de compilación Ejecutar SonarQube Scanner que acaba de crear. Si colocaste sonar-project.properties en la raíz de tu proyecto, solo necesitas agregar sonar-project.properties (sin ruta) a este cuadro de texto.
Generar un token de seguridad de SonarQube
El escáner SonarQube debe poder conectarse a SonarQube para poder informar los resultados. Puede hacerlo creando un token de inicio de sesión en la interfaz web de administración de SonarQube.
Para crear un token de inicio de sesión, haga clic en Administración en la parte superior central de la pantalla en la interfaz web de administración de SonarQube. Luego haga clic en el menú desplegable Seguridad cerca de la parte superior de la pantalla y seleccione Usuarios. Elija un usuario que Jenkins pueda usar para informar resultados a SonarQube y haga clic en el ícono debajo de Tokens para crear un token de seguridad para ese usuario. En Generar token , en la ventana emergente, escriba el nombre del token y haga clic en Generar. Guarde el valor de este token (una cadena hexadecimal de 32 bits) porque no hay forma de volver a mostrarlo después de cerrar la ventana Token . (Sin embargo, puedes generar un nuevo token en cualquier momento).
Añadir el token de inicio de sesión a Jenkins
Ahora, en la interfaz web de Jenkins, elija la compilación que desea configurar para SonarQube. En el lado izquierdo de la pantalla, haga clic en Configurar y haga clic en Build hacia la parte superior de la pantalla. Desplácese hacia abajo hasta el paso de compilación Ejecutar escáner SonarQube e ingrese lo siguiente para su token de seguridad en el cuadro de texto Propiedades de análisis :
sonar.login=YOUR SECURITY TOKENGuardar o Aplicar para guardar su token de inicio de sesión. Ahora Jenkins puede informar los resultados del escáner para este proyecto a SonarQube.
Seleccione Build Now en Jenkins para probar la compilación con SonarQube.
Cualquier problema encontrado por axe DevTools Linter se mostrará al hacer clic en Problemas en la interfaz web de SonarQube para su proyecto. Los problemas de axe DevTools Linter se identifican mediante AXE-LINTER-MD para archivos markdown y AXE-LINTER-HTML para archivos html.
El informe
El conector Linter de axe DevTools genera un informe JSON que sigue el formato de informe genérico de SonarQube. Para obtener más información sobre el formato del informe, consulte Formato de informe genérico de SonarQube
Puede cambiar algunas de las opciones del informe utilizando las opciones de línea de comandos de axe DevTools Linter Connector. Consulte Opciones de línea de comandos opcionales para obtener más información.