Was wäre, wenn Sie Ihre Webanwendung so testen könnten, wie Ihre Benutzer sie erleben? Wenn Sie Klicks, Eingaben und Aktionen Ihrer Nutzer:innen in einem Browser simulieren könnten – automatisch, schnell und präzise. Genau das macht Cypress möglich. Doch was ist Cypress und wie erleichtert es Ihre Qualitätssicherung? Dies stellen wir Ihnen in unserem Artikel ausführlich vor.
Testautomatisierung mit Cypress - Automatisierte End-to-End Tests (E2E)
Inhaltsverzeichnis
- Was ist Cypress
- Was sind End-to-End Tests? (E2E)
- Installation von Cypress
- End-to-End Tests (E2E) in Cypress
- Test Reporting in Cypress
- JSON Logfiles
- HTML Report
- Video-Mitschnitte in Cypress
- Testmanagement: Anbindung von Cypress Tests an Jira Xray
- Vorteile von Cypress gegenüber Selenium bei End-to-End Tests (E2E)
- Nachteile von Cypress gegenüber Selenium
- Webinar: Cypress Testautomatisierung & Xray in der CI/CD
- Fazit: Testautomatisierung mit Cypress
- FAQ - Cypress

Was ist Cypress?
Cypress ist ein Open Source Testingframework, das seit der Erstveröffentlichung in 2017 zu einer Schlüsselfigur im Testingumfeld geworden ist. Es ist ein Framework zum Testen von Webanwendungen oder von in JavaScript geschriebenen Komponenten und basiert auf Node.js. Entsprechend ist die Sprache zum Schreiben der Testfälle JavaScript oder TypeScript. Entwickelt wurde Cypress für zwei mögliche Anwendungsfälle: Für End-to-End Tests (E2E) von Webanwendungen und für Unit Tests moderner Frontend-Frameworks.
Was sind End-to-End Tests? (E2E)
Von End-To-End Testing spricht man, wenn Geschäftsabläufe oder Szenarien einer Webanwendung durchlaufen werden, um ihre Fehlerfreiheit sicherzustellen. Vereinfacht gesagt wird beim End-to-End-Testing mit Cypress eine Webanwendung in den Browser geladen und so getestet, als ob ein echter Benutzer seine Aktionen wie das Klicken auf Schaltflächen oder das Ausfüllen von Formularen durchführen würde.
Installation von Cypress
Die Installation von Cypress gestaltet sich sehr einfach. Hierzu muss lediglich Node.js auf Ihrem PC installiert sein. Anschließend können Sie in einem beliebigen Projekt Cypress mittels eines einzigen Befehls installieren. Beim ersten Start bietet Cypress Ihnen dann eine graphische Benutzeroberfläche, mittels derer Sie die Konfiguration vornehmen können. Nach dem Installationsvorgang können Sie dann direkt mit dem Schreiben Ihrer Testfälle starten. Cypress unterstützt die gängigsten Browser wie etwa Firefox, Edge und Chrome. Deren Treiber müssen nicht manuell zuvor installiert werden, da Cypress sich um die Treiberverwaltung kümmert. Auch dies erleichtert das Aufsetzen einer Testumgebung.
End-to-End Tests (E2E) in Cypress
Aufbau von Testfällen
Testfälle in Cypress werden in Szenarien organisiert. Ein Szenario beschreibt hier ein abstraktes Feature bzw. einen Prozess der Website, wie etwa einen Login-Prozess. Innerhalb der Szenarien lassen sich End-to-End Testfälle definieren, die wiederum Testschritte enthalten.
Das Schreiben von Testfällen folgt dem Ansatz der strukturierten Skripterstellung. Die Testfälle werden in reinem JavaScipt oder TypeScript verfasst und manipulieren oder untersuchen die Webseite mittels der umfangreichen Interaktionsbibliothek, die Cypress zur Verfügung stellt.
Wiederverwendbarkeit von Testskripten
Dadurch, dass Testfälle in Code geschrieben werden, ist es möglich, Testschritte in Funktionen zu kapseln und in anderen Testfällen wiederzuverwenden. Hierzu sollten die Tester:innen über solide Grundkenntnisse der Programmierung und der Modularisierung von Code verfügen. Es lassen sich somit auch parametrisierbare Funktionen implementieren, was ein nützliches Feature für strukturell ähnliche Testfälle ist.
Ausführung von Unit und End-to-End (E2E) Testfällen
Cypress stellt zum Ausführen von Testfällen eine graphische Benutzeroberfläche bereit. In dieser können Testfälle gestartet und bei der Ausführung beobachtet werden. Cypress zeigt zum einen die Reihenfolge der Testschritte und zum anderen die aktuelle Ansicht des Browsers an. Nach Ausführung des Testfalls können Sie einzelne Testschritte anklicken und sich Screenshots des jeweiligen Browserzustands zum Zeitpunkt der Ausführung des Testschritts anzeigen lassen. Dies ermöglicht ein gutes Debugging von Testfällen.

Bild: Cypress - Ausführung von Testfällen (Klicken zum Vergrößern) [Quelle: Qytera]
Test Reporting in Cypress
Konsolenausgabe
Zunächst bietet Cypress die Möglichkeit, den Testfortschritt über die Konsole ausgeben zu lassen. So wird der Anwender über den aktuellen Fortschritt der Ausführung der Testsuite informiert. Dies kann vor allem in CI/CD-Pipelines ein nützliches Feature sein, um den Fortschritt der Ausführung beurteilen zu können. Für jedes Szenario wird dabei folgende Ausgabe erzeugt:

Bild: Cypress - Konsolenausgabe (Klicken zum Vergrößern) [Quelle: Qytera]
Am Ende der Ausführung gibt Cypress eine Zusammenfassung der Ergebnisse der Testszenarien aus.

Bild: Cypress - Screenshots (Klicken zum Vergrößern) [Quelle: Qytera]
Das Tool erlaubt es dem Nutzer jedoch auch, manuell Screenshots zu erstellen. Es können jedoch nicht nur Screenshots des vollständigen Bildschirminhalts, sondern auch Bilder von bestimmten HTML-Elementen aufgenommen werden. Hierzu müssen die Tester:innen lediglich den Selektor des Elements angeben. In unserem Beispiel haben wir so unter anderem einen Screenshot des Loginformulars und der Topbar aufgenommen, wie sie in folgenden Bildern zu sehen sind.
JSON Logfiles
Ein wichtiger Aspekt bei der Testautomatisierung ist die maschinell lesbare Dokumentation eines Testlaufs. Hierfür bietet Cypress Reports im JSON-Format an, einem gängigen Format zum Abspeichern strukturierter Daten.
HTML Report
Bei einem Testautomatisierungswerkzeug spielt ebenfalls die Dokumentation in einem für die Anwender:innen lesbaren Format eine wichtige Rolle. Hierfür bietet Cypress ein Plugin zum Erstellen von HTML-Reports an. Ein Beispiel eines HTML-Reports können Sie in folgendem Bild sehen. Es wurden zwei Unit-Tests sowie fünf weitere End-to-End Testfälle ausgeführt. Für die nicht bestandenen Testfälle enthält der HTML-Report die Fehlermeldungen. Bei Unit-Tests sowie bei den E2E-Testfällen sind dies die erwarteten und die tatsächlich erhaltenen Ergebnisse, bzw. die aufgetretene Fehlermeldung.

Bild: Cypress - HTML Report (Klicken zum Vergrößern) [Quelle: Qytera]
Video-Mitschnitte in Cypress
Cypress bietet unter anderem einen Videomitschnitt der Testfälle an. Dieser lässt sich über ein Konfigurationsfile aktivieren und zeichnet für jedes Testszenario ein Video auf. Im Videomitschnitt ist die graphische Benutzeroberfläche von Cypress zu sehen, d.h. der aktuelle Testschritt und die Ansicht, die derzeit im Browser zu sehen ist. Ein Beispiel aus einem Videomitschnitt sehen Sie in folgendem Bild:

Bild: Cypress - HTML Report (Klicken zum Vergrößern) [Quelle: Qytera]
Testmanagement: Anbindung von Cypress Tests an Jira Xray
Für Cypress existieren Plugins, welche es erlauben, Testberichte im JUnit-XML-Format zu erstellen. Dies ist eine sehr nützliche Funktion, da viele Testmanagementwerkzeuge wie etwa Xray den automatisierten Import dieser Berichte unterstützen. Der von Cypress erzeugte Bericht kann direkt über eine REST API in Xray geladen werden. Xray legt hier automatisch neue End-to-End (E2E) und Unit Testfälle an, falls es die Testergebnisse aus dem Bericht keinem vorhandenen Testfall zuordnen kann. Bei Wiederholung des Testlaufs und erneutem Importieren der Testergebnisse kann Xray diese den bereits angelegten Testfällen zuordnen. Ein kleines Manko des JUnit-Plugins für Cypress ist die fehlende Berichterstattung auf Step-Ebene und die fehlende Unterstützung für die Integration von Screenshots im Bericht. Sollten Screenshots in Xray dokumentiert werden, müssten diese durch eine eigens programmierte Lösung hochgeladen werden.
Nutzer:innen, die bereits mit Selenium vertraut sind, dürfte der Umstieg auf Cypress nicht schwerfallen. Die Gliederung der Testfälle in Szenarien, Tests und Testschritte wird so auch in bekannten Java-Frameworks wie etwa JUnit oder TestNG implementiert. Die Cypress-Bibliothek und deren Benennung der Methoden zum Abfragen und Manipulieren der Website, ähnelt der von Selenium stark. So gibt es zunächst Methoden zum Selektieren von Elementen der Website sowie Methoden zum Ändern bzw. Manipulieren von Elementen.
Vorteile von Cypress gegenüber Selenium bei End-to-End Tests (E2E)
Cypress besitzt gegenüber Selenium den Vorteil, dass eine Testumgebung automatisiert aufgesetzt wird. So muss bei einem Seleniumprojekt zunächst der passende Treiber für einen Browser installiert werden, was in einer Testumgebung eine potentielle Fehlerquelle sein kann, besonders wenn die Testumgebung häufig migriert oder in einem CI/CD-Prozess kontinuierlich erstellt und wieder heruntergefahren wird. Hier bietet die Community zwar Unterstützung durch Module, die das Treibermanagement übernehmen können, jedoch ist die Verwaltung der Browsertreiber durch Cypress eleganter gestaltet.
Ein weiterer Vorteil gegenüber Selenium ist die deutlich schnellere Ausführungsgeschwindigkeit. Cypress kommuniziert mit Browsern nicht über das Webdriver-Protokoll und somit über eine Netzwerkverbindung, sondern es integriert sich direkt in den Prozess des Browsers. Unit und End-to-End (E2E) Testfälle werden automatisiert neu gestartet, sobald Änderungen am entsprechenden Code des Testfalls durchgeführt werden, wodurch sich die Tester:innen voll und ganz auf das Schreiben von Testfällen konzentrieren können.
Cypress kommt zudem mit einem weiteren Vorteil, nämlich den automatisierten Awaits. In Selenium-Projekten müssen Waits oft manuell definiert werden, d.h. es muss auf das Erscheinen eines bestimmten Elements gewartet werden. In Cypress-Testfällen wird diese Funktion automatisch implementiert, es müssen keine Waits manuell definiert werden. Sofern ein Element der Website nicht gefunden wird, geht Cypress automatisch davon aus, dass auf dieses Element gewartet werden muss.
Nachteile von Cypress gegenüber Selenium
Ein gravierender Nachteil gegenüber Selenium ist die fehlende Unterstützung des Safari-Browsers, Opera und Internet Explorers. Während die fehlende Unterstützung für den Internet Explorer noch verkraftbar ist, da dieser nicht mehr weiterentwickelt wird und langsam vom Markt verschwindet, ist die fehlende Unterstützung von Safari und Opera ein Problem, da dies gängige Browser sind, die in der heutigen Browserlandschaft häufig anzutreffen sind.
Ein weiteres Feature, welches Selenium gegenüber Cypress bietet, ist die Unterstützung von End-to-End-Tests gegen mobile Geräte mit dem Betriebssystem Android und iOS. Mit Selenium können Sie gemeinsam genutzte Testbibliotheken für den Test mobiler Geräte und von Webanwendungen schreiben, was für Cypress jedoch nicht möglich ist.
Webinar: Cypress Testautomatisierung & Xray in der CI/CD
Fazit: Testautomatisierung mit Cypress
Cypress ist eine gelungene vollautomatisierte Testumgebung, die den Tester:innen die Einrichtung und den Betrieb einer Testumgebung sehr erleichtert. Die Installation und der Betrieb von Cypress können mit minimalen Aufwand erledigt werden, wodurch sich die Anwender:innen voll und ganz auf das Erstellen und Verwalten von Unit und End-to-End (E2E) Testfällen konzentrieren können.
Der Aufwand bei der Implementierung der Testautomatisierung zahlt sich langfristig um ein Mehrfaches wieder aus und sie können die frei gewordenen Kapazitäten in anderen Bereichen zur Anwendung bringen.
FAQ - Cypress
Was ist Cypress und wofür wird es verwendet?
Cypress ist ein modernes Testing-Framework, das speziell für automatisierte Tests von Webanwendungen entwickelt wurde. Es ermöglicht Entwicklern, Tests direkt im Browser auszuführen und bietet eine benutzerfreundliche Oberfläche, um Fehler und Probleme in den jeweiligen Webapplikationen zu identifizieren. Es unterstützt sowohl End-to-End-Tests als auch Komponententests und ist bekannt für seine Geschwindigkeit und sein Feedback in Echtzeit.
Welche Arten von Tests können mit Cypress durchgeführt werden?
Es können verschiedene Arten von Tests durchgeführt werden, einschließlich End-to-End-Tests, Integration-Tests und Komponententests. Cypress eignet sich hervorragend zum Überprüfen der Funktionalität von Webanwendungen und bietet Tools, um automatisierte Tests zu erstellen, die auf JavaScript basieren. Darüber hinaus kann es auch für Unit-Tests verwendet werden.
Welche Best Practices sollte man bei der Erstellung effizienter Tests mit Cypress beachten?
Für effiziente Tests achten Sie auf klar definierte Testfälle und Page-Object-Patterns. Integrieren Sie Tests in CI/CD-Pipelines.
Veröffentlicht am 16.September 2024
Aktualisiert am 03.Februar 2025

Agile, Teststrategie, DevOps, Testautomatisierung, Testmanagement
Als Experte für Softwarequalität und ISTQB Certified Full Advanced Tester informiere ich Sie auf Qytera.de über den aktuellen Stand der IT in Wirtschaft und Behörden zu den Themen Testautomatisierung, Performance Testing und Testmanagement.
Testautomatisierung bedeutet für mich:
Mehr Zeit für neue Features statt nerviger Bugs und zufriedene Kunden 🚀🚀 – und dadurch die Softwarewelt ein Stück besser zu machen
Wilson Campero kann über Linkedin kontaktiert werden: / Wilson Campero