WebDriverJS向けAxe DevTools for Webのテストの書き方
Axe DevTools for Webを使用してアクセシビリティのための効果的なテストを書く方法
Axe DevToolsを使用したテストの書き方
以下のセクションにある個々のスニペットはJavaScriptであり、TypeScriptでも変更なくコンパイルされます。完全なサンプルファイルセクションには、両言語での完全なテストが示されています。
前提条件
Axe DevTools for Webをインポートして初期化するためには、まずインストールする必要があります。まだの方は、それをバンドルから取得、アーティファクトリポジトリから取得、またはDequeのAgoraから取得の方法でインストールするガイドをお読みください。お好きなSelenium WebDriverをダウンロードして設定する必要もあります。
インポートと初期化
Axe DevTools for WebとWebDriverJSの両方をインポートします。構文は、プロジェクトで使用する言語とモジュールシステムに依存します。プロジェクトに合ったものを選んでください：
JavaScriptとCommonJSモジュール
これは、"type": "module"がpackage.jsonに含まれていないNode.jsプロジェクトのデフォルトです。
const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const webdriver = require('selenium-webdriver');JavaScriptとESモジュール
"type": "module"がpackage.jsonに含まれているプロジェクト、または.mjsファイルでこの構文を使用します。
import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import webdriver from 'selenium-webdriver';TypeScript
TypeScriptはESモジュールと同じimport構文を使用します。@axe-devtools/webdriverjsは独自の型宣言を提供するので、別途@types/パッケージをインストールする必要はありません。スキャン結果はAxeResultsとして型付けされ、axe-coreによってエクスポートされます。
import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';ドライバーの初期化
Axe DevTools for Webをインポートしたら、ドライバーを初期化することができます。各スキャンには独自のAxe DevTools for Webのインスタンスが必要なので、テストを書く際にそれを初期化します。
JavaScriptの場合：
const driver = new webdriver.Builder().forBrowser('chrome').build();TypeScriptでは、上記でインポートしたBuilderとWebDriverの型を使用します：
const driver: WebDriver = new Builder().forBrowser('chrome').build();スキャンコンテキストの取得
アクセシビリティのためにページをスキャンする前に、それをwebdriverでアクセスできるようにする必要があります。
await driver.get('<URL>');webdriverでページにアクセスしたら、Axe DevToolsを用いてスキャンを行い、結果を保存できます。スキャン結果を確認する最も簡単な方法は、resultオブジェクトをコンソールにログとして出力することです。
const results = await new AxeDevToolsBuilder(driver).analyze();
console.log(results);完全なサンプルファイル
同じテストが以下にJavaScriptとTypeScriptで示されています。Axe DevTools APIは両方で同一であり、TypeScriptバージョンではimport構文を使用し、ドライバーとスキャン結果を注釈します。
JavaScript
const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const WebDriver = require('selenium-webdriver');
var driver = new WebDriver.Builder().forBrowser('chrome').build();
driver.get('https://google.com').then(function() {
new AxeDevToolsBuilder(driver).analyze(function(err, results) {
if (err) {
// Handle error
}
console.log(results);
});
});TypeScript
import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';
(async () => {
const driver: WebDriver = new Builder().forBrowser('chrome').build();
try {
await driver.get('https://google.com');
const results: AxeResults = await new AxeDevToolsBuilder(driver).analyze();
console.log(results);
} finally {
await driver.quit();
}
})();次のステップ
アクセシビリティスキャンを無事に完了したので、次はレポートの生成や結果オブジェクトの使用のようなより高度なスキャニングのトピックに進む準備が整いました。
トラブルシューティング
スキャン結果の取得に問題がある場合は、直接Deque担当者に連絡するか、サポートデスク経由で私たちに連絡するか、メール送信してください。お手伝いいたします。