Seite 11 - Testing/E2E

Ein geändertes Design Token kann Dutzende Komponenten gleichzeitig verschieben, ohne dass ein einziger Unit-Test das bemerkt. Visuelle Regressionstests machen genau diese Verschiebungen sichtbar, bevor sie den Weg in die Produktion finden, mit automatisierten Screenshot-Vergleichen direkt in der CI-Pipeline.

Alpine.js macht Hyvä Frontends schnell und reaktiv, aber genau diese Reaktivität wird zur Falle für E2E Tests, wenn sie mit festen Wartezeiten statt echten Zustandsprüfungen abgesichert wird. Dieser Artikel zeigt, wie Cypress und Playwright Alpine gesteuerte Mini Cart und Wishlist Interaktionen zuverlässig testen, ohne auf brüchige Selektoren oder feste Timeouts angewiesen zu sein, und wie sich Hyvä's client seitiges Verhalten von klassischem, serverseitig gerendertem Magento unterscheidet.

Wer jedes Feld einer API Antwort einzeln mit expect prüft, übersieht oft stille Breaking Changes wie neue Pflichtfelder, geänderte Typen oder entfernte Enum Werte. Schema Validierung gegen JSON Schema oder OpenAPI deckt genau diese Fälle automatisch auf, reduziert Testcode erheblich und lässt sich nahtlos in Cypress, Playwright und die CI Pipeline integrieren, damit Frontend und Backend denselben Vertrag verlässlich einhalten.

Die meisten Bugs entstehen nicht in der Mitte der Logik, sondern an ihren Rändern: leere Listen, negative Mengen, abgelaufene Tokens, gleichzeitige Zugriffe. Claude hilft, diese Edge Cases systematisch aus Code, Spezifikation und Domänenwissen abzuleiten, statt sie dem Zufall im Review zu überlassen.

Die meisten Entwickler kennen set -x nur als schnellen Schalter fuer mehr Ausgabe, nutzen aber nie mehr als die Standardeinstellung. Mit angepasstem PS4, gezielter Umleitung der Trace-Ausgabe und selektivem Ein- und Ausschalten wird set -x vom groben Werkzeug zur praezisen Bash-Tracing-Technik, die auch in CI-Pipelines sicher einsetzbar ist.

Wer Cypress- oder Playwright-Suiten naiv in GitLab CI einbindet, bekommt langsame Pipelines, flackernde Tests und Merge Requests, die niemand mehr ernst nimmt. Mit den richtigen Docker-Images, Caching-Strategien, Review-App-Setups, Artefakt-Regeln, Parallelisierung und Retry-Mechanismen werden E2E-Tests zu einem verlässlichen Gate statt zu einem gefürchteten Flaschenhals im Entwicklungsprozess.

Automatisierte Accessibility-Tests mit axe-core decken rund ein Drittel aller WCAG-Verstöße zuverlässig auf und lassen sich direkt in eine bestehende Playwright- oder Cypress-Suite integrieren. Mit einer Baseline-Strategie schlägt der Build nur bei neuen Verstößen fehl, während bekannte Altlasten sichtbar bleiben, statt die Pipeline dauerhaft zu blockieren. Manuelle Prüfung bleibt für Tastaturbedienung und Screenreader unverzichtbar.

Eine WebSocket-Verbindung unterscheidet sich fundamental von einer klassischen HTTP-Anfrage, weil sie nicht eine einzelne Anfrage mit genau einer Antwort darstellt, sondern eine dauerhafte, bidirektionale Verbindung, über die zu unvorhersehbaren Zeitpunkten mehrere Nachrichten in beide Richtungen fliessen. Diese fundamentale Eigenschaft macht klassische Request-Response-Testmuster ungeeignet und verlangt nach eigenen Testansätzen für Verbindungsaufbau, laufenden Nachrichtenaustausch und das Verhalten bei einem unerwarteten Verbindungsabbruch.

Ein grünes Häkchen in der CI-Pipeline sagt wenig darüber aus, ob eine Testsuite dem Team wirklich vertraut werden kann. Erst wenn Testergebnisse als HTML-Report, Slack-Benachrichtigung und Trenddashboard sichtbar werden, erkennen Entwickler, Tester und Product Owner gemeinsam, wie stabil, wie flaky und wie schnell die eigenen End-to-End-Tests tatsächlich sind.

shallowMount ersetzt jede Kindkomponente durch einen Stub und rendert nur die getestete Komponente selbst, mount baut den kompletten Komponentenbaum auf. Beide Funktionen aus Vue Test Utils lösen unterschiedliche Testprobleme, und wer sie verwechselt, bekommt entweder Tests, die zu viel gleichzeitig prüfen, oder Tests, die an internen Details von Kindkomponenten zerbrechen.