WebDriverJSのインポートと初期化

ウェブ用Axe DevToolsをインストールしたら、テスト環境にインポートし、パッケージを初期化する必要があります。

前提条件

ウェブ用Axe DevToolsをインポートし初期化するためには、まずインストールする必要があります。まだの場合は、バンドルから、アーティファクト・リポジトリから、またはDequeのAgoraからでインストールガイドを参照してください。また、お好みのSelenium WebDriverをダウンロードし、設定する必要もあります。

インポートと初期化

Axe DevTools for WebとWebDriverJSの両方をインポートします。構文はプロジェクトが使用する言語とモジュールシステムによって異なります。あなたのプロジェクトに合ったものを選んでください。

CommonJSモジュールでのJavaScript

これは、"type": "module"がpackage.jsonにないNode.jsプロジェクトのデフォルトです。

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const webdriver = require('selenium-webdriver');

ESモジュールでのJavaScript

"type": "module"がpackage.jsonにあるプロジェクトや.mjsファイルでこの構文を使用します。

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import webdriver from 'selenium-webdriver';

TypeScript

TypeScriptはESモジュールと同じimport構文を使用します。@axe-devtools/webdriverjsは独自の型宣言を提供するため、別途@types/パッケージをインストールする必要はありません。スキャン結果はAxeResultsとして型付けされており、これはaxe-coreがエクスポートしています。

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

ドライバーの初期化

Axe DevTools for Webをインポートしたら、ドライバを初期化できます。各スキャンにはウェブ用Axe DevToolsの独自のインスタンスが必要なので、テストを書く際にそれを初期化します。

JavaScriptの場合:

const driver = new webdriver.Builder().forBrowser('chrome').build();

TypeScriptでは、上記でインポートしたBuilderとWebDriverタイプを使用します:

const driver: WebDriver = new Builder().forBrowser('chrome').build();

次のステップ

ウェブ用Axe DevToolsをインストール、インポート、初期化したら、アクセシビリティのスキャンやアクセシビリティテストの記述を進める準備が整います。そのためには、テストを書くのガイドを参照してください。

トラブルシューティング

ウェブ用Axe DevToolsのインポートや初期化に関して問題が発生した場合は、直接Dequeの担当者に連絡するか、サポートデスク、またはメールを送るでご連絡ください。喜んでお手伝いします。