Usando Axe DevTools Linter com Jenkins

Você pode enviar seu código para o Axe DevTools Linter para ser verificado quanto a problemas de acessibilidade como parte de um build do Jenkins. Este guia mostra como configurar uma etapa de build no Jenkins para invocar Conector Axe DevTools Linter e relatar ao Jenkins qualquer erro de acessibilidade encontrado.

Requisitos

Para adicionar o Axe DevTools Linter às construções do Jenkins, você precisa ter o seguinte software instalado:

• Jenkins. Veja Instalando o Jenkins para instruções sobre como configurar o Jenkins.
• Axe DevTools Linter e Connector. Consulte Configurando o Servidor Local ou Instalando com Docker, e Usando o Conector Axe DevTools Linter para instruções de configuração.
• O script de build axe-linter-jenkins-sonarqube.sh. As instruções para instalar este script estão na próxima seção.

Instalando o Script de Construção do Jenkins

Você deve ter um arquivo tar compactado contendo o script de build de exemplo do Jenkins. O arquivo tar deve se chamar axeScripts.tar.gz. Você pode extrair o script digitando o seguinte:

tar xvfz axeScripts.tar.gz

Deve haver um arquivo extraído do arquivo compactado, axe-linter-jenkins-sonarqube.sh. Edite o script para refletir a URL e a porta corretas da sua instância do Axe DevTools Linter (seja SaaS ou local). Existem duas variáveis de ambiente no script nas linhas 12 e 13 que você pode precisar alterar, como mostrado abaixo:

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

Agora, crie um diretório em /opt com a conta de administrador usando o seguinte comando:

sudo mkdir /opt/axeScripts

Copie o script para /opt/axeScripts:

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

Defina a permissão de execução do script:

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

Adicionando uma Etapa de Construção

Para este exemplo, você usará um projeto existente e simplesmente adicionará uma nova etapa de construção.

Escolha o trabalho que você gostaria de modificar e escolha Configurar no painel à esquerda. Em seguida, selecione a aba Construção para rolar até a seção de Build, onde você escolherá o menu suspenso Adicionar etapa de construção e selecionará Executar shell.

Na nova etapa de build Executar shell, insira o seguinte na caixa de texto Comando:

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

Selecione o botão Avançado... nesta etapa de build para definir o código de saída que indicará um erro para o Jenkins. Insira 1 na caixa de texto Código de saída para definir construção instável. O script retorna 1 se houver erros de acessibilidade.

Escolha Salvar ou Aplicar para aceitar suas alterações.

O Script de Construção

O script axe-linter-jenkins-sonarqube.sh executa o Axe DevTools Linter Connector sobre os arquivos no diretório raiz do build do Jenkins e gera um relatório, axe-linter-report.json. O script então procura no relatório por quaisquer erros e relata o erro retornando 1, o que faz com que o build seja marcado como instável no Jenkins.

O código-fonte do script de construção é mostrado abaixo:

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

O resultado deste script é um simples passar/falhar dependendo se há algum erro de acessibilidade encontrado pelo Axe DevTools Linter. Nenhuma outra informação é enviada ao Jenkins. O relatório gerado, axe-linter-report.json, entretanto, contém informações mais específicas sobre os erros de acessibilidade: nome do arquivo, número da linha e informações sobre o erro de acessibilidade. Uma maneira de capturar essas informações é importar o relatório para o SonarQube. Para mais informações, veja Usando Axe DevTools Linter com SonarQube