Koppla in axe-core i Playwright-tester
Låt bygget misslyckas när tillgänglighetsregressioner uppstår
Koppla in axe-core i Playwright-tester är en gratis lektion i Web Accessibility Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Web Accessibility Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Web Accessibility Academy innehåller totalt 4 lektioner.
Från manuell genomsökning till automatiserat test
Att klicka på ett webbläsartillägg fungerar utmärkt för en sida. Om du vill skydda varje sida vid varje incheckning kopplar du in axe-core i din automatiserade testsvit.
Varför Playwright
Playwright styr en riktig webbläsare från kod, så axe körs mot sidan precis som användarna ser den, inklusive innehåll som renderas av JavaScript.
Bryggpaketet
Paketet axe-core/playwright kopplar ihop de två. Installera det tillsammans med Playwright så att dina tester kan injicera och köra axe-motorn.
npm install --save-dev @axe-core/playwrightImportera byggverktyget
I testfilen importerar du AxeBuilder. Det är hjälpfunktionen som injicerar axe-core på den aktuella sidan och samlar in resultaten åt dig.
import AxeBuilder from '@axe-core/playwright';Navigera och analysera sedan
Låt först Playwright läsa in sidan och anropa sedan analyze på en ny AxeBuilder för att genomsöka det som för närvarande renderas i webbläsaren.
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();Kontrollera att inga överträdelser finns
Resultatet innehåller en array med violations. En godkänd sida har en tom array, så kontrollera att dess längd är noll för att få testet att misslyckas vid alla problem.
expect(results.violations).toEqual([]);Ett komplett testfall
När du sätter ihop allt får du ett riktigt tillgänglighetstest som körs i CI precis som alla andra Playwright-specifikationer.
test('home page has no a11y violations', async ({ page }) => {
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});Testa efter interaktion
Den verkliga styrkan ligger i att genomsöka dynamiska tillstånd. Öppna först en modal eller fäll ut en meny och analysera sedan, så att axe kontrollerar det gränssnitt som användarna faktiskt aktiverar.
await page.getByRole('button', { name: 'Open menu' }).click();
const results = await new AxeBuilder({ page }).analyze();Begränsa omfånget
Du kan fokusera genomsökningen på ett område med include, vilket är praktiskt när du testar en enskild komponent utan störningar från resten av sidan.
new AxeBuilder({ page }).include('#signup-form').analyze();Välj din regeluppsättning
Använd withTags för att endast köra de regler som hör till en standard, till exempel kriterierna i WCAG 2.1 AA, så att testet motsvarar ditt mål för överensstämmelse.
new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();Kom ihåg begränsningen
Även gröna Playwright-tester täcker bara den andel problem som går att automatisera. De kompletterar manuella skärmläsarkontroller; de ersätter dem aldrig.
Snabb kontroll
Kom ihåg hur du får ett test att misslyckas vid tillgänglighetsproblem.
Sammanfattning: a11y i din pipeline
AxeBuilder injicerar axe-core i en riktig webbläsare, du analyserar varje tillstånd och kontrollerar noll överträdelser. Nu gör tillgänglighetsregressioner att bygget misslyckas automatiskt. ✅
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Koppla in axe-core i Playwright-tester” gratis?
Ja – hela texten till ”Koppla in axe-core i Playwright-tester” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Web Accessibility Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Web Accessibility Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Koppla in axe-core i Playwright-tester”?
Låt bygget misslyckas när tillgänglighetsregressioner uppstår Ni övar på Web Accessibility Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Web Accessibility Academy?
Du behöver inga förkunskaper. Utbildningen i Web Accessibility Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Koppla in axe-core i Playwright-tester”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Web Accessibility Academy-lektionen?
Ja. Varje Web Accessibility Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Vad automatisering kan och inte kan upptäcka
- Skanna med axe DevTools och Lighthouse
- Koppla in axe-core i Playwright-tester
- Lintning och CI-spärrar för tillgänglighet