Playwrightのためのインポートと初期化

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

前提条件

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

インポートと初期化

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

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

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

const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');

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

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

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';

TypeScript

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

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';
import type { AxeResults } from 'axe-core';

Playwrightの初期化

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

初期化コードはJavaScriptとTypeScriptで同じですが、TypeScriptではPlaywrightが返す型を推論したり注釈を付けたりできます。JavaScriptでは次のとおりです:

// This will open up a headless instance of chromium
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

TypeScriptでは、型を書き出した状態:

import type { Browser, BrowserContext, Page } from 'playwright';

// This will open up a headless instance of chromium
const browser: Browser = await playwright.chromium.launch();
const context: BrowserContext = await browser.newContext();
const page: Page = await context.newPage();

次のステップ

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

トラブルシューティング

Axe DevTools for Webのインポートや初期化について問題がある場合は、直接Dequeの担当者に連絡するか、サポートデスクから、またはメールを送るでお問い合わせください。お手伝いできることを嬉しく思います。