Axe DevTools JSON結果からのレポート生成

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

レポート生成に@axe-devtools/reporterパッケージを使用する

Not for use with personal data

Axe DevToolsレポーターを使用して、Playwrightと共にスキャンしたページのアクセシビリティレポートを作成します

レポートの生成は、スキャンの実行と同じくらい簡単です。Axe DevToolsレポーターを使用することで、即座に閲覧可能なHTMLレポート、CIテスト環境で閲覧するためのJUnit XMLレポート、他の複数のツールにインポートするためのCSVレポートを生成できます。このガイドでは、Axe DevToolsレポーターのインストール、設定、使用方法について説明します。

前提条件

Axe DevToolsレポーターを使用するには、Axe DevToolsとレポーターを統合するための既存のNodeJSプロジェクトが必要です。このガイドのこの部分ではレポーターの設定のみをカバーするため、まだAxe DevToolsでスキャンを実行していない場合は、Axe DevToolsでのスキャン実行方法についてこのガイドをお読みください。

レポーターのインストール

既にAxe DevTools npmパッケージをダウンロードするように~/.npmrcファイルを設定している場合、コマンドを実行するだけです:

npm install @axe-devtools/reporter

まだインストール認証を設定していない場合は、基本的なインストールガイドをお読みください。

プロジェクトへのレポーターの追加

モジュールの外では、Axe DevToolsはインポートされ、次のようなステートメントでインスタンスが作成されます:

const { Reporter } = require('@axe-devtools/reporter');

モジュール内では、構文が少し異なります。文は次のようになります:

import { Reporter } from '@axe-devtools/reporter';

レポーターを使用するには、Axe DevToolsライブラリとwebdriverもインポートする必要があります。

レポーターオプション

Axe DevToolsレポーターを使用する際には、3つの主要な選択肢があります

  1. レポートの名前をどうするか
  2. レポートをどこに保存するか
  3. レポートをどの形式で生成するか

レポートの名前は自由に設定できます。レポーターを初期化する際には、すべての生成されたレポートで共有されるスイート名を指定します。各レポートには、スキャンごとに割り当てられる名前も含まれます。レポートを保存する場所、つまりディレクトリは、ユーザーの裁量で決めることができます。このディレクトリ位置もインスタンスレベルで設定されるため、1つのレポーターインスタンスで生成されたすべてのレポートはディレクトリを共有します。オプションのレポート形式には、即座にユーザーが閲覧できるHTML、CI環境での使用推奨のJUnit XML、スキャン結果を他のツールにインポートするCSV、マシンが読み取り可能なアクセシビリティレポートを出力するW3C EARL JSON-LDドキュメントであるEARL（Evaluation and Report Language）があります。

レポーターの使用

レポーターをプロジェクトにインポートしたら、初期化できます。コンストラクターは、レポートのスイート名とレポートの保存先ディレクトリの2つの引数を取ります。初期化文は次のようになります:

reporter = new Reporter('<suite-name>', '<dir-name>');

Axe DevToolsのスキャンが実行された後、レポーターを実行するには2つのステップがあります。まず、レポーターがアクセスできるように結果をログに記録する必要があります。その後、レポーターがこれらの結果をレポートに処理します。

reporter.logTestResult('<scan-name>', <results-object>);
reporter.buildHTML('<scan-dir>');

サンプルファイル

このサンプルファイルはテストを書くの例と同じベースを使用していますが、レポーターも統合しています。

const rimraf = require('rimraf');
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');
const { Reporter } = require('@axe-devtools/reporter');

(async () => {
  rimraf.sync('./a11y_results/*');

  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const reporter = new Reporter('playwright', './a11y_results');

  await page.goto('https://dequeuniversity.com/demo/mars/');

  const results = await new AxeDevToolsBuilder({ page }).analyze();

  reporter.logTestResult('tested-page', results);
  reporter.buildHTML('./a11y_results');
  await browser.close();
})();

トラブルシューティング

スキャン結果の取得に問題がある場合は、お持ちのDeque代表者に直接連絡するか、サポートデスクやメールをお送りくださいを通じてご連絡ください。喜んでお手伝いします。

関連リンク

Is this page helpful?

Help us improve this page

Still need help?