Kicktemp Astro Starter

Erscheinungsbild

End-to-End-Tests ​

Playwright prüft die Website so, wie sie ausgeliefert wird. Die Suite liegt unter tests/e2e/, die Konfiguration in playwright.config.ts.

sh
pnpm exec playwright install chromium   # einmalig
pnpm run test:e2e                       # baut und prüft

pnpm run test:e2e stößt den Build selbst an; innerhalb von pnpm verify läuft er ohnehin vorher.

Gegen den Build, nicht gegen den Dev-Server ​

Genau das, was diese Suite prüft, entsteht erst beim Bauen: welches Skript vor der Consent-Entscheidung lädt (M5), welche Bildformate erzeugt wurden (M3b), was in der Sitemap steht (M4). Ein Dev-Server würde etwas anderes testen als das, was beim Kunden ankommt. Playwright startet deshalb astro preview auf dem gebauten dist/.

Kein fremder Server

reuseExistingServer steht auf false. Sonst liefe die Suite gegen das, was zufällig auf dem Port horcht — im schlimmsten Fall grün gegen eine völlig andere Anwendung. Belegt etwas den Port 4331, bricht der Lauf ab und sagt das.

Nur Chromium ​

Die Suite prüft Struktur, Barrierefreiheit und ab M5 das Ladeverhalten von Skripten. In diesen Bereichen unterscheiden sich die Engines nicht. Ein zweiter Browser würde die Laufzeit jedes Pull Requests verdoppeln, ohne andere Fehler zu finden. Visuelle Abweichungen zwischen Engines gehören in die manuelle Abnahme. Begründung als ADR 0004.

Was aktuell geprüft wird ​

smoke.spec.ts

  • Die Seiten laden und tragen genau eine <h1>
  • lang stammt aus der Projektkonfiguration
  • Jede Seite hat eine nicht-leere Description
  • Der Sprunglink ist das erste per Tab erreichbare Element, wird bei Fokus sichtbar und springt zum Inhalt
  • Es geht keine Anfrage an einen fremden Host — Schriften sind selbst ausgeliefert. Ab M5 deckt dieselbe Prüfung das GTM-Verhalten vor der Consent-Entscheidung ab
  • 404 und Styleguide sind erreichbar und tragen noindex
  • Die Button-Komponente erzeugt mit href einen Link, ohne href eine Schaltfläche

navigation.spec.ts

  • Auf breiten Viewports sind die Einträge ohne Schaltfläche sichtbar
  • Die aktuelle Seite trägt aria-current="page"
  • Externe Ziele weisen für Screenreader auf den Seitenwechsel hin
  • Die Aufklappnavigation öffnet und schließt über die Schaltfläche, über Escape (mit Fokusrückgabe) und über einen Klick daneben — und aria-expanded stimmt in jedem Zustand
  • Impressum und Datenschutz sind von jeder Seite aus erreichbar und führen auf vorhandene Seiten

a11y.spec.ts

axe-core prüft Startseite, Styleguide, Fehlerseite, Impressum und Datenschutz gegen WCAG 2.0/2.1 Level A und AA. Verstöße lassen den Lauf scheitern — es gibt keine Ausnahmeliste.

Ein zusätzlicher Lauf prüft den Styleguide mit geöffneter Aufklappnavigation. Dieser Zustand existiert nur zur Laufzeit und wäre in einer Prüfung des ausgelieferten HTML unsichtbar.

Der Styleguide ist hier der wichtigste Prüfpunkt: Er zeigt jedes Primitive in jeder Variante, sodass ein Aufruf die gesamte Komponentensammlung abdeckt.

Was axe nicht leistet

Automatisierte Prüfungen finden etwa ein Drittel der WCAG-Verstöße — Kontraste, fehlende Namen, kaputte Struktur. Ob eine Seite tatsächlich bedienbar und verständlich ist, entscheidet weiterhin die manuelle Abnahme.

In der CI ​

Der Workflow installiert vor pnpm verify nur Chromium (--with-deps für die Systembibliotheken des Runners). Ein fehlgeschlagener Lauf lädt den Playwright-Bericht als Artefakt hoch — mit Trace des Wiederholungslaufs, sodass ein rotes Ergebnis ohne lokales Nachstellen nachvollziehbar ist.