WebdriverIO用Axe DevTools for Webのテスト作成
Axe DevTools for Webを使用した効果的なアクセシビリティテストの書き方
Axe DevToolsを使ったテスト作成
以下のセクションにある個々のスニペットはJavaScriptであり、TypeScriptで変更なくコンパイルされます。完全なサンプルファイルセクションでは、両方の言語での完全なテストを示します。
前提条件
Axe DevTools for Webをインポートして初期化するためには、まずインストールする必要があります。まだインストールしていない場合は、バンドルから、アーティファクトリポジトリから、またはDequeのAgoraからについてのインストールガイドをお読みください。また、WebdriverIOもダウンロードして設定しておく必要があります。
インポートと初期化
Axe DevTools for WebとWebdriverIOの両方をインポートします。シンタックスはプロジェクトで使用している言語とモジュールシステムに依存します。プロジェクトに合ったものを選んでください:
JavaScriptとCommonJSモジュール
これは、"type": "module"がpackage.jsonにないNode.jsプロジェクトのデフォルトです。
const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');
const webdriverio = require('webdriverio');JavaScriptとESモジュール
プロジェクトに"type": "module"がpackage.jsonにある場合、または.mjsファイルでこのシンタックスを使用します。
import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import { remote } from 'webdriverio';TypeScript
TypeScriptでは、ESモジュールと同じimportシンタックスを使用します。@axe-devtools/webdriverioには独自の型宣言が含まれているため、別途@types/パッケージをインストールする必要はありません。スキャン結果はAxeResultsとして型付けされ、axe-coreからエクスポートされます:
import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import { remote } from 'webdriverio';
import type { AxeResults } from 'axe-core';クライアントの初期化
この時点で、テスト関数内でwebdriverを初期化できるようになります。JavaScriptでは:
const client = await webdriverio.remote({
capabilities: {
browserName: 'chrome'
}
});TypeScriptでは、クライアントはWebdriverIO.Browserです。これは、AxeDevToolsWebdriverIOが期待する型です:
const client: WebdriverIO.Browser = await remote({
capabilities: {
browserName: 'chrome'
}
});その後、webdriverクライアントを使用してAxe DevTools for Webを初期化できます。この記述は両言語で同じです:
const axeDevTools = new AxeDevToolsWebdriverIO({ client });スキャンコンテキストの取得
ページをアクセシビリティのためにスキャンする前に、WebdriverIOでそのページにアクセスする必要があります。
await client.url('<URL>');WebdriverIOがページにアクセスすると、Axe DevToolsでスキャンを行い、結果を保存することができます。スキャン結果を表示する最も簡単な方法は、結果オブジェクトをコンソールにログ出力することです。
const results = await axeDevTools.analyze();
console.log(results);完全なサンプルファイル
同じテストがJavaScriptとTypeScriptで以下に示されています。Axe DevTools APIは両方とも同一で、TypeScriptバージョンはimport構文を使用し、クライアントとスキャン結果に注釈を付けます。
JavaScript
const webdriverio = require('webdriverio');
const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');
const simpleExample = async () => {
const client = await webdriverio.remote({
capabilities: {
browserName: 'chrome'
}
});
await client.url('https://google.com');
const axeDevTools = new AxeDevToolsWebdriverIO({ client });
const results = await axeDevTools.analyze();
await client.deleteSession();
return results;
};
simpleExample()
.then(results => {
console.log(results);
})
.catch(err => {
throw err;
});TypeScript
import { remote } from 'webdriverio';
import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import type { AxeResults } from 'axe-core';
const simpleExample = async (): Promise<AxeResults> => {
const client: WebdriverIO.Browser = await remote({
capabilities: {
browserName: 'chrome'
}
});
await client.url('https://google.com');
const axeDevTools = new AxeDevToolsWebdriverIO({ client });
const results: AxeResults = await axeDevTools.analyze();
await client.deleteSession();
return results;
};
simpleExample()
.then(results => {
console.log(results);
})
.catch(err => {
throw err;
});次のステップ
アクセシビリティスキャンを無事に完了したので、次のステップとしてレポートの生成や結果オブジェクトの使用のような、より高度なスキャンのトピックに進む準備ができました。
トラブルシューティング
スキャン結果の取得に問題がある場合は、直接Dequeの担当者に連絡するか、私たちのサポートデスクを介してご連絡いただくか、メールでお問い合わせしてください。喜んでお手伝いします。