UI Tests – der fehlende Baustein in deiner Testpyramide

Obwohl Integrationstests im Backend von Webanwendungen inzwischen weitläufig verwendet werden, wird die gleiche Teststufe im Frontend oft weggelassen. Typischerweise verlassen wir uns hier auf Unit Tests und End-to-End-Tests (E2E).

Aber E2E-Tests laufen in der Regel gegen eine deployte Umgebung und nicht gegen den lokalen Entwicklungsstand. Zudem testen sie eine ganze Serverlandschaft inklusive aller Abhängigkeiten – ein komplexes und fehleranfälliges Verfahren. Wie können wir dem entgegenwirken? Die Antwort liegt in UI-Tests mit modernen Frameworks wie Cypress und Playwright. Diese Tools ermöglichen es uns, UI-Tests mit gemocktem Backend zu schreiben, die das Frontend ab der Browser-Oberfläche testen. Sie sind stabil und performant, da weder ein Deployment noch das Warten auf eine Backend-Antwort erforderlich ist.

In diesem Workshop werden wir nach einer kurzen theoretischen Einführung ein Setup für UI-Tests mit wahlweise Cypress oder Playwright implementieren und eine beispielhafte Webanwendung mit UI Tests abdecken.

Darüber hinaus werde ich meine Erfahrungen aus dem praktischen Einsatz von UI-Tests teilen und dich über Best Practices und mögliche Fallstricke informieren.

Einige Schwerpunkte dieser Session:

• Best und Bad Practices bei der Anwendung von UI-Tests.
• Vergleich von UI-Tests mit Unit- und End-to-End-Tests: Was sind die Vor- und Nachteile?
• Techniken für robuste und wartbare UI-Tests.
• Akzeptanztest-getriebene Entwicklung (ATDD)

Diese Session wird dir dabei helfen, die Kontrolle über dein Frontend zurückzugewinnen und eine vollständige Testabdeckung in deinem Projekt zu gewährleisten. Komm und entdecke das fehlende Puzzlestück in deiner Testpyramide.

Du benötigst:

• Einen Laptop mit installiertem git und Node 18

Beispielapp, die wir für den Workshop verwenden werden: https://github.com/sbutzek/ui-testing-workshop