In 5 Minuten zur E2E Website Testing Pipeline mit Cypress.IO

E2E Website Tests mit Cypress.IO sind sehr schnell und dazu auch sehr einfach eingerichtet. Roland Golla – Consultant für Website Testing – hat dafür aktuell ein Open Source Projekt auf GitHub veröffentlicht. Außerdem wurden im Cypress.IO Tutorial auf YouTube, Bugs in einer Hauptnavigation von einem Kundenprojekt gefunden. In diesem folgenden Tutorial-Artikel zeigen wir wie es geht.

Aktuell arbeiten wir auch in Kooperation mit Patrick Schnell.

NPM Install und einen CSS Selektor anpassen – Heute mit Cypress.IO E2E Website Tests starten

Im GitHub Account von TESTIFY – Agentur für Website Testing – gibt es ein Open Source Repository, mit E2E Tests, für das Sulu CMS Projekt. Hier gibt es auch einen Tests, der alle Links in der Main Navigation auf ihren Status 200 validiert und sicherstellt, dass kein Redirect vorliegt. 

Git Clone und Node Packages installieren

git clone && cd tests && npm install

Nachdem ihr das Repo ausgecheckt und alle Pakete installiert habt, kann es auch schon losgehen. Die Tests laufen per default gegen die Startseite von TESTIFY und finden hier erfolgreich einen redirect Bug, der in den kommenden Tagen behoben wird. Auf dem Terminal kann einfach eine eine Environment Variable mit der kompletten URL und dem Pfad zur Startseite gesetzt werden. Das ist zum Beispiel bei Never Code Alone “https://nevercodealone.de/de”.

Alle Settings sind auch ausführlich in der README.md ./node_modules/.bin/cypress open –env „startUrl=https://nevercodealone.de/de“ 

Monitoring mit E2E Tests als Basis für eine eigene GitLab Pipeline

E2E Tests spielen eine ganz wichtige Rolle für die permanente Überprüfung und Sicherstellung des kompletten Funktionsumfangs einer Webseite. Denn wer weiß schon, ob wirklich noch alles läuft. Webapplikationen und Websites kommunizieren mit zahlreichen externen Diensten. Payment Provider, Cookie Consitent Anbieter, Tag Managern, CDNs und vielem mehr. Die hier genannten, haben bei unseren Kunden alle schon Probleme gemacht. Und wie schön ist es, alle 2 Stunden eine Message in Slack zu bekommen, dass auch wirklich alles läuft. Bei einem Error gibt es das direkt als Video. Der Klick Flow wird, mit allen API Requests, vollständig dokumentiert und wenn der Provider mehr als 5 Sekunden für die Antwort gebraucht hat, dann ist das zu 100% belegt. Dann gibt es keine Ausreden mehr.

Wir haben keine Zeit aber warum habt ihr die für manuelle Tests

Manche haben Ausreden und andere haben Antworten. Ausreden keine automatischen Tests und Pipelines einzusetzen sind zahlreich, dabei lenken sie sehr oft von der Wahrheit ab. Das ist einfach fehlendes Know-how in der Entwicklungsabteilung. Die Ursache darin liegt vor allem in vorbehalten, welche über die eigentliche Test Framework Technologie, die Infrastruktur bis hin zum eigenen Projekt reichen. Auf unserem Instagram-Kanal und auf dem NCA-YouTube Kanal, klären wir aktuell über Website Testing auf und zeigen, wie es richtig geht. E2E Tests sind sehr gut, brauchen praktisch keine Infrastruktur, sind sehr leicht zu programmieren und können auch in Frontends ohne spezielle Selektoren sehr stabil und zuverlässig gemacht werden.

Fazit für einen guten Start mit E2E Website Testing

E2E Website Testing ist schneller aufgesetzt als Ausreden aufgezählt sind. Die Tests können ganz einfach in die vorhandene Infrastruktur integriert werden. Cypress.IO ist das derzeit mit Abstand beste Javascript Testing Framework und hat tolle Features für zuverlässige Tests. Wir hatten aufgezeigt, dass automatisierte Deployments und Tests einen wichtigen USP im aktuellen Agenturgeschäft abbilden. Insgesamt war es noch nie so einfach mit Nachhaltigkeit in der Softwareentwicklung anzufangen. Das macht Kunden und das eigene Team glücklich und es entsteht von vielen Seiten große Wertschöpfung.