Axe DevTools LinterとJenkinsを使用する

Jenkinsビルドの一部として、コードをAxe DevTools Linterに送信してアクセシビリティの問題をチェックすることができます。このガイドでは、JenkinsでAxe DevTools Linter Connectorを呼び出し、発見されたアクセシビリティエラーをJenkinsに報告するためのビルドステップを設定する方法を示します。

要件

JenkinsビルドにAxe DevTools Linterを追加するには、以下のソフトウェアをインストールする必要があります。

• Jenkins。Jenkinsのセットアップ手順については、Jenkinsのインストールを参照してください。
• Axe DevTools LinterおよびConnector。セットアップ手順については、オンプレミスサーバーのセットアップまたはDockerでのインストール、およびAxe DevTools Linter Connectorの使用を参照してください。
• axe-linter-jenkins-sonarqube.shビルドスクリプト。このスクリプトのインストール手順は次のセクションにあります。

Jenkinsビルドスクリプトのインストール

Jenkinsビルドスクリプトのソースコードは、以下のビルドスクリプトセクションにあります。そのセクションからソースコードをコピーして、axe-linter-jenkins-sonarqube.shという名前のファイルを作成してください。

スクリプトを編集して、Axe DevTools Linterのインスタンスの正しいURLとポートを反映させてください（SaaSまたはオンプレミス）。スクリプトの12行目と13行目にある2つの環境変数を変更する必要があるかもしれません。以下にその例を示します:

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

次のコマンドを使用して、/optに管理者アカウントでディレクトリを作成します。

sudo mkdir /opt/axeScripts

スクリプトを/opt/axeScriptsにコピーします。

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

スクリプトの実行フラグを設定してください。

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

ビルドステップの追加

この例では、既存のプロジェクトを使用し、新しいビルドステップを追加するだけです。

変更したいジョブを選び、左パネルで構成を選びます。次にビルドタブを選び、ビルドセクションまでスクロールし、ビルドステップの追加ドロップダウンを選択してシェルを実行を選びます。

新しいシェルを実行ビルドステップで、コマンドテキストボックスに次を入力します。

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

このビルドステップで詳細設定...ボタンを選び、Jenkinsにエラーを示す終了コードを設定します。ビルドを不安定に設定するための終了コードテキストボックスに1を入力します。アクセシビリティエラーがある場合、スクリプトは1を返します。

変更を受け入れるには保存または適用を選びます。

ビルドスクリプト

axe-linter-jenkins-sonarqube.shスクリプトは、Jenkinsビルドのルートディレクトリ内のファイルに対してAxe DevTools Linter Connectorを実行し、レポートaxe-linter-report.jsonを生成します。その後、スクリプトはレポート内のエラーを検索し、1を返すことでエラーを報告し、Jenkinsでビルドが不安定とマークされる原因になります。

ビルドスクリプトのソースコードは以下に示されています：

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

このスクリプトの結果は、Axe DevTools Linterによってアクセシビリティのエラーが見つかったかどうかに応じて単純な合否になります。Jenkinsには他の情報は送信されません。しかし、生成されたレポートaxe-linter-report.jsonには、アクセシビリティエラーに関するより具体的な情報、例えばファイル名、行番号、エラー情報が含まれています。この情報をキャプチャする一つの方法は、レポートをSonarQubeにインポートすることです。詳細についてはSonarQubeとAxe DevTools Linterを使用するを参照してください。