Testen von Angular Anwendungen mit Cypress

In diesem Blogbeitrag möchte ich euch das vollautomatisierte Testen von Angular Anwendungen mit Cypress vorstellen.

Was ist Cypress?

Cypress ist ein End-to-End Testing Framework, mit dem man einfache Tests erstellen kann, die in Echtzeit ausgeführt werden. Mit Cypress kann man auch Snapshots von den einzelnen Schritten während der Testausführung sehen. Tests können schnell erstellt werden, ohne dass bestimmte Server oder Driver benötigt werden.
Der große Vorteil von Cypress ist, dass man nicht alles separat installieren muss, sondern ein vollständiges Framework nutzen kann. Ansonsten würde man erst ein Framework benötigen, wie z.B. Jasmine oder Karma, dann Selenium installieren, einen Selenium Wrapper und zusätzliche Bibliotheken hinzufügen müssen. 

Demo-Anwendung

Für ein Kundenprojekt haben wir eine Demoanwendung in Angular geschrieben, um das End-to-End Testing mit Cypress zu demonstrieren. Die Anwendung besteht aus einem Eingabeformular, mit dem man einen neuen User anlegen kann, einer Liste, in der bisher erstellte User angezeigt und auch wieder gelöscht werden können und Dialogen mit Informationen über die Anwendung. 
Das Eingabeformular wurde mit Angular Material erstellt und enthält verschiedene Pflichtfelder. Wenn die Felder ausgefüllt wurden, kann man den neuen User speichern und es erscheint eine grüne Toastr-Nachricht. Ansonsten wird eine Fehlermeldung angezeigt, dass nicht alle Felder ausgefüllt wurden. Über den Clear-Button können die Formular-Einträge wieder gelöscht werden. 

Verwenden von Cypress

Um das Eingabeformular zu testen, werden Cypress-Tests geschrieben, die Eingaben simulieren. Um Cypress verwenden zu können, muss man es zunächst über das folgende Angular CLI Kommando installieren: npm install cypress --save-dev
Cypress wird dadurch lokal als Dev-Dependency installiert. Wie jedes andere npm package wird Cypress dem node_modules Ordner hinzugefügt.

Cypress End-to-End Testing

Es gibt zwei Modi, Cypress zu verwenden: über die GUI im Browser und im Headless mode.
Um Cypress im Browser auszuführen, braucht man in Visual Studio Code zwei Terminals: In dem einen muss der Browser laufen und in dem anderen laufen die Cypress Tests.
Die Befehle zum Starten der Tests im Headless mode oder in der GUI kann man auch in der package.json definieren und zusätzliche Parameter angeben: 

Der Befehl npm e2e startet die Anwendung z.B. in der Mock-Umgebung, damit die Daten nicht in die tatsächliche Datenbank geschrieben werden, sondern nur im Local Storage gespeichert werden.
Um die Cypress Tests in der GUI auszuführen, nimmt man den Befehl npm cypress:open und um die Tests im Headless mode zu starten, den Befehl npm cypress:run.
Im Beispiel werden alle Tests ausgeführt, die sich in dem Ordner befinden (*.spec.js). 

Schreiben eines Cypress-Tests

Dieser Test überprüft die Funktionalität des Eingabeformulars. Bevor die Tests ausgeführt werden, muss zu der Localhost-Seite navigiert werden:

Da es in diversen Tests erforderlich ist, einen neuen User zu erstellen, wurde dafür eine eigene Funktion erstellt: createNewUser(cy). In der Funktion createNewUser(cy) werden die Felder automatisiert mit Testdaten ausgefüllt:

Anschließend wird validiert, ob die eingegebenen Werte korrekt sind:

Um den User zu speichern, wird der Klick auf den Submit-Button simuliert:

Cypress e2e Testing in der GUI

Nach Eingabe des Kommandos npm run cypress:open öffnet sich die Test Suite, in der man verschiedene Tests auswählen kann. 

Die Tests werden sequenziell abgearbeitet. Wenn die Tests erfolgreich waren, werden sie grün markiert. 

Testen der Eingabefelder in der UserForm 

Während des Tests werden die in der Testdatei definierten Beispielwerte automatisch durch die Cypress Test Suite in die Felder eingetragen: 

Jedes Feld der UserForm hat eine Id, über die es im Test adressiert werden kann: 

Der Wert "Cypress FirstName" wird in das Feld mit der entsprechenden Id eingegeben. 

Testen des Submit-Buttons

Um den Submit-Button zu testen, wird ein Klick auf den Submit-Button simuliert. Da nicht jedes Feld im Test ausgefüllt wurde, wird erwartet, dass eine Fehlermeldung erscheint. 

Cypress e2e Testing im Headless Mode

Eine andere Möglichkeit ist, Cypress im Headless mode auszuführen: npm run e2e.
Die Tests werden im integrierten Terminal von Visual Studio Code ausgeführt, statt einen Browser zu öffnen. 

Integration in Azure DevOps 

Die Cypress Tests können in Azure DevOps integriert werden, indem man sie automatisiert über die Build Pipeline laufen lässt. Nach jedem Merge in Develop wird die Build Pipeline getriggert (Continuous Integration) und führt dann die UI und Unit Tests aus. Die Tests laufen im Headless mode, da in der Pipeline die Browserunterstützung fehlt. Durch die Build Pipeline wird die Anwendung automatisiert gebaut. Notwendige npm packages werden installiert, Linting Regeln werden für das gesamte Projekt überprüft und anschließend werden die Unit Tests ausgeführt, die prüfen, ob die Funktionalität der Komponenten korrekt ist. Mit Hilfe der Cypress e2e Tests wird das User Interface geprüft. In Azure DevOps lassen sich die Ergebnisse der Tests und die Codeabdeckung direkt anzeigen, wenn man die entsprechenden Tasks verwendet. 

Fazit

Mit Cypress kann man eine Angular Anwendung auf einfache Weise testen. Die Tests sind schnell erstellt und man spart sich manuelle Eingaben. Es können alle Aktionen simuliert werden, die ein User auf der Seite durchführen würde. Auch fehlerhafte Eingaben oder unerwartetes Verhalten können auf diese Weise automatisiert getestet werden. Es lässt sich zudem gut debuggen, weil jeder Schritt des Tests nachvollzogen und in den Snapshots angesehen werden kann. Zusätzlich kann auch die Performance der Anwendung über Cypress getestet werden. ​

Erfahren Sie mehr

DevOps und Container
Blog
Blog

DevOps und Container

DevOps an sich ist nicht an eine Technologie gebunden, jedoch haben sich Container-Technologien und DevOps als Verwandte im Geiste gefunden.

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow
Blog
Blog

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow

Die Power Platform wird aktuell von Microsoft sehr stark gepusht. Zeit, sich mit dem Potenzial der einzelnen Komponenten zu beschäftigen. Heute: Flow.

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks
Blog
Blog

PowerApps – Neuigkeiten, Übersicht, Tipps & Tricks

Neues aus der Welt von PowerApps

May
04
novaCapta auf der dotnet Cologne
Event
Event

novaCapta auf der dotnet Cologne

In nächster Nachbarschaft zu unserem Kölner Büro findet am 04. und 05. Mai die dotnet Cologne im KOMED statt. Wir von der novaCapta sind auch dabei.

DevOps und „The Phoenix Project“
Blog
Blog

DevOps und „The Phoenix Project“

Buchvorstellung "Projekt Phoenix: Der Roman über IT und DevOps - Neue Erfolgsstrategien für Ihre Firma" von Gene Kim.

Office 365 Groups als Evolution von SharePoint?
Blog
Blog

Office 365 Groups als Evolution von SharePoint?

Zusätzlich zu SharePoint erlauben die Office 365 Groups es mir als Anwender, schnell und einfach neue Gruppen anzulegen und selbständig Benutzer hinzuzufügen.

Das neuste Mitglied der Office 365 Familie: Delve
Blog
Blog

Das neuste Mitglied der Office 365 Familie: Delve

Microsoft legt nach: Mit Delve startet eine neue Form des Suchens und des Auffinden von Dokumenten und Informationen.

Azure Functions: Der Webservice ohne Webserver
Blog
Blog

Azure Functions: Der Webservice ohne Webserver

Azure Functions als Authentifizierungs-Helfer für clientseitige Lösungen mit 3rd Party APIs

Paket Dependency Manager für .NET
Blog
Blog

Paket Dependency Manager für .NET

Paket ist ein Dependency Manager für .NET, welcher es sich zum Ziel gesetzt hat einige Probleme von NuGet zu beheben.

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest
Blog
Blog

Sprechen Sie LUIS? – Der intelligente Chat-Bot im Praxistest

Mit LUIS, der Sprach- und Texterkennungssoftware von Microsoft, und dem Bot Framework von Azure haben wir eine Lösung für den IT-Support entwickelt.

Jan
25
Webcast mit Microsoft: Fit für die digitale Arbeitswelt
Webinar
Webinar

Webcast mit Microsoft: Fit für die digitale Arbeitswelt

Die digitale Transformation und die Veränderung der Arbeitswelt ist längst in vielen Unternehmen und in den öffentlichen Einrichtungen angekommen. Dennoch stell...

Theobald Software neuer Partner von novaCapta
News
News

Theobald Software neuer Partner von novaCapta

Komplexe SAP-Prozesse direkt in SharePoint durchführen – dabei unterstützt uns unser neuer Partner Theobald Software.