WebdriverIO用Axe DevTools for Webのテスト作成

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

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の担当者に連絡するか、私たちのサポートデスクを介してご連絡いただくか、メールでお問い合わせしてください。喜んでお手伝いします。