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を使ったテスト作成

以下のセクションにある個々のスニペットはJavaScriptであり、TypeScriptで変更なくコンパイルされます。完全なサンプルファイルセクションでは、両方の言語での完全なテストを示します。

前提条件

Axe DevToolsでページをテストするためには、まずプロジェクトにインポートして初期化する必要があります。もしまだこのステップを完了していない場合は、それを行う方法についてこのガイドをご覧ください。

スキャンコンテキストの取得

ページをアクセシビリティのためにスキャンする前に、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の担当者に連絡するか、私たちのサポートデスクを介してご連絡いただくか、メールでお問い合わせしてください。喜んでお手伝いします。