Puppeteer用Axe DevTools for Webのためのテスト作成

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Axe DevTools for Webを使用してアクセシビリティのための効果的なテストを書く方法

Not for use with personal data

Axe DevToolsを使ったテストの作成

Axe DevToolsを使えば、アクセシビリティスキャンの結果をたった1行のコードで生成することができます。この結果は生データとして利用できるほか、アサーションライブラリと組み合わせて使用したり、アクセシビリティレポートを作成するために使用することができます。

前提条件

Axe DevToolsでページをテストするには、まずプロジェクトにインポートし、初期化する必要があります。まだこのステップを完了していない場合は、その方法についてこのガイドをご覧ください。

スキャンコンテキストの取得

ページをアクセシビリティのためにスキャンする前に、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);

完全なサンプルファイル

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();
})();

次のステップ

アクセシビリティスキャンを無事に完了したので、レポートの生成や結果オブジェクトの使用のようなより高度なスキャンのトピックに進む準備ができました。

トラブルシューティング

スキャン結果の取得に問題がある場合は、直接Dequeの代理店に連絡するか、サポートデスクまたはメールを送るからお問い合わせください。喜んでお手伝いいたします。