Playwright用Axe DevToolsのテストを書く
Axe DevTools for Webを用いたPlaywrightでのアクセシビリティテストを効果的に書く方法
Axe DevToolsを使ったテストの作成
Axe DevToolsを使用したアクセシビリティスキャンの結果は、わずか1行のコードで生成できます。これらの結果は、そのまま利用することも、アサーションライブラリと併用することも、アクセシビリティレポートの作成に使用することもできます。
以下のセクションにある個別のスニペットはJavaScriptで記述されており、TypeScriptでも変更なくコンパイルされます。サンプルファイルを完全にダウンロードセクションでは、両言語での完全なテストが示されています。
前提条件
Axe DevTools for Webをインポートして初期化するには、まずインストールする必要があります。まだインストールしていない場合は、バンドル、あなたのアーティファクトリポジトリから、またはDequeのAgoraからからのインストール方法に関するガイドを読んでください。また、お好みのバージョンのPlaywrightをダウンロードして設定しておく必要があります。
インポートと初期化
Axe DevTools for WebとPlaywrightの両方をインポートします。構文は、プロジェクトで使用する言語とモジュールシステムによって異なります。プロジェクトに合ったものを選択してください：
CommonJSモジュールを使ったJavaScript
これは、"type": "module"がpackage.jsonに含まれていないNode.jsプロジェクトのデフォルトです。
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');ESモジュールを使ったJavaScript
"type": "module"がpackage.jsonに含まれているプロジェクト、または.mjsファイルでこの構文を使用します。
import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';TypeScript
TypeScriptはESモジュールと同じimport構文を使用します。@axe-devtools/playwrightは独自の型宣言を提供するため、別に@types/パッケージをインストールする必要はありません。スキャン結果はAxeResultsとして型付けされており、これをaxe-coreがエクスポートします：
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();スキャンコンテキストの取得
ページをアクセシビリティのためにスキャンする前に、Playwrightでアクセスする必要があります。
//Launch the Playwright Driver
const browser = await playwright.chromium.launch();
//Create a new browser context
const context = await browser.newContext();
//Create a new page in the browser
const page = await context.newPage();
//Send the browser to the desired page to scan
await page.goto('$URL');コンテンツセキュリティポリシーの回避
スキャンしようとしているページにコンテンツセキュリティポリシーが有効になっている場合、問題が発生することがあります。この問題に直面した場合、Axe DevToolsには回避策が含まれています。ページが作成された後に次のステートメントを含めるだけです：
await context = await browser.newContext({ bypassCSP: true })Playwrightがページにアクセスした後、Axe DevToolsでスキャンし、結果を保存することができます。スキャン結果を表示する最も簡単な方法は、結果オブジェクトをコンソールログに出力することです。
const results = await new AxeDevToolsBuilder({ page }).analyze();
console.log(results);完全なサンプルファイル
同じテストがJavaScriptとTypeScriptで以下に示されています。Axe DevTools APIは両方で同じです。TypeScriptバージョンではimport構文を使用し、Playwrightとスキャンの戻り値を注釈します。
JavaScript
const playwright = require('playwright');
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
(async () => {
//Launch the Playwright Driver
const browser = await playwright.chromium.launch();
//Create a new browser context
const context = await browser.newContext();
//Create a new page in the browser
const page = await context.newPage();
//launch page for testing (has intentional accessibility issues)
await page.goto('https://broken-workshop.dequelabs.com');
//analyze page
const results = await new AxeDevToolsBuilder({ page }).analyze();
//log results
console.log(results);
//close webdriver
browser.close();
})();TypeScript
import * as playwright from 'playwright';
import type { Browser, BrowserContext, Page } from 'playwright';
import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import type { AxeResults } from 'axe-core';
(async () => {
//Launch the Playwright Driver
const browser: Browser = await playwright.chromium.launch();
//Create a new browser context
const context: BrowserContext = await browser.newContext();
//Create a new page in the browser
const page: Page = await context.newPage();
//launch page for testing (has intentional accessibility issues)
await page.goto('https://broken-workshop.dequelabs.com');
//analyze page
const results: AxeResults = await new AxeDevToolsBuilder({ page }).analyze();
//log results
console.log(results);
//close webdriver
await browser.close();
})();次のステップ
アクセシビリティスキャンを無事完了したら、次はレポートの生成や結果オブジェクトの使用といったより高度なスキャンのトピックに進む準備が整いました。
トラブルシューティング
スキャン結果の取得に問題がある場合は、Dequeの代表者に直接連絡するか、サポートデスクを通じて、もしくはメールを送信でお問い合わせください。喜んでお手伝いいたします。