Testing: Akzeptanztests in der Softwareentwicklung mit Cypress
Bei komplexen Anwendungen wird das Testen zunehmend aufwendiger. Ein Framework wie Cypress kann beim Automatisieren der Testabläufe unterstützen.
(Bild: alphaspirit.it/Shutterstock.com)
- Alex Fredekind
Durch das Schreiben von Tests ist es Entwicklern möglich, langfristig qualitativ hochwertige Software zu veröffentlichen. Eine hohe Testabdeckung gewährleistet zudem, dass künftige Regressionstests mit wenig Aufwand aussagekräftige Ergebnisse liefern. Die Schwierigkeit hierbei ergibt sich aus dem wahrgenommenen Mehrwert in der täglichen Arbeit. Ich durfte bei meinen Projekten feststellen, dass insbesondere das Entwickeln neuer Features für ein persönliches Erfolgserlebnis sorgt und die Entwicklung eines Softwareproduktes vorantreibt.
Die Tests bringen kurzfristig zunächst keinen direkten Mehrwert, abgesehen von dem, dass sie die Logik überprüfen und ihre Funktionalität sicherstellen. Langfristig steigt der Mehrwert, sobald das Schreiben von Tests konsequent in die eigene Entwicklung integriert ist. In meiner Arbeit hat sich hierfür Cypress bewährt, da es sich mit wenig Aufwand in Projekte einbinden lässt und ein rasches Erstellen von Tests möglich macht. Neben Cypress gibt es eine Reihe weitere Frameworks, die für das Schreiben von Tests in Frage kommen. Dieser Artikel soll zunächst das noch relativ junge Framework zur Testautomatisierung vorstellen. Anschließend folgt ein Vergleich mit einer möglichen Alternative, dem bereits länger etablierten Testing-Tool Selenium. Die beiden Tools haben jeweils unterschiedliche Eigenheiten, weshalb sie sich für verschiedene Einsatzszenarien eignen, was der Artikel gegen Ende herausarbeiten wird.
Was ist Cypress?
Cypress ist ein Framework für End-to-End-Tests (E2E) in JavaScript, mit dem sich das Nutzerverhalten simulieren lässt, um Workflows durchzutesten. Dabei stehen vier Schritte im Vordergrund: Das Einbinden des Frameworks, das anschließende Schreiben der Tests, ihre Ausführung und das Debugging. In diesem Artikel konzentriere ich mich auf die Vorstellung von Akzeptanztests und auf die ersten drei Schritte des Workflows. Cypress zeichnet sich durch eine sprechende Syntax aus, sodass Entwickler Tests leichter formulieren und nachvollziehen können. Durch die formalisierte Sprache lassen sich Cypress-Tests vorformulieren. Ein Beispiel hierfür wäre die Formulierung der Reihenfolge, in der man die Elemente in der grafischen Benutzeroberfläche (GUI) einer Anwendung verwendet, um einen konkreten Prozess (wie beispielsweise das Anlegen eines Blog-Artikels) durchzuführen. Somit können auch Personen mit weniger ausgeprägtem technischem Hintergrund den Workflow formulieren, und anschließend implementiert ein Entwickler den konkreten Test in Cypress.
Einführung des Beispielprojekt-Blogs
Für das Veranschaulichen der Tests gibt es das Projekt "Blogs". Die Anwendung besteht aus einer einfachen Oberfläche samt Elementen, mit denen Benutzer interagieren können, um beispielsweise einen Dark Mode zu aktivieren oder einen neuen Blogeintrag zu erzeugen. Die Anwendung baut auf Vue.js in Kombination mit Vuetify auf. Vuetify ist ein Material-Design-Framework, um für das eigene Projekt rasch eine Beispielanwendung mit Oberflächenelementen zu erstellen. Cypress ist jedoch nicht an bestimmte Frameworks gebunden. Insgesamt soll es im Beispielprojekt drei Komponenten geben – zunächst einmal die Oberfläche selbst, die in Abbildung 1 zu sehen ist.
Des Weiteren gibt es einen Dialog zum Hinzufügen eines neuen Eintrags, der in Abbildung 2 zu sehen ist. Ein Eintrag besteht hierbei aus einem Titel, einem Material-Design-Icon, dem Content und den Tags. Sobald der Eintrag über den Dialog hinzugefügt ist, erscheint außerdem automatisch das Veröffentlichungsdatum.
Als Erstes werden wir für die bereits vorhandenen Komponenten einen Test implementieren und anschließend eine Erweiterung in Form einer filternden Tag-Cloud entwickeln. Mit den Tests im Hinterkopf lässt sich die Komponente so bauen, dass Tests einfach zu erstellen sind.
