JavaScript用Puppeteerのインポートと初期化

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

前提条件

Axe DevTools for Webをインポートし初期化するためには、まずインストールが必要です。まだインストールしていない場合は、バンドルから、アーティファクトリポジトリから、またはDequeのAgoraからでのインストール方法のガイドをお読みください。また、Puppeteerもインストールする必要があります。

インポートと初期化

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

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

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

const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');
const puppeteer = require('puppeteer');

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

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

import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import puppeteer from 'puppeteer';

TypeScript

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

import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import puppeteer from 'puppeteer';
import type { AxeResults } from 'axe-core';

各スキャンごとに新しいAxeDevToolsPuppeteerオブジェクトが作成されます。これを行う方法は、テストを書くに関するガイドをご覧ください。

次のステップ

Axe DevTools for Webをインストールし、インポートし、初期化したら、アクセシビリティのスキャンとテストの作成に進む準備が整いました。それを行うには、テストを書くのガイドを参照してください。

トラブルシューティング

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