Cypress

Frontend-Testing steht die Testpyramide traditionell auf dem Kopf: viele End-to-End-Tests, kaum Unit-Tests, und dazwischen flaky Jest-Tests mit endlosen Timeouts. Cypress will das ändern – nicht nur als Selenium-Alternative für End-to-End-Tests, sondern auch mit Component Testing, das einzelne React-, Vue- oder Angular-Komponenten isoliert im echten Browser testet. Das visuelle Feedback macht Test-Driven Development im Frontend praktikabel: Jeder Testschritt ist als DOM-Snapshot sichtbar, Screenshots im Fehlerfall zeigen sofort, warum ein Test fehlschlägt. Die Open-Source-Variante reicht für die meisten Software Testing Teams völlig aus – Testparallelisierung lässt sich auch ohne kommerzielle Cloud in der eigenen Pipeline umsetzen.

Podcast Episode: Cypress

Dehla arbeitet schon viele Jahre mit Automatisierungstools. Cypress hat sie überzeugt. Das Open Source Tool hat viele Vorteile wie den flexiblen Einsatz in mehreren Teststufen und die Schnelligkeit. Doch Cypress hat natürlich auch Grenzen. Dehla erklärt, wie man mit Cypress vorgeht und wie ihr Team damit arbeitet. Zum Schluss gibt sie noch wertvolle Tipps für alle, die Cypress ausprobieren wollen.

“Cypress schafft es, die Schnelligkeit eines Tests zu verbinden mit dem visuellen Feedback” – Dehla Sokenou

Dr.-Ing. Dehla Sokenou promovierte 2005 an der TU Berlin über UML-basiertes Testen. Sie fühlt sich in allen Phasen der Softwareentwicklung zu Hause, einen besonderen Schwerpunkt bilden allerdings auch weiterhin alle Themen rund um Qualitätssicherung und Testen. Bei der WPS ist sie als Test- und Qualitätsmanagerin sowie Softwarearchitektin tätig. Daneben ist sie Sprecherin der GI-Fachgruppe Test, Analyse und Verifikation von Software (TAV) und im Sprechergremium des Arbeitskreises Innovative Testmethoden.

Highlights der Episode

• Cypress läuft im echten Browser und zeigt visuelles Feedback – deshalb stabiler als Jest-Emulation.
• Component Testing dreht die Frontend-Testpyramide um: Einzelne Komponenten isoliert statt nur End-to-End.
• Das Daumenkino-Feature zeigt DOM-Snapshots vor und nach jedem Teststep – ideal für Test-Driven Development.
• Cypress Open Source reicht: Testparallelisierung lässt sich in GitLab-Pipelines selbst bauen.
• Testing Library macht Tests intuitiver: Nach Button-Label suchen statt DOM-Pfade hardcoden.

Cypress: Revolution im Bereich der Testautomatisierung

Dehla stellt Cypress vor, ein revolutionäres Testautomatisierungstool für Webentwicklungen. Sie geht auf die Vorteile von Cypress ein, spricht über Herausforderungen und Best Practices und erzählt, wie es die Testlandschaft verändert.

Cypress ist mehr als nur ein Selenium-Konkurrent

Cypress startete als End-to-End-Testing-Tool und positionierte sich schnell als starker Gegenspieler zu Selenium. Jedoch hat es sich seitdem weit darüber hinaus entwickelt. Besonders interessant ist die Einführung des Component-Testing, welches eine neue Perspektive auf Frontend-Tests eröffnete. Statt die Testpyramide auf den Kopf zu stellen, ermöglicht Component-Testing eine fokussiertere Betrachtung einzelner Komponenten – eine Methode, die schnelleres Feedback und höhere Teststabilität verspricht.

Der Umgang mit Tests: Ein Paradigmenwechsel

Dehla erzählte von dem Paradigmenwechsel in der Herangehensweise an Tests durch Cypress. Anstatt umständlich Jest zu verwenden, das nicht im echten Browser testet und somit oft instabil ist, nutzt Cypress den echten Browser für Tests. Dies führt nicht nur zu einer höheren Stabilität der Tests, sondern auch zu einem visuellen Feedback während des Testprozesses. Besonders hervorgehoben wird das ‘Daumen-Kino’-Feature von Cypress, das es erlaubt, jeden Schritt eines Tests zu visualisieren und somit einen unmittelbaren Einblick in das Verhalten der getesteten Komponente bietet.

Test-driven Development im Frontend

Cypress hat auch neue Möglichkeiten für Test-driven Development (TDD) im Frontend eröffnet. Durch die intuitive Handhabung des Tools beginnen Entwicklerinnen und Entwickler mit dem Schreiben von Tests noch bevor die eigentliche Komponente existiert. Dieser Prozess unterstützt eine strukturierte Entwicklung und hilft dabei, Features schrittweise einzuführen und sofortiges Feedback zu erhalten.

Die Evolution von Cypress

Cypress entwickelt sich kontinuierlich weiter. Von den Anfängen als einfaches Testing-Tool bis hin zur aktuellen Version 12 hat Cypress mehrere bedeutende Updates erfahren. Diese Updates umfassten nicht nur Bugfixes und Performance-Verbesserungen, sondern auch die Einführung neuer Features wie Component-Testing für verschiedene Frameworks (React, Vue, Angular). Trotz kleinerer Hürden bei der Einführung neuer Funktionen ist es deutlich geworden, dass die Probleme mittlerweile behoben sind und Cypress eine stabile Umgebung für Frontend-Tests bietet.

Tipps für den Einstieg

Für alle, die mit Cypress beginnen möchten, empfiehlt Dehla, sich gründlich einzulesen und sich mit dem Setup vertraut zu machen. Ein wesentlicher Tipp ist die Nutzung der Testing Library zusammen mit Cypress für eine intuitivere Gestaltung von Tests. Dieser Ansatz erleichtert nicht nur das Schreiben von Tests aus Benutzersicht sondern trägt auch zur Stabilität bei. Der Schlüssel zum Erfolg liegt darin einfach anzufangen und eigene Erfahrungen zu sammeln.