© Vectorpocket /Shutterstock.com
Das Testing Framework für React-, Angular- und Vue-Applikationen

End-to-End-Tests mit Cypress


Bei Cypress handelt es sich um ein umfassendes Tool zur Implementierung von E2E-Tests für Webapplikationen, das unabhängig von der Architektur und den verwendeten Technologien zum Einsatz kommen kann. Es basiert auf einer ähnlichen Infrastruktur, wie sie auch bei Selenium zu finden ist. Mit diesem Werkzeug lassen sich sowohl React- als auch Angular- und Vue-Applikationen testen.

Sie kennen bestimmt das Modell der Testpyramide. Sie dient als Visualisierung der verschiedenen Testarten für eine Applikation. Auf der untersten Ebene liegen die Unit-Tests. Sie laufen schnell ab, verfügen über eine möglichst hohe Testabdeckung und sind in der Regel einfach zu schreiben. Auf der obersten Ebene der Pyramide stehen die UI-Tests. Sie werden häufig auch als End-to-End- oder kurz E2E-Tests bezeichnet. Die Hauptmerkmale dieser Tests sind, dass sie verglichen mit Unit-Tests eine sehr lange Laufzeit haben, aufwendig umzusetzen und deshalb verhältnismäßig teuer sind. In diesem Artikel lernen Sie mit Cypress ein Werkzeug für die Implementierung von E2E-Tests kennen, das Sie in einer Webapplikation unabhängig von der Architektur und den verwendeten Technologien einsetzen können.

Was sind E2E-Tests und wofür werden sie verwendet?

Der Begriff End-to-End bezieht sich auf die Tatsache, dass sich E2E-Tests, im Gegensatz zu Unit-Tests, nur auf spezielle Units of Code beziehen und diese unabhängig von ihrer Umgebung überprüfen. Das bedeutet im Umkehrschluss, dass solche Tests eine Applikation wirklich von einem Ende, also der grafischen Oberfläche im Browser, bis zum anderen, dem Server beziehungsweise noch einen Schritt weiter bis zur Datenbank, testen. Doch keine Sorge, um solche Tests zu schreiben, müssen Sie kein datenbankaffiner UI-Experte sein. Ganz im Gegenteil: Für den Einsatz einiger Test-Frameworks müssen Sie noch nicht einmal programmieren können. Mit der Selenium IDE können Sie beispielsweise Ihre E2E-Tests aufzeichnen lassen, indem Sie sich durch die Workflows Ihrer Applikation klicken. Der Nachteil dieser Herangehensweise ist, dass die Tests sehr fragil sind. Gerade das Warten auf bestimmte Elemente, bevor Sie mit ihnen interagieren, stellt ein großes Problem dar. Auch sind solche Tests nur schwer anpassbar und werden deshalb bei umfangreicheren Änderungen an der Applikation einfach gelöscht und neu aufgezeichnet. Aus diesem Grund gehen mittlerweile wieder viele Entwicklungsteams dazu über, ihre Tests selbst zu formulieren. Dabei greifen sie auf moderne Test-Frameworks, bestimmte Architekturformen und Best Practices zurück, die die Tests robuster, wartbarer und verständlicher machen. Im Idealfall können Sie einen E2E-Test wie einen ganz normalen Text lesen und so verstehen, wie der getestete Workflow aussieht.

Da E2E-Tests eine lange Laufzeit haben und sie, wenn sie während des Build-Prozesses einer Applikation ausgeführt werden, diesen spürbar verzögern können, weist eine Applikation meist wesentlich weniger E2E-Tests als Unit-Tests auf. Um herauszufinden, welche Teile Ihrer Applikation Sie testen sollten, identifizieren Sie die wichtigsten Workflows Ihrer Applikation. Stellen Sie sich und Ihren Kollegen die Fragen: Welche Features sind für den Erfolg der Applikation entscheidend? Womit verdienen wir unser Geld? Was muss unbedingt funktionieren, damit ein Benutzer die Applikation nutzen kann? Die Antworten auf diese Fragen geben an, was Sie testen sollten. E2E-Tests kommen auch für Routinen in Ihrer Applikation zum Einsatz, die sich mit anderen Tests nicht oder nur mit großem Aufwand überprüfen lassen. E2E-Tests sind außerdem ein Instrument zur Verifikation Ihrer Unit-Tests. Schlägt ein E2E-Test fehl und die Unit-Tests laufen gleichzeitig fehlerfrei durch, ist das ein Indiz dafür, dass ein bestimmter Aspekt noch nicht ausreichend getestet wird. In einem solchen Fall sollten Sie nicht nur dafür sorgen, dass der E2E-Test wieder erfolgreich läuft, sondern auch die Unit-Tests für den entsprechenden Bereich der Applikation auf den Prüfstand stellen. Auf diese Weise erzeugen Sie Sicherheit für die Entwickler, da es zusätzlich zu den Unit-Tests noch eine weitere Absicherung der Applikation gibt.

Cypress

Über viele Jahre hat sich Selenium als Werkzeug der Wahl für die Umsetzung von E2E-Tests etabliert. Selenium stellt die Infrastruktur für E2E-Tests zur Verfügung. Die Tests können in verschiedenen Sprachen wie C#, Java, PHP oder JavaScript verfasst werden. Selenium führt die Tests auf echten Browserinstanzen aus und nutzt dafür bestimmte Schnittstellen und Bindings, die den Zugriff abstrahieren.

Im Vergleich zu Selenium ist Cypress noch relativ jung. Der erste Commit in das Repository erfolgte im Juni 2014. Seit dieser Zeit hat sich viel getan und Cypress wurde um zahlreiche Features ergänzt, sodass es sich mittlerweile um eine vollwertige Lösung für E2E-Tests handelt, die Sie guten Gewissens für Ihre Applikation einsetzen können. Eine Besonderheit von Cypress ist, dass Tests und Applikation gemeinsam und nicht isoliert voneinander ausgeführt werden. Die grundlegende Infrastruktur ist ähnlich wie bei Selenium, da es auch bei Cypress eine Server- und eine Clientkomponente gibt, die kontinuierlich miteinander kommunizieren. Alle beteiligten Komponenten sind jedoch im Gegensatz zu Selenium in JavaScript geschrieben. Die Basis für den Serverprozess bildet ein Node.js-Server. Die Entscheidung für JavaScript als einzige unterstützte Sprache senkt zwar die Hürde für Frontend-Entwickler, erhöht sie jedoch für alle, die einen anderen Sprachhintergrund haben.

Cypress versucht, Ihnen eine Komplettlösung für Ihre E2E-Tests zu bieten, indem es alle Features mitbringt, die Sie zur Formulierung von Tests benötigen. Als zugrunde liegendes Test-Framework kommt Mocha in Kombination mit Chai zum Einsatz. Beide Bibliotheken haben sich vor allem im Node.js-Umfeld mittlerweile seit Jahren bewährt. Da es sich bei Cypress um eine eigenständige Open-Source-Implementierung handelt, sind Sie auch bei den Technologien in Ihrem Zielsystem nicht eingeschränkt. Cypress funktioniert sowohl mit klassischen Multi-Page- als auch modernen Single-Page-Applikationen. Dabei spielt es hier keine Rolle, mit welchem Framework oder welcher Bibliothek die Applikation umgesetzt wurde. Mit Cypress lassen sich sowohl React- als auch Angular- und Vue-Applikationen testen.

Installation und erste Schritte

Die Installation von Cypress erfolgt lokal in Ihrer Applikation mit dem JavaScript-Paketmanager Ihrer Wahl. Nutzen Sie beispielsweise Yarn, installieren Sie Cypress mit dem Kommando yarn add -D cypress. Bevor Sie dieses Kommando ausführen, sollten Sie sicherstellen, dass Ihre Applikation über eine gültige package.json-Datei verfügt. Eine solche können Sie sich mit dem Befehl yarn init -y erzeugen. Die Option -D bei der Installation von Cypress sorgt dafür, dass das Paket als devDependency in Ihre package.json eingetragen wird. Da es sich bei Cypress um ein Test-Framework handelt, da...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang