Puppeteer用Axe DevTools for Webのためのテスト作成
Axe DevTools for Webを使用してアクセシビリティのための効果的なテストを書く方法
Axe DevToolsを使えば、アクセシビリティスキャンの結果をたった1行のコードで生成することができます。この結果は生データとして利用できるほか、アサーションライブラリと組み合わせて使用したり、アクセシビリティレポートを作成するために使用することができます。
以下のセクションの個々のスニペットはJavaScriptであり、TypeScriptでも変更なしでコンパイルされます。完全なサンプルファイルセクションでは、両方の言語での完全なテストが示されています。
前提条件
Axe DevTools for Web をインポートして初期化するには、まずインストールする必要があります。まだインストールしていない場合は、バンドルから、アーティファクトリポジトリから、またはDequeのAgoraから を読むことでインストール方法を確認してください。また、Puppeteer もインストールする必要があります。
インポートと初期化
Axe DevTools for Web と Puppeteer の両方をインポートしてください。構文はプロジェクトで使用している言語とモジュールシステムに依存します。プロジェクトに合ったものを選んでください:
CommonJSモジュールを使用したJavaScript
これは、"type": "module"がpackage.jsonにないNode.jsプロジェクトのデフォルトです。
const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');
const puppeteer = require('puppeteer');ESモジュールを使用したJavaScript
この構文は、プロジェクトの"type": "module"にpackage.jsonがある場合や、.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オブジェクトが作成されます。
スキャンコンテキストの取得
ページをアクセシビリティのためにスキャンする前に、Puppeteerでアクセスする必要があります。
//Launch the Puppeteer Driver
const browser = await puppeteer.launch();
//Create a new page in the browser
const page = await browser.newPage();
//Send the browser to the desired page to scan
await page.goto('$URL');コンテンツセキュリティポリシーの回避
スキャンしようとしているページにコンテンツセキュリティポリシーが有効になっている場合、問題が発生する可能性があります。この問題に遭遇した場合、Axe DevToolsには回避策が用意されています。ページを作成した後、このステートメントを追加するだけで済みます。
await page.setBypassCSP(true);Puppeteerがページにアクセスしたら、Axe DevToolsでスキャンを行い、結果を保存できます。スキャン結果を見る最も簡単な方法は、結果オブジェクトをコンソールにログ出力することです。
const results = await new AxeDevToolsPuppeteer(page).analyze();
console.log(results);完全なサンプルファイル
同じテストがJavaScriptとTypeScriptで下に示されています。Axe DevTools APIは両方で同一であり、TypeScriptバージョンはimport構文を使用し、Puppeteerとスキャンの返り値を注釈付けします。
JavaScript
const puppeteer = require('puppeteer');
const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');
(async () => {
//launch puppeteer web driver
const browser = await puppeteer.launch();
const page = await browser.newPage();
//launch page for testing
await page.goto('https://broken-workshop.dequelabs.com');
//analyze page
const results = await new AxeDevToolsPuppeteer(page).analyze();
//log results
console.log(results);
//close webdriver
browser.close();
})();TypeScript
import puppeteer from 'puppeteer';
import type { Browser, Page } from 'puppeteer';
import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import type { AxeResults } from 'axe-core';
(async () => {
//launch puppeteer web driver
const browser: Browser = await puppeteer.launch();
const page: Page = await browser.newPage();
//launch page for testing
await page.goto('https://broken-workshop.dequelabs.com');
//analyze page
const results: AxeResults = await new AxeDevToolsPuppeteer(page).analyze();
//log results
console.log(results);
//close webdriver
await browser.close();
})();次のステップ
アクセシビリティスキャンを無事に完了したので、レポートの生成や結果オブジェクトの使用のようなより高度なスキャンのトピックに進む準備ができました。
トラブルシューティング
スキャン結果の取得に問題がある場合は、直接Dequeの代理店に連絡するか、サポートデスクまたはメールを送るからお問い合わせください。喜んでお手伝いいたします。