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行のコードで生成することができます。この結果は生データとして利用できるほか、アサーションライブラリと組み合わせて使用したり、アクセシビリティレポートを作成するために使用することができます。

以下のセクションの個々のスニペットはJavaScriptであり、TypeScriptでも変更なしでコンパイルされます。完全なサンプルファイルセクションでは、両方の言語での完全なテストが示されています。

前提条件

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

完全なサンプルファイル

同じテストが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の代理店に連絡するか、サポートデスクまたはメールを送るからお問い合わせください。喜んでお手伝いいたします。