Testautomatisierung mit Cypress - Automatisierte End-to-End Tests (E2E)

Was ist Cypress?

In diesem Artikel möchten wir Ihnen das Testingframework Cypress vorstellen. Seit der Erstveröffentlichung in 2017 ist Cypress zu einer Schlüsselfigur im Testingumfeld geworden: Mit mehr als 4.000.000 wöchentlichen Downloads ist es ohne Zweifel eines der beliebteren Packages in npm, dem Paketmanager für Node.js. Bei Cypress handelt es sich um ein Framework zum Testen von Webanwendungen oder von in JavaScript geschriebenen Komponenten. Die verwendete Plattform von Cypress ist Node.JS, die Sprache zum Schreiben der Testfälle ist JavaScript. Cypress wurde für zwei mögliche Anwendungsfälle entwickelt: Für End-to-End Tests (E2E) von Webanwendungen und für Unit Tests für JavaScript-Code.

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. Technisch gesehen 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 die Plattform Node.JS auf Ihrem PC installiert sein. Anschließend können Sie in einem beliebigen JavaScript-Projekt Cypress mittels eines einzigen Befehls installieren. Während des Installationsvorgangs bietet Cypress Ihnen eine graphische Benutzeroberfläche, mittels derer Sie die Konfiguration von Cypress vornehmen können. Dies gestaltet den Installationsvorgang sehr einfach, da das Setup von Cypress automatisiert durchgeführt wird und Sie nach dem Installationsvorgang direkt mit dem Schreiben Ihrer Testfälle starten können. Nebenbei unterstützt Cypress die gängigsten Browser wie etwa Firefox, Edge und Chrome. Es müssen keine Treiber für die unterstützen Browser 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 Loginprozess. Innerhalb der Szenarien lassen sich End-to-End Testfälle definieren, die wiederum Testschritte enthalten.

Das Schreiben von Testfällen in Cypress folgt dem Ansatz der strukturierten Skripterstellung. Die Testfälle werden in reinem JavaScipt-Code verfasst, jedoch stellt Cypress eine umfangreiche Bibliothek zum Abfragen und Manipulieren der Website zur Verfügung.

Wiederverwendbarkeit von Testskripten

Dadurch, dass Testfälle in Cypress in reinem JavaScript-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 Debuggen von Testfällen.

Image

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 an, den Testfortschritt über die Konsole auszugeben. 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:

Am Ende der Ausführung gibt Cypress eine Zusammenfassung der Ergebnisse der Testszenarien aus.

Cypress 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 Elementes angeben. In unserem Beispiel haben wir so beispielsweise 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. Beim Unit-Tests sowie bei den E2E-Testfällen sind dies die erwarteten und die tatsächlich erhaltenen Ergebnisse, bzw. die aufgetretene Fehlermeldung.

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:

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 von Cypress 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.

Noch einen weiteren Vorteil bietet Cypress gegenüber Selenium durch automatisierte Waits. 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 von Cypress gegenüber Selenium ist die fehlende Unterstützung des Safari-Browsers, Opera und des Internet Explorers. Während die fehlende Unterstützung für den Internet Explorer noch verkraftbar ist, da der Internet Explorer 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 den Test von Webanwendungen schreiben, für Cypress ist dies nicht möglich.

Webinar: Cypress Testautomatisierung & Xray in der CI/CD

Testautomatisierung mit Cypress: Fazit

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 zum Einsatz bringen.

Image