Node.jsインテグレーションの選択

Axe DevTools for Webは、いくつかのNode.jsおよびJavaScriptパッケージを提供しています。これらはすべて同じアクセシビリティルールを実行し、同じ種類の結果を生成します。違いは、スキャンが何に対して行われるかであり、それは作成するテストの種類から導き出されます。

• テスト内でマークアップをレンダリングし、それをスキャンしたい場合、コンポーネントまたはユニットテストのように。@axe-devtools/browserを使用します。
• テストがブラウザでページを開き、そのページをスキャンしたい場合、エンドツーエンドテストのように。すでにブラウザを駆動しているツールのパッケージを使用します。

必要なパッケージが既にわかっている場合は、インストールオプションへ進んでください。

テストがレンダリングするマークアップのスキャン

@axe-devtools/browserパッケージは、テストが行うページに読み込まれるJavaScriptライブラリです。一度初期化した後、DOM要素をAxeDevTools.run()に渡してスキャンを行います。ブラウザセッションではなく要素を受け取るため、Jasmine、Karma、またはJestの下で実行されるテストライブラリなど、自身でマークアップをレンダリングするテストランナーに適しています。

名前が示すように、@axe-devtools/browserはインタラクティブツールやブラウザ拡張ではありません。他のパッケージと同様に自動化されたテスト内で実行されます。

Karma

Karmaは別のインテグレーションではありません。@axe-devtools/browserを用いてテストを書き、@axe-devtools/karma-json-reporterをKarmaプラグインとして追加します。レポーターはログした各スキャンごとにJSONファイルを書き、@axe-devtools/cliはテスト実行後にそれらのファイルをレポートに変換します。

テストがナビゲートするページのスキャン

テストスイートがブラウザでページを開く場合、すでにそのブラウザを駆動しているツールに対応するパッケージを選びます。どのパッケージも、すでに行っているセッションにアクセシビリティスキャンを追加するので、ブラウザを起動したりページに到達するテストの方法を変える必要はありません。

Cypressは他のものとは異なるセットアップです。ドライバー周りにAxe DevToolsオブジェクトを作成する代わりに、cypress.config.jsでプラグインを登録し、サポートファイルにパッケージをインポートして、Axe DevToolsコマンドをcyに追加します。

Cucumber

Cucumberもまた別のインテグレーションではありません。まずWebDriverJS、WebdriverIO、またはPuppeteerをセットアップし、それを呼び出すリユーザブルGherkinステップを定義します。

レポート、ログ、Axe Developer Hub

これらのパッケージは、上記のどのインテグレーションとも併用でき、置き換えるわけではありません。

• Node Reporter（@axe-devtools/reporter）は、保存された結果からレポートを生成します。
• Node Logger（@axe-devtools/logger）は、テスト実行中にアクセシビリティ結果をログします。
• Axe Developer Hubへの結果のアップロードは、Axe Developer Hubへ結果を送信する方法を説明します。

まだわからない場合

これらのどれもテストの動作に一致しない場合は、Dequeの担当者に連絡するか、サポートデスクからお問い合わせください。