Подключение axe-core к тестам Playwright
Останавливайте сборку при появлении регрессий доступности.
«Подключение axe-core к тестам Playwright» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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/playwrightImport 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. ✅
Часто задаваемые вопросы
Урок «Подключение axe-core к тестам Playwright» бесплатный?
Да — полный текст урока «Подключение axe-core к тестам Playwright» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Подключение axe-core к тестам Playwright»?
Останавливайте сборку при появлении регрессий доступности. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Подключение axe-core к тестам Playwright»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что автоматизация может обнаружить, а что — нет
- Сканирование с помощью axe DevTools и Lighthouse
- Подключение axe-core к тестам Playwright
- Статический анализ и контрольные этапы CI для доступности