Software • 09. Februar 2021
Automatisierte End-2-End-Tests mit Cypress: Macht Testing nun Spaß?
Heutige Web-Anwendungen sind meist sehr komplex, daher wird es immer schwieriger ihre Funktion sicherzustellen. End-2-End-Tests versuchen das Verhalten der Nutzerin bzw. des Nutzers auf der gesamten Web-Anwendung möglichst realistisch abzubilden. Durch sie werden Probleme und Bugs gefunden, die bei isolierten Komponententests sog. Unit-Tests nicht auffallen würden.
Es bietet sich an, diese Tests zu automatisieren. So kann während der Weiterentwicklung einer Web-Anwendung diese immer wieder schnell getestet werden - und Mitarbeiterinnen und Mitarbeiter müssen nicht immer wieder die gleichen Testing-Szenarien durchklicken.
Die Erstellung und Pflege dieser Tests ist meist zeitintensiv, kostspielig und wird von Entwicklerinnen und Entwicklern meist als unerfreulich wahrgenommen. Genau dies möchte Cypress ändern: Testen soll nun endlich Spaß machen.
Cypress ist ein JavaScript End-2-End-Testing Framework, welches als Open-Source-Projekt mit MIT-Linzenz auf GitHub zu finden ist. Zusätzlich wird als kommerzielles Produkt ein Dashboard-Service angeboten, welcher über die Basisfunktionen hinaus parallele Testausführung, Statistiken und weitere Funktionen zur Verfügung stellt.
Cypress läuft direkt im Browser parallel zur Anwendung – ohne Netzwerk-Kommunikation, wie man es z. B. von Selenium kennt.
Der Start mit Cypress ist einfach
Installation und Setup dauern nur wenige Minuten, im Anschluss kann es direkt losgehen, der Code der Anwendung muss nicht angepasst werden. Hervorzuheben ist die gute Dokumentation mit vielen Beispielen.
Cypress kommt mit einer grafischen Benutzeroberfläche – dem Testrunner. Natürlich kann auch innerhalb eines Headless-Browsers über die Kommandozeile getestet werden. Vor dem Start der Tests kann zwischen verschiedenen Browsern gewählt werden, unter anderem Chrome und Firefox.
Der Testrunner verfügt über zwei wesentliche Bereiche: In der rechten Hälfte wird angezeigt, was in Echtzeit in der zu testenden Web-Applikation beim Ausführen des Testskripts passiert. Links wird der Test protokolliert. Hovert man über die einzelnen protokollierten Befehle des Test, ist rechts parallel dazu zu sehen, wie die Applikation zu diesem Zeitpunkt aussah.
Diese Zeitreise-Funktion im Testrunner erleichtert es wesentlich Tests zu schreiben und Fehler zu identifizieren. Wird ein Test im Editor verändert und abgespeichert, lädt Cypress automatisch neu und das Resultat ist in Echtzeit im Testrunner zu sehen.
An den obigen zwei Beispielen wird deutlich, wie einfach Code und Protokoll zu lesen sind. Als Programmiersprache wird ausschließlich JavaScript unterstützt, dies soll laut Cypress auch so bleiben.
Fehlermeldungen leicht nachvollziehen
Scheitert ein Test, lässt sich der Fehler leicht nachvollziehen. Meist bietet die angezeigte Fehlermeldung gute Hinweise, zusätzlich hilft ein Link zur Dokumentation. Auch wird ein Ausschnitt aus dem geschriebenem Testskript angezeigt und die Stelle, an der der Test scheitert, im Code markiert. Im folgenden Fall ist das Element, auf das geklickt werden soll für den Benutzer nicht sichtbar.
Zum Stolperstein für Neulinge wird oft das asynchrone Verhalten von Web-Anwendungen. Wer schon einmal mit anderen Testing-Frameworks getestet hat, mag vielleicht bei Begriffen wie ‚explizites Warten’ zusammenzucken. Cypress wartet automatisch, um sich asynchronen Web-Anwendungen anzupassen. Wird beispielsweise ein Element im DOM nicht gefunden, so wird standardmäßig vier Sekunden gewartet, um der Web-Applikation für die Ausführung ausreichend Zeit zu geben. Dieser Timeout kann global oder für einzelne Befehle individuell angepasst werden.
Cypress gibt uns die Kontrolle über HTTP-Requests und deren enthaltene Informationen, sodass sich leicht Assertions über sie treffen lassen. Zudem können Responses gestubbt werden. Natürlich lässt sich ohne dies besser garantieren, dass Client und Server korrekt zusammenarbeiten. Aber das Stubben von Responses erlaubt es auch Tests durchzuführen, für die sonst zuerst aufwendige Datenbanken erstellt werden müssten.
Gibt es auch Nachteile?
Wie schon oben erwähnt, Cypress läuft im Browser. Daher ist es nicht möglich, übergreifend in mehreren Tabs zu testen.
Cypress möchte nicht, dass wir die Funktionen unseres Browser testen - z. B. dass bei vorhandenem Attribut 'target="_blank"' vom Browser ein neuer Tab geöffnet wird. Stattdessen sollen wir testen, ob der Button, der diese Funktion auslösen soll, das benötigte Attribut beinhaltet. Oder wir entfernen das Attribut einfach und testen so im selben Tab weiter:
cy.get('form').invoke('removeAttr', 'target')Ein weiterer Nachteil ist die Tatsache, dass keine zwei unterschiedlichen Domains in einem Test besucht werden können. Cypress passt die eigene Host-URL der URL der zu testenden Web-Applikation an. Wird die Domain innerhalb eines Tests gewechselt, führt dies zu einem Fehler. Dies liegt an den Sicherheitseinstellungen der Browser und kann bislang nur in Chrome umgangen werden, indem man setzt:
"chromeWebSecurity": falseFazit
Um Tests einfach und schnell schreiben und analysieren zu können braucht man ein Testing-Framework, welches uns mit guten Fehlermeldungen und visuellem Feedback unterstützt. Die grafische Benutzeroberfläche von Cypress setzt hier neue Maßstäbe. Wer einmal mit der Zeitreise-Funktion gearbeitet hat, möchte diese nicht mehr missen. Sie hebt Cypress deutlich von anderen Testing-Frameworks ab. Testing macht so einfach Spaß!
