.. include:: global.rst Cypress End-to-End-Testframework ================================ .. index:: Cypress Einführung ---------- 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. 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. Vorbereitungen -------------- Cypress installieren ____________________ Cypress ist als Node-Paket verfügbar und wird mit `npm` zu den Dev-Dependensies hinzugefügt: .. code-block:: bash npm install cypress --save-dev Oder kann mit `yarn` installiert werden: .. code-block:: bash yarn add cypress --dev Cypress initialisieren ______________________ Anschließend kann mit .. code-block:: bash npx cypress open die grafische Benutzeroberfläche aufgerufen werden. .. image:: img/experiment6/cypress_open.png :width: 100% Mit Klicken auf e2e-Testing wird der benötigte cypress Ordner und Konfigurationsdateien generiert. .. image:: img/experiment6/select_browser.png :width: 100% 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. 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. .. image:: img/experiment6/test-runner.png :width: 100% **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. .. image:: img/experiment6/declarative_syntax.png :width: 70% **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. .. image:: img/experiment6/cypress_debugging.png :width: 100% **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. .. image:: img/experiment6/hover.gif :width: 100% **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. .. image:: img/experiment6/parallel.png :width: 100% **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. .. image:: img/experiment6/screenshot.png :width: 50% 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: .. image:: img/experiment6/webapp.PNG :width: 70% 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: .. code-block:: bash describe("Web-App Test", () =>{ Nun kann man zwischen den Klammern neue Tests konfigurieren: .. code-block:: bash describe("Web-App Test", () =>{ Jeder Test fängt damit an, die zu Testende Seite zu Besuchen: .. code-block:: bash cy.visit('localhost:300') Im ersten Test überprüfen wir, ob alle gewünschten Objekte auf der Website vorhanden sind: .. code-block:: bash 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.: .. code-block:: bash 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: .. image:: img/experiment6/choose_config.PNG :width: 20% Man kann live beim ausführen der Tests zusehen: .. image:: img/experiment6/live_preview.PNG :width: 70% Nach dem ausführen aller Tests kann man die Ergebnisse Einsehen: .. image:: img/experiment6/test_results.PNG :width: 50% 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. 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. Literaturangaben ---------------- **Informationen:** Cypress Doc: https://docs.cypress.io/ **Bilder:** * test-runner: https://docs.cypress.io/guides/core-concepts/cypress-app * manipulation-the-dom: https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/ * parallelization: https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/ *