PlaywrightとAxeでE2Eテストにアクセシビリティチェックを組み込む

ReactやVueなどでコンポーネントを分割しながら開発していると、文書全体の整合性チェックができない。そのため、E2Eテストに組み込むことでレンダリング後のHTMLを確認する。

準備、インストール

# playwright のセットアップ
$ npm init playwright
$ npm i -D @axe-core/playwrigh

Playwrightの設定ファイル

雛形が作られているのでカスタマイズする。

// playwright.config.ts  
export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        ignoreHTTPSErrors: true,  // ← 自己署名証明書を使っている場合はtrue
      },
    },
    ...
  },
  webServer: {
    command: 'npm run dev',  // ← viteで開発用Webサーバを起動する
    reuseExistingServer: !process.env.CI,
  },
})

テスト

import { expect, test } from '@playwright/test'

test('ログインページ', async ({ page }) => {
  await page.goto('/')
  await expect(page).toHaveTitle('ログイン')

  // レンダリングされるまで待機
  await expect(page.getByRole('heading', { name: 'ログイン', level: 1 })).toBeVisible()

  // アクセシビリティチェック
  const accessibilityScanResults = await new AxeBuilder({ page }).analyze()

  // results#violationsにチェック結果が含まれているので必要に応じてconsoleに出力する
  await expect(accessibilityScanResults.violations.length).toBe(0)
})