Playwright用Axe DevToolsのテストを書く

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を用いたPlaywrightでのアクセシビリティテストを効果的に書く方法

Not for use with personal data

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

Axe DevToolsを使用したアクセシビリティスキャンの結果は、わずか1行のコードで生成できます。これらの結果は、そのまま利用することも、アサーションライブラリと併用することも、アクセシビリティレポートの作成に使用することもできます。

前提条件

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

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

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

完全なサンプルファイル

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

次のステップ

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

トラブルシューティング

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