カルマ

Axe DevToolsを用いたKarmaテスト

Karmaとのこの統合は、選択したUIフレームワークに依存せずに動作します。この統合は、React、Angular、Vueなどのテストにも機能します。

前提条件

KarmaとAxe DevToolsを使用してコンテンツをテストするには、まず以下のパッケージをプロジェクトにインストールしておく必要があります：

• @axe-devtools/karma-json-reporter
• @axe-devtools/browser
• @axe-devtools/cli

Karma設定のセットアップ

最初に、@axe-devtools/karma-json-reporterをプラグインとして含めるために、karma.config（またはkarma.conf）ファイルを設定する必要があります。

plugins: [
  require('@axe-devtools/karma-json-reporter')
]

次に、reportersプロパティにaxeDevToolsを追加します。また、dir（axeDevToolsReporter）を持つ宛先ディレクトリをオプションで追加できます。デフォルトでは、レポートはプロジェクトのルートレベルにあるaxeDevToolsReportsディレクトリに作成されます。

reporters: ['axeDevTools'],
axeDevToolsReporter: {
  dir: 'axe-results'
},

構成後、@axe-devtools/karma-json-reporterはaxeDevToolsReporterと呼ばれるグローバルレポーターオブジェクトをテストに追加します。

テストケースのセットアップ

各コンポーネントまたはページコンポーネントのテストスペック内でaxeを実行するには、次のインポートを追加します：

import * as AxeDevTools from "@axe-devtools/browser";

次に、テストのセットアップ関数内（例：before()やbeforeEach()）で、特定のルールセットを与えるために次のinit()関数を追加します。デフォルトでは、wcag2.1ルールセットが使用されます。

before(() => {
  AxeDevTools.init("wcag2.1");
});

以下に示すようなテストを作成する必要があります。ここでは、アクセシビリティの問題を検出するためにコンポーネントまたはページコンポーネントをスキャンします。ただし、AxeDevTools.run()を正しく呼び出すには、非ネイティブコンポーネントを正しくスキャンできるようにネイティブ要素にコンパイルする必要があります。

it("should have no accessibility violations", async () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  
  const results = await AxeDevTools.run(compiled);
  expect(results.violations).toHaveLength(0);
});

KarmaとAxe DevToolsを使ったレポート作成

テスト内でのレポート設定

AxeDevTools.run()が呼び出されるたびに、axeDevToolsReporter.logTestResult()への呼び出しを追加し、axe実行の結果を渡します。logTestResult関数は、オプションでテストの名前として使用されるidを最初のパラメータとして受け取ることができます。

it("should have no accessibility violations", async () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  
  const results = await AxeDevTools.run(compiled);
  axeDevToolsReporter.logTestResult(results);
  expect(results.violations).toHaveLength(0);
});

テストが実行されると、@axe-devtools/karma-json-reporterはログされた各Axe DevToolsスキャンのJSONファイル（axeDevToolsResultsと呼ばれる）を作成します。

Axe DevTools CLIの実行

テストが完了し、レポートが生成された後、@axe-devtools/cliを使用してAxe DevToolsレポートを生成できます。

"test": "karma start && axe reporter ./axe-results --format=html",

トラブルシューティング

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

一般的なAxe DevToolsについての詳細は、Axe DevToolsの概要ページをご覧ください。

関連情報

• JSONアクセシビリティ結果をaxe Reportsにアップロードするは、結果をAxe Reportsにアップロードする方法について説明します。
• axe Reports APIキーの取得は、Axe Reportsを使用開始するためのAPIキーの取得方法を説明します。
• レポートの作成とフィルタリングは、JSONのアクセシビリティ結果からCSV、XML、またはHTMLでアクセシビリティレポートを作成する方法を示しています。また、このツールを使用して、深刻度で出力をフィルターすることもできます。
• ディスク上のJSON結果の保存方法は、JSONアクセシビリティ結果のファイル命名規則について説明します。
• CLIを使用してアクセシビリティ結果をaxe Developer Hubに送信するは、.jsonの結果ファイルをaxe Developer Hubにアップロードする方法を示しています。