axe-core in Playwright-Tests integrieren
Lassen Sie den Build fehlschlagen, wenn a11y-Regressionen auftreten.
axe-core in Playwright-Tests integrieren ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Vom manuellen Scan zum automatisierten Test
Eine Browser-Erweiterung anzuklicken, eignet sich hervorragend für eine einzelne Seite. Um jede Seite bei jedem Commit abzusichern, binden Sie axe-core in Ihre automatisierte Testsuite ein.
Warum Playwright
Playwright steuert einen echten Browser aus dem Code heraus, sodass axe die Seite genau so prüft, wie Nutzer sie sehen – einschließlich der von JavaScript gerenderten Inhalte.
Das Bindeglied-Paket
Das Paket axe-core/playwright verbindet die beiden. Installieren Sie es zusammen mit Playwright, damit Ihre Tests die axe-Engine einfügen und ausführen können.
npm install --save-dev @axe-core/playwrightAxeBuilder importieren
In Ihrer Testdatei importieren Sie AxeBuilder. Dabei handelt es sich um den Helfer, der axe-core in die aktuelle Seite einfügt und die Ergebnisse für Sie sammelt.
import AxeBuilder from '@axe-core/playwright';Navigieren, dann analysieren
Lassen Sie Playwright zunächst die Seite laden und rufen Sie dann analyze für einen neuen AxeBuilder auf, um alles zu prüfen, was derzeit im Browser gerendert wird.
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();Null Verstöße bestätigen
Das Ergebnis enthält ein Array namens violations. Eine fehlerfreie Seite hat ein leeres Array. Deshalb bestätigen Sie, dass seine Länge null ist, damit der Test bei jedem Problem fehlschlägt.
expect(results.violations).toEqual([]);Ein vollständiger Testfall
Wenn Sie alles zusammenfügen, erhalten Sie einen echten Accessibility-Test, der in CI wie jede andere Playwright-Spezifikation ausgeführt wird.
test('home page has no a11y violations', async ({ page }) => {
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});Nach Interaktionen testen
Die eigentliche Stärke liegt in der Prüfung dynamischer Zustände. Öffnen Sie zuerst ein Modal oder erweitern Sie ein Menü und analysieren Sie anschließend, damit axe die Benutzeroberfläche prüft, die Nutzer tatsächlich auslösen.
await page.getByRole('button', { name: 'Open menu' }).click();
const results = await new AxeBuilder({ page }).analyze();Den Prüfbereich eingrenzen
Mit include können Sie den Scan auf einen einzelnen Bereich konzentrieren. Das ist praktisch, wenn Sie eine einzelne Komponente testen, ohne dass der Rest der Seite störende Ergebnisse erzeugt.
new AxeBuilder({ page }).include('#signup-form').analyze();Regelsatz auswählen
Verwenden Sie withTags, um nur die Regeln auszuführen, die einem Standard zugeordnet sind, etwa den WCAG-2.1-AA-Kriterien. So entspricht Ihr Test dem angestrebten Konformitätsniveau.
new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();Die Grenzen beachten
Auch erfolgreiche Playwright-Tests decken nur den automatisierbaren Anteil der Probleme ab. Sie ergänzen manuelle Prüfungen mit Screenreadern, ersetzen diese aber niemals.
Schnelltest
Rufen Sie sich ins Gedächtnis, wie Sie einen Test bei Barrierefreiheitsproblemen fehlschlagen lassen.
Rückblick: a11y in Ihrer Pipeline
AxeBuilder fügt axe-core in einen echten Browser ein, Sie analysieren jeden Zustand und bestätigen null Verstöße. Nun lassen sich Regressionen bei der Barrierefreiheit automatisch erkennen und der Build wird abgebrochen. ✅
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „axe-core in Playwright-Tests integrieren“ kostenlos?
Ja — der vollständige Text von „axe-core in Playwright-Tests integrieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „axe-core in Playwright-Tests integrieren“?
Lassen Sie den Build fehlschlagen, wenn a11y-Regressionen auftreten. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „axe-core in Playwright-Tests integrieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Was Automatisierung erkennen kann und was nicht
- Mit axe DevTools und Lighthouse scannen
- axe-core in Playwright-Tests integrieren
- Linting und CI-Gates für Barrierefreiheit