WebdriverIOのインポートと初期化

Axe DevTools for Webをインストールしたら、テスト設定にインポートし、パッケージを初期化する必要があります。

前提条件

Axe DevTools for Webをインポートして初期化するためには、まずインストールが必要です。まだインストールしていない場合は、バンドルから、アーティファクトリポジトリから、またはDequeのAgoraからのガイドを読みましょう。また、WebdriverIOをダウンロードして設定を完了しておく必要があります。

インポートと初期化

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

CommonJS モジュールを使用した JavaScript

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

const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');
const webdriverio = require('webdriverio');

ES モジュールを使用した JavaScript

package.jsonに"type": "module"が含まれているプロジェクト、または.mjsファイルでこの構文を使用します。

import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import { remote } from 'webdriverio';

TypeScript

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

import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import { remote } from 'webdriverio';
import type { AxeResults } from 'axe-core';

クライアントの初期化

この段階で、テスト関数内で webdriver を初期化できるようになります。JavaScript では次のようになります。

const client = await webdriverio.remote({
  capabilities: {
    browserName: 'chrome'
  }
});

TypeScript では、クライアントは WebdriverIO.Browser で、これは AxeDevToolsWebdriverIO が想定する型です。

const client: WebdriverIO.Browser = await remote({
  capabilities: {
    browserName: 'chrome'
  }
});

その後、webdriver クライアントを使用して Axe DevTools for Web を初期化することができます。この文は両方の言語で同じです。

const axeDevTools = new AxeDevToolsWebdriverIO({ client });

次のステップ

Axe DevTools for Webとそのドライバーをインストール、インポート、初期化したら、アクセシビリティのスキャンやテストの作成に進む準備が整います。Axe DevTools for Webの各スキャンには新しいインスタンスが必要ですので、スキャンの設定と実行についてはテストを書くのガイドをご覧ください。

トラブルシューティング

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