CostumY ist eine von mir entwickelte Webanwendung, die Module für Kundenverwaltung, Terminplanung und Dokumentenmanagement umfasst. Sie soll uns hier als weiteres Beispiel für die Automatisierung von UI-Tests dienen.
Als passionierter Testautomatisierer habe ich kürzlich mal wieder ein neues Projekt aufgesetzt, das eine von mir programmierte Webanwendung mit typischen CRM-Funktionalitäten wie Kundenverwaltung, Terminplanung und Dokumentenmanagement automatisiert testet. Die Anwendung habe ich CostumY getauft und ist im Laufe meiner JavaScript-Lernphase aus eigener Initiative entstanden.
Das Projekt hier soll zeigen, wie sich UI-Tests mit Selenium und Mocha effizient aufsetzen und sowohl lokal als auch im Rahmen einer modernen CI/CD-Pipeline zuverlässig und skalierbar ausführen lassen. Zur Erstellung eines ausführlichen Testberichts habe ich dieses Mal den Allure-Report genutzt, dazu später mehr. Nun aber viel Spaß mit dem Beitrag!
Das ist CostumY
Verwendeter Technologie-Stack zur Automatisierung
| Technologie | Zweck |
|---|---|
| Selenium | Für Browser-Automatisierung |
| JavaScript | Programmiersprache |
| Mocha | Test-Framework |
| Allure Reports | Erweiterte Test-Visualisierung |
| Jenkins | Automatisierter Build und Testlauf |
Das Testprojekt
Das gesamte Projekt läuft in Visual Studio Code.
Alle wichtigen Dateien und Ordner sind so organisiert, dass der Entwicklungsprozess reibungslos verlaufen kann. Hier eine kurze Übersicht:
├── allure-results/
├── driverSetup.js
├── jw_notes/
├── package.json
..und sämtliche Tests in:
└── tests/
-
allure-results/: Dieser Ordner enthält die Ergebnisse, die nach dem Testdurchlauf erzeugt werden, und wird von Allure Reports verwendet, um die Testergebnisse zu visualisieren.
-
driverSetup.js: Hier wird der WebDriver initialisiert, um die Browser-Automatisierung durchzuführen. Durch die Zentralisierung der WebDriver-Initialisierung möchte ich sicherstellen, dass alle Tests denselben Browser-Treiber verwenden und keine redundante Codezeile notwendig sind.
-
jw_notes/: Hier befinden sich persönliche Notizen und nützliche Kommandos, die während der Entwicklung und beim Testen hilfreich sind. Diesen Ordner habe ich standardmäßig in fast all meinen Projekten. : p
-
package.json: Diese Datei verwaltet alle Projektabhängigkeiten und Skripte, die in Verbindung mit der Automatisierung stehen.
-
tests/: Dieser Ordner enthält alle Testskripte, die die verschiedenen Funktionalitäten der Anwendung abdecken. Da die Testanzahl überschaubar ist, habe ich diesmal alle Tests in einem einzigen Verzeichnis zusammengefasst.
Testabdeckung
Das Projekt deckt derzeit folgende Anwendungsbereiche ab, und kann künftig entsprechend erweitert werden:
| Modul | Testdateien |
|---|---|
| Kundenverwaltung | kundenverwaltungAdd.js, kundenverwaltungDelete.js |
| Kundenhistorie | kundenhistorieAdd.js, kundenhistorieDelete.js |
| Aufgabenverwaltung | aufgabenverwaltungAdd.js, aufgabenverwaltungDelete.js |
| Dokumentenverwaltung | dokumentenverwaltungAdd.js, dokumentenverwaltungDelete.js |
| Kalender und Termine | kalenderterminShowDetails.js, terminplanerAdd.js, terminplanerDelete.js |
| Menü und Footer | menuandfooterCheck.js |
| Map (Leaflet) | anfahrtkundeVisible.js |
Ausführung der Tests
Die Ausführung der Tests wird durch den scripts-Befehl in der package.json gesteuert. Dies ermöglicht eine nahtlose Integration und eine einfache Handhabung der Testprozesse. Der Befehl im Abschnitt scripts ermöglicht es, die Tests mit nur einem einzigen Kommando zu starten und dabei die dafür notwendigen Optionen wie den Reporter für Allure anzugeben.
Ein Auszug im Folgenden:
package.json:
Mit diesem Befehl wird Mocha verwendet, um die Tests auszuführen, und das Ergebnis wird direkt in einem Format aufgezeichnet, das von Allure für detaillierte Berichterstattung genutzt werden kann. So wird der gesamte Testprozess – von der Ausführung bis zum Reporting – automatisiert und optimiert. Bevor wir uns die Berichte genauer anschauen wollen, hier noch ein Auszug aus der Konsole, nachdem ich nun den Befehl npm test ausgeführt habe.
Abschließendes Reporting mit Allure
Ich bin ein großer Fan von Allure Reports, denn man erhält schnell eine benutzerfreundliche, visuelle Aufbereitung der Testergebnisse. Zusätzlich wird die Dauer jedes Tests sowie eine strukturierte Darstellung der Testfälle geboten, die direkt auf die Fehlerursache verlinkt. Na gut, dann lasst und mal einen Report erstellen und uns das Ganze etwas genauer anschauen. Ich verwende dafür den Befehler npx allure serve allure-results, sodass der Allure-Testreport aus den Ergebnissen im Ordner allure-resultsgeneriert wird und ein lokaler Webserver gestartet sowie der Report im Browser automatisch geöffnet wird.
Nachfolgend möchte ich Einblick in die Testergebnisse geben:
Alles super hier : ) – Wie könnte es weitergehen?
Ausblick: CI/CD-Integration mit Jenkins und Allure Report
Obwohl dieses Projekt derzeit nur lokal in VS ausgeführt wird, könnte es leicht auf einem Server mit Jenkins und Allure Report integriert werden. Jenkins würde automatisch die Tests bei jeder Codeänderung ausführen und den Allure Report generieren, der detaillierte Testdaten und Fehlerursachen anzeigt. So könnten alle Tests regelmäßig und automatisiert geprüft werden. Diese CI/CD-Integration würde es ermöglichen, Fehler frühzeitig zu erkennen und die Softwarequalität auf Abruf eines Servers kontinuierlich zu sichern.