Wiring axe-core Into Playwright Tests
Fail the build when a11y regressions appear.
Wiring axe-core Into Playwright Tests is a free Web Accessibility Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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. ✅
Frequently asked questions
Is the “Wiring axe-core Into Playwright Tests” lesson free?
Yes — the full text of “Wiring axe-core Into Playwright Tests” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Wiring axe-core Into Playwright Tests”?
Fail the build when a11y regressions appear. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Wiring axe-core Into Playwright Tests” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- What Automation Can and Cannot Catch
- Scanning With axe DevTools and Lighthouse
- Wiring axe-core Into Playwright Tests
- Linting and CI Gates for Accessibility