Akansel Cengiz Logo Akansel Cengiz

Logo from a Cypress Testing pic

Verfasst von Akansel Cengiz

Veröffentlicht am 28.5.2024

08 | Cypress Testing

Wir führen ein Testing durch.


5 Minuten Lesezeit

Vorwort

Wie du weißt, fehlt mir derzeit leider die Zeit, mich intensiver mit diesem sehr interessanten Thema zu beschäftigen.
Trotzdem werde ich mein Bestes geben, um dir alles so verständlich wie möglich zu erklären.

Der Oberbegriff hier lautet Testing Framework, denn es gibt auch das Test Automation Framework. Die Namen klingen zwar fast gleich, haben aber nicht dasselbe Ziel. Ein Testing Framework ist die allgemeine Struktur, die die Methodik und die Standards für das Testen definiert. Es umfasst Richtlinien, Best Practices und Werkzeuge, die den Testprozess unterstützen. Ein Test Automation Framework hingegen ist eine spezielle Art von Testing Framework. Es enthält spezifische Bibliotheken und Tools, um automatisierte Testskripte zu erstellen, auszuführen und zu verwalten. Außerdem ermöglicht es die Integration von CI/CD-Pipelines, wodurch kontinuierliche Integration und Bereitstellung unterstützt werden.

Wofür ist das Testing gut?

Egal ob im Frontend, Backend oder in CI/CD Pipelines ↗️. Testing ist heute aus dem Softwareentwicklungszyklus nicht mehr weg zu denken. Das Testing kommt ins Spiel, um eine saubere und zuverlässige Webseite/App/Software auf den Markt zu bringen und zu garantieren, dass sie flüssig und ohne Probleme läuft. Es ist ein Muss für Entwickler oder QA-Tester mit einem Testing Framework während der Produktion damit zu arbeiten.

Durch Testing können viele Fehler, Bugs und Schwachstellen frühzeitig entdeckt und beseitigt werden. Im späteren Verlauf der Produktion oder am Tag des Rollouts könnten diese ansonsten zu noch größeren Problemen führen. Im schlimmsten Fall müssten wahrscheinlich Entwickler von anderen Projekten abgezogen werden, um sich schnellstmöglich um diese Probleme zu kümmern, damit der Schaden so gering wie möglich bleibt. Dies wiederum verursacht ein anderes Problem: Die Deadline für das aktuelle Projekt kann möglicherweise nicht mehr eingehalten werden.

Ergo: Unnötige KOPFSCHMERZEN !

Ich kenne das Testing z.B. aus der Spielebranche, wenn vor dem Release Beta-Tester gesucht werden, die das Spiel ausgiebig testen und ihr Wissen dann an die Softwarefirma übermitteln. Manchmal hat man aber das Gefühl, dass man bei Spielen unfreiwillig selbst zum Tester geworden ist, weil viele schon so früh verbugt sind. 😂.

Warum Cypress und kein anderes Tool?

Ich habe den Namen Cypress ↗️ in letzter Zeit schon so oft gelesen, dass ich das Testing Framework selbst mal ausprobieren wollte. Astro hat auf seiner Docu Seite ein paar Testing Frameworks aufgelistet, darunter auch Cypress. Das kam mir natürlich wie gelegen. Mein Tipp an dich ist geh am besten direkt auf die Docu Seite von Cypress. Die von Astro ist zwar gut, aber nicht so umfangreich und schlüssiger erklärt wie die von Cypress. Es gibt dort auch gute Erklärvideos.

Und ja ich muss bei dem Namen immer an die Herren von Cypress Hill denken 😂. Cypress Hill

Welche Test Arten bietet Cypress an?

  • End-to-End Tests ↗️ (kurz E2E)
  • Component-Tests ↗️
  • Unit-Tests ↗️
  • Integration-Tests ↗️
  • Welche Testing Progamme gibt es noch?

    Was mir auf Anhieb in den Sinn kommt, wären die hier:

  • Selenium ↗️
  • Mocha ↗️
  • Jasmine ↗️
  • Jest ↗️
  • Ihr könnt mir ruhig glauben, wenn ich euch sage, das dies nur ein kleiner Bruchteil aus dem riesigen Testing Framework Universum ist.

    Hier seht ihr z.B. auch die wöchentlichen Downloadzahlen von NPM ↗️. Selenium scheint das bekannteste Testing Framework zu sein, weil es schon seit 2004 auf dem Markt ist.

    Laut den Zahlen scheint entweder die Beliebtheit zu sinken oder der Markt ist mit Selenium so gesättigt, dass die Entwickler nach vielleicht anderen besseren Alternativen suchen.

    Wäre jetzt auch nur eine Vermutung.

    (Selenium)
    a screenshot shows the selenium weekly downloads from npmjs.com
    (Mocha)
    a screenshot shows the mocha weekly downloads from npmjs.com
    (Jasmine)
    a screenshot shows the jasmine weekly downloads from npmjs.com
    (Jest)
    a screenshot shows the jest weekly downloads from npmjs.com
    (Cypress)
    a screenshot shows the cypress weekly downloads from npmjs.com

    Wie sieht ein Testing und die Syntax aus?

    Hier ist es wichtig zu erwähnen, dass du zwei Terminalinstanzen parallel laufen lassen musst. Wie das geht, zeige ich dir gerne. Das bedeutet z.B. dass du das Astro Projekt mit npm run devstarten kannst, aber in der gleichen Terminalinstanz ein zusätzlicher Start mit Cypress nicht möglich ist.

    Abhilfe schafft hier einfach eine zweite Terminalinstanz.

    (Terminal/Shell…Zwei Terminalinstanzen…Links Astro/Rechts Cypress)
    a screenshot shows the cypress final testing results from the terminal

    Mit Cypress hast du auch die Möglichkeit ein Testing im Terminal oder über einen externen Browser durchführen zu lassen.

    Der Befehl npx cypress run wird auch als headless bezeichnet, da er das Testing in einer Terminalinstanz startet, ohne eine sichtbare Benutzeroberfläche zu öffnen. Auf dem Bild unten siehst du ein abgeschlossenes Testing ohne eine Fehlermeldung.

    (Cypress Terminal/Shell Testing Example Results)
    a screenshot shows the cypress final testing results from the terminal

    Eine automatische Screenshot-Funktion bei Testfehlern, wie im Bild unten zu sehen, ist mit an Bord. Das ist sehr hilfreich für Fehleranalysen, Dokumentationen oder Testüberwachungen. Es gibt auch eine manuelle Screenshot-Funktion sowie die Möglichkeit, ein komplettes Testing auf Video aufzunehmen. Auf dem Screenshot erkennt man schon etwas vom Code.

    (Cypress Terminal/Shell Screenshot)
    a screenshot shows the cypress screenshot function

    Der Befehl npx cypress open startet das Testing in einem externen Browser, indem er das Cypress Test Runner Interface öffnet.

    Cypress Testing Video

    (*Bitte klicke auf das Video. *)

    Mein Fazit

    Puh, das Testing ist echt eine Welt für sich.

    Je mehr ich mich mit Testing Frameworks beschäftigt habe, desto mehr bekam ich das Gefühl, dass es wie mit Programmiersprachen ist. Die Wahl des passenden Frameworks hängt auch von den Projektanforderungen ab. Wie groß oder wie klein ist das Projekt? Jedes Framework hat seine Vor- und Nachteile oder besser gesagt seine Key-Features.

    Das eine funktioniert zum Beispiel sehr gut mit Python (Pytest), das andere mit Java (JUnit) und wiederum ein anderes besser mit JavaScript (Cypress). Das liegt oft daran, dass ein Framework in einer bestimmten Sprache geschrieben wurde und auch für diese Sprache empfohlen wird. Andere Frameworks bieten gleich gute Unterstützung für mehrere Programmiersprachen an. Was mir auch sehr gut gefallen hat, ist die leicht zu verstehende und logische Syntax.


    Tags:

    Astro

    TailwindCSS

    Frontend

    Blog

    Bootstrap

    Google Lighthouse

    React

    HTML

    CSS

    JavaScript

    AWS

    Cloud

    CloudFront

    ACM

    Route 53

    Fonts

    Fontsource

    API

    HTTP-Clients

    JSON

    RandomUser

    Testimonial

    Markdown

    MDX

    Markdoc

    Blogging

    Transitions

    Swup

    Astro Discord Server

    Github

    Version Control

    Repository

    StackOverflow

    Test Automation Framework

    Testing-Framework

    Cypress

    Sitemap

    SEO