Web Accessibility Academy · レッスン

Playwrightテストにaxe-coreを組み込む

a11yのリグレッションが見つかったらビルドを失敗させます。

「Playwrightテストにaxe-coreを組み込む」はCoddyKit上の無料Web Accessibility Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

From Manual Scan to Automated Test

Clicking a browser extension is great for one page. To guard every page on every commit, you wire axe-core into your automated test suite.

Why Playwright

Playwright drives a real browser from code, so axe runs against the page exactly as users see it, including content rendered by JavaScript.

The Bridge Package

The axe-core/playwright package connects the two. Install it alongside Playwright so your tests can inject and run the axe engine.

npm install --save-dev @axe-core/playwright

Import the Builder

In your test file you import AxeBuilder. It is the helper that injects axe-core into the current page and collects the results for you.

import AxeBuilder from '@axe-core/playwright';

Navigate, Then Analyze

First let Playwright load the page, then call analyze on a fresh AxeBuilder to scan whatever is currently rendered in the browser.

await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();

Assert Zero Violations

The result holds a violations array. A passing page has an empty array, so you assert its length is zero to fail the test on any issue.

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

A Complete Test Case

Put it together and you have a real accessibility test that runs in CI like any other Playwright spec.

test('home page has no a11y violations', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

Test After Interaction

The real power is scanning dynamic states. Open a modal or expand a menu first, then analyze, so axe checks the UI users actually trigger.

await page.getByRole('button', { name: 'Open menu' }).click();
const results = await new AxeBuilder({ page }).analyze();

Narrow the Scope

You can focus the scan on one region with include, which is handy when testing a single component without noise from the rest of the page.

new AxeBuilder({ page }).include('#signup-form').analyze();

Choose Your Rule Set

Use withTags to run only the rules tied to a standard, like the WCAG 2.1 AA criteria, so your test matches your conformance target.

new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();

Remember the Ceiling

Green Playwright tests still only cover the automatable share of issues. They complement manual screen reader checks; they never replace them.

Quick Check

Recall how you make a test fail on accessibility problems.

Recap: a11y in Your Pipeline

AxeBuilder injects axe-core into a real browser, you analyze each state, and assert zero violations. Now accessibility regressions break the build automatically. ✅

よくある質問

「Playwrightテストにaxe-coreを組み込む」レッスンは無料ですか？

はい。「Playwrightテストにaxe-coreを組み込む」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「Playwrightテストにaxe-coreを組み込む」で何を学びますか？

a11yのリグレッションが見つかったらビルドを失敗させます。ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Accessibility Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Playwrightテストにaxe-coreを組み込む」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Accessibility Academyレッスンでコードを書いて実行できますか？

はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Web Accessibility Academyに戻る