6. Cypress End-to-End-Testframework

6.1. Einführung

6.1.1. Allgemein

Cypress ist ein modernes End-to-End-Testframework für Webanwendungen. Es wurde entwickelt, um Entwicklern dabei zu helfen, automatisierte Tests zu schreiben, die den gesamten Ablauf einer Anwendung abdecken. Mit Cypress kann man sicherstellen, dass alle Komponenten und Funktionen der Webanwendung wie erwartet zusammenarbeiten.

Es zeichnet sich durch seine einzigartige Architektur und Benutzerfreundlichkeit aus. Im Gegensatz zu anderen Testframeworks arbeitet Cypress sowohl im Backend als auch im Frontend einer Anwendung. Es läuft direkt im Browser und hat dadurch Zugriff auf alles, was im Browser passiert. Cypress kann auf DOM-Elemente zugreifen, Netzwerkanfragen überwachen und mit der Benutzeroberfläche interagieren.

6.1.2. Vergleich Selenium

Das Testframework Selenium existiert schon seit 2004 und ist ein etabliertes Produkt mit einer großen Nutzerbasis weltweit. Cypress hingegen ist seit 2014 als Newcomer auf dem Markt.

Vorteile von Cypress gegenüber Selenium

  • Testumgebung wird automatisiert aufgesetzt. Selenium benötigt einige vorbereitende Schritte für die erste Ausführung.

  • Deutlich schnellere Ausführungsgeschwindigkeit durch direkte Integration in Browser Prozess statt Kommunikation Webdriver-Protokoll

  • Automatisierte Waits. Das Warten auf das Erscheinen eines bestimmten Elements muss nicht manuell definiert werden, sondern findet automatisiert statt.

Nachteile von Cypress gegenüber Selenium

  • Fehlende Unterstützung für Safari-Browser. Ist allerdings aktuell schon als experimentelle Version verfügbar.

  • Kein End-to-End-Testing gegen mobile Geräte mit dem Betriebssystem Android und iOS möglich. Mit Selenium können gemeinsam genutzte Tests für Mobile und Web geschrieben werden.

6.2. Vorbereitungen

6.2.1. Cypress installieren

Cypress ist als Node-Paket verfügbar und wird mit npm zu den Dev-Dependensies hinzugefügt:

npm install cypress --save-dev

Oder kann mit yarn installiert werden:

yarn add cypress --dev

6.2.2. Cypress initialisieren

Anschließend kann mit

npx cypress open

die grafische Benutzeroberfläche aufgerufen werden.

_images/cypress_open.png

Mit Klicken auf e2e-Testing wird der benötigte cypress Ordner und Konfigurationsdateien generiert.

_images/select_browser.png

Cypress unterstützt für die DevTools Chrome, Edge und Electron. Nach dem Auswählen des gewünschten Browsers kann man nun mit dem Schreiben oder Aufzeichnen der Tests beginnen.

6.3. Kernkonzepte & Komponenten

Test Runner

Cypress verfügt über einen integrierten Test Runner, der die Ausführung und Verwaltung von Tests erleichtert. Der Test Runner bietet Echtzeit-Updates, automatisches Neuladen der Seite bei Änderungen, Fehlerberichte und eine visuelle Darstellung der Testergebnisse.

_images/test-runner.png

Deklarative Syntax

Cypress verwendet eine deklarative Syntax zum Schreiben von Tests. Dies ermöglicht eine klare und verständliche Beschreibung des gewünschten Verhaltens der Anwendung. Die Tests werden in JavaScript oder TypeScript geschrieben.

_images/declarative_syntax.png

Zeitreisen und Debugging

Cypress ermöglicht das Debuggen von Tests in Echtzeit. Entwickler sind in der Lage Haltepunkte zu setzen, den Zustand der Anwendung untersuchen und Befehle schrittweise auszuführen, um Fehler zu finden und zu beheben.

_images/cypress_debugging.png

DOM-Manipulation und -Kontrolle

Cypress ermöglicht eine direkte Manipulation und Kontrolle des DOMs (Document Object Model) der Anwendung. Entwickler können Elemente auswählen, darauf klicken, Text eingeben und viele andere Aktionen ausführen, um das Verhalten der Anwendung zu testen.

_images/hover.gif

Parallele Testausführung

Cypress ermöglicht die parallele Ausführung von Tests auf verschiedenen Browsern und Geräten. Dadurch können Tests effizienter ausgeführt werden und die Testdauer wird reduziert.

_images/parallel.png

Video- und Screenshot-Erfassung

Cypress bietet die Möglichkeit, Videos und Screenshots von Testläufen automatisch zu erfassen. Dies erleichtert die Fehleranalyse und ermöglicht es Entwicklern, visuell zu überprüfen, ob die Anwendung den erwarteten Zustand erreicht hat.

_images/screenshot.png

6.4. Versuchsdurchführung

Website

Zunächst braucht man eine Website, die man testet. Dafür haben wir eine kleine Anmeldemaske gebaut, die überprüft, ob die Anmeldedaten stimmen, und demensprechend eine Meldung ausgibt:

_images/webapp.PNG

Diese lassen wir auf einem lokalen Server laufen. Es wäre aber auch möglich eine beliebige Website im Internet zu testen.

Tests erstellen

Anschließend benötigen wir eine Testkonfiguration. Das ist eine Datei mit der Endung .cy.js

Man kann eine neue Testgruppe anlegen mit dem Befehl:

describe("Web-App Test", () =>{

Nun kann man zwischen den Klammern neue Tests konfigurieren:

describe("Web-App Test", () =>{

Jeder Test fängt damit an, die zu Testende Seite zu Besuchen:

cy.visit('localhost:300')

Im ersten Test überprüfen wir, ob alle gewünschten Objekte auf der Website vorhanden sind:

cy.contains('Meine Webanwendung')
cy.contains('Benutzername:')
cy.get('input#username').should('exist');
cy.contains('Passwort:')
cy.get('input#password').should('exist');
cy.contains('Einloggen')

Bei den meisten Objekten reicht ein simples contain(inhalt), lediglich bei komplexeren Objekten muss man nach dem HTML-Tag suchen.

In weiteren Tests prüfen wir, ob Buttons bzw. Textfelder richtig funktionieren, z.B.:

it('Correct Input Data', () => {
    cy.visit('localhost:300')
    cy.get('input#username').type('hsa')
    cy.get('input#password').type('2023')
    cy.contains('Einloggen').click()
    cy.contains('Erfolgreich eingeloggt!')
})

Mit dem type() Befehl kann man ein Textfeld ausfüllen, und mit click() einen Button betätigen.

Tests ausführen

Anschließend kann man in Cypress seine Testkonfiguration auswählen:

_images/choose_config.PNG

Man kann live beim ausführen der Tests zusehen:

_images/live_preview.PNG

Nach dem ausführen aller Tests kann man die Ergebnisse Einsehen:

_images/test_results.PNG

Cypress hat eine Hot-Reload Funktion, d.h. wenn man eine Konfiguration abändert und speichert, führt Cypress direkt die abgeänderten Tests aus.

6.5. Fazit

Zusammenfassend bietet Cypress ein leistungsstarkes und benutzerfreundliches End-to-End-Testframework für Webanwendungen. Mit seiner einzigartigen Architektur, Live-Reload-Funktion, „Time Travel“-Möglichkeit und Erweiterbarkeit ist Cypress eine großartige Wahl, um die Qualität deiner Webanwendung sicherzustellen und die Effizienz deines Testprozesses zu verbessern.

6.6. Literaturangaben

Informationen:

Cypress Doc: https://docs.cypress.io/

Bilder: