Vincenius/wwebdev

Eine Änderung auf wweb.dev überprüfen

Vollständig statische Astro-Seite mit React-Inseln – die Überprüfung bedeutet, die erstellte Seite in einem Browser zu laden und mit den hydrierten Inseln zu interagieren.

Build + Server

yarn install          # falls Server-Abhängigkeiten fehlen (server.mjs benötigt compression/express)
yarn build            # statischer Build → dist/ (TZ=UTC fest eingebaut)
yarn serve            # Produktionsserver unter http://localhost:4321 (NICHT astro preview)

node server.mjs schlägt unter Yarn PnP-ähnlichen Setups direkt fehl – verwende immer yarn serve. Führe ihn im Hintergrund aus; teste mit curl -s -o /dev/null -w "%{http_code}" http://localhost:4321/<route>.

Seite steuern

Kein Playwright im Repository. Installiere playwright-core in einem temporären Verzeichnis und verwende das systemeigene Chrome (chromium.launch({ channel: 'chrome', headless: true })) – kein Browser-Download nötig. Inseln sind client:visible, warte daher auf einen von der Insel gerenderten Selektor, bevor du Behauptungen aufstellst, und gib Animationen ~1s Zeit.

Nützliche Prüfungen für die Generator-Werkzeuge:

• berechnete Stile der injizierten <style>-Ausgabe (animation-name, position, size)
• Textarea .inputValue() für den kopierbaren HTML/CSS-Code
• Screenshots bei 1440px und ~480px (mehrere Tool-Sidebars wechseln auf Mobilgeräten zu column-reverse)

Fallstricke

• Die Konsole sollte fehlerfrei sein. Vite-Asset-Inlining ist deaktiviert (assetsInlineLimit: 0 in astro.config.mjs), weil Data-URI-Schriftarten gegen die CSP font-src 'self' verstoßen – falls Data-URI-CSP-Fehler erneut auftreten, wurde diese Einstellung verloren.
• yarn test:parity benötigt test/baseline/ (Produktions-HTML-Snapshots), das nicht eingecheckt ist; ohne es erzeugt die Testumgebung einen ENOENT-Fehler. Es ist ohnehin kein Ersatz für die Browser-Überprüfung.