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. ​