WebDriverJS向け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でページをテストするためには、まずそれをプロジェクトにインポートして初期化する必要があります。このステップがまだ完了していない場合は、このガイドを参照してください。

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

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