Playwrightとaxe-coreでアクセシビリティチェックを行うE2Eテスト

フロントエンド開発では、画面の見た目や動作確認に加えて、アクセシビリティへの配慮も重要になります。

しかし、alt属性やaria属性、フォーム要素のラベル付けなどを毎回手動で確認するのは手間がかかり、ページ数が増えると見落としが発生する可能性もあります。

そこで今回は、E2Eテストの中でアクセシビリティチェックを行う方法として、Playwrightとaxe-coreを使った実装を試してみました。

アクセシビリティチェックを自動化することで、alt属性の不足やlabel不足、コントラストの問題などを早い段階で検出しやすくなります。

本記事では、Playwrightとaxe-coreを組み合わせてアクセシビリティチェックを行う基本的な方法を紹介します。

対象読者

・Playwrightを使ったE2Eテストに興味がある方
・アクセシビリティチェックを自動化したい方
・フロントエンド開発で品質確認の方法を探している方

使用ツール

Playwright

Playwrightは、Microsoftが開発しているE2Eテストツールです。ブラウザ操作を自動化し、実際のユーザー操作に近い形でテストを行うことができます。

・ページ遷移
・クリック操作
・フォーム入力
・画面検証

などのテストを自動化できます。

axe-core

axe-coreは、アクセシビリティチェックを行うためのライブラリです。 WCAG（Web Content Accessibility Guidelines）に基づいたアクセシビリティチェックを自動で行うことができます。

環境構築

まず、必要なパッケージをインストールします。


npm install @playwright/test
npm install @axe-core/playwright

アクセシビリティテストの実装

Playwrightとaxe-coreを組み合わせることで、E2Eテストの中でアクセシビリティチェックを行うことができます。

以下は基本的なテストコードの例です。


import { test, expect } from '@playwright/test'
import AxeBuilder from '@axe-core/playwright'

test('accessibility test', async ({ page }) => {

  await page.goto('http://localhost:3000')

  const results = await new AxeBuilder({ page }).analyze()

  expect(results.violations).toEqual([])

})

このテストでは、指定したページを開き、axe-coreを使ってアクセシビリティチェックを実行しています。

アクセシビリティ違反がある場合は violations に結果が格納されます。