axe-core'u Playwright Testlerine Bağlama
a11y gerilemeleri ortaya çıktığında derlemeyi başarısız kılın.
axe-core'u Playwright Testlerine Bağlama, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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. ✅
Sıkça Sorulan Sorular
“axe-core'u Playwright Testlerine Bağlama” dersi ücretsiz mi?
Evet — “axe-core'u Playwright Testlerine Bağlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“axe-core'u Playwright Testlerine Bağlama” dersinde ne öğreneceğim?
a11y gerilemeleri ortaya çıktığında derlemeyi başarısız kılın. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“axe-core'u Playwright Testlerine Bağlama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Otomasyonun Yakalayabildiği ve Yakalayamadığı Sorunlar
- axe DevTools ve Lighthouse ile Tarama
- axe-core'u Playwright Testlerine Bağlama
- Erişilebilirlik İçin Lint ve CI Geçitleri