WebdriverIO用Axe DevTools for Webのテスト作成
Axe DevTools for Webを使用した効果的なアクセシビリティテストの書き方
Not for use with personal data
Axe DevToolsを使ったテスト作成
前提条件
Axe DevToolsでページをテストするためには、まずプロジェクトにインポートして初期化する必要があります。もしまだこのステップを完了していない場合は、それを行う方法についてこのガイドをご覧ください。
スキャンコンテキストの取得
ページをアクセシビリティのためにスキャンする前に、WebdriverIOでそのページにアクセスする必要があります。
await client.url('<URL>');WebdriverIOがページにアクセスすると、Axe DevToolsでスキャンを行い、結果を保存することができます。スキャン結果を表示する最も簡単な方法は、結果オブジェクトをコンソールにログ出力することです。
const results = await axeDevTools.analyze();
console.log(results);完全なサンプルファイル
const webdriverio = require('webdriverio');
const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');
const simpleExample = async () => {
const client = webdriverio.remote({
desiredCapabilities: {
browserName: 'chrome'
}
});
await client.init();
await client.url('https://google.com');
const axeDevTools = new AxeDevToolsWebdriverIO({ client });
const results = await axeDevTools.analyze();
await client.end();
return results;
};
simpleExample()
.then(results => {
console.log(results);
})
.catch(err => {
throw err;
});次のステップ
アクセシビリティスキャンを無事に完了したので、次のステップとしてレポートの生成や結果オブジェクトの使用のような、より高度なスキャンのトピックに進む準備ができました。
トラブルシューティング
スキャン結果の取得に問題がある場合は、直接Dequeの担当者に連絡するか、私たちのサポートデスクを介してご連絡いただくか、メールでお問い合わせしてください。喜んでお手伝いします。
