In diesem Tutorial werden wir das Cypress Automation Framework im Detail besprechen. In diesem Artikel werden wir behandeln, was Cypress ist, wie es sich von anderen Testframeworks unterscheidet, die Architektur von Cypress und das Installationsverfahren. Zypresse ist ein spannendes Thema und macht auch Spaß zu lernen. Lass uns anfangen!

Cypress-Automatisierungsframework

Cypress Automation Framework ist ein reines Javascript-basiertes Testtool, das sich hauptsächlich auf Frontend-Tests in modernen Webanwendungen konzentriert. Mit Cypress können Anwendungen einfach mit der visuellen Benutzeroberfläche getestet werden, um die Testausführung mitzuerleben. Daher ist Cypress sowohl für Entwickler als auch für QA-Ingenieure ein Segen, da es das Schreiben von Skripten und die Testausführung vereinfacht. Darüber hinaus kommt es mit einem markanten Test Runner, der die DOM-Manipulation einfach macht und direkt im Browser läuft.

Inhaltsverzeichnis

Was ist Zypresse?

Cypress ist schneller, besser und bietet definitive Tests, die auf einem Browser ausgeführt werden. Cypress wird hauptsächlich mit Selenium verglichen, aber es ist völlig anders. Cypress läuft nicht auf Selenium, was bedeutet, dass es völlig unabhängig ist. Stattdessen läuft Cypress auf Mocha, das wiederum ein Javascript-reiches Test-Framework ist. Es ist nur mit der Chai Assertion Library kompatibel, die auf eine Vielzahl von BDD- und TDD-Assertionen zugreifen kann.

Cypress konzentriert sich hauptsächlich auf drei verschiedene Arten von Tests. Sie sind End-to-End-Tests, Unit-Tests und Integrationstests. Cypress kann alle Tests ausführen, die in einem Browser ausgeführt werden können. Darüber hinaus bietet es verschiedene Mocking-Funktionen und Validierungen, die von Front-End-Tests begeistert sind.

Die von Cypress unterstützten Browser sind Chrome, Firefox, Edge, Electron und Brave. Darüber hinaus sind Cross-Browser-Tests mit Cypress problemlos möglich. Obwohl Cypress nur Javascript unterstützt, kann es auch mit Typescript geschrieben werden, hauptsächlich mit Javascript.

Zypresse-Automatisierung

Cypress ist ein Open-Source-Tool mit einem kostenlosen Test Runner, hat jedoch Preise für Teams und Unternehmen, bei denen Sie das Dashboard in Rechnung stellen. Dashboard ist jedoch bis zu einem gewissen Grad kostenlos, es sei denn, Sie verfügen über zusätzliche Funktionen wie Flake-Erkennung, E-Mail-Unterstützung, Jira-Integration und vieles mehr.

Cypress wird hauptsächlich verwendet, um Skripte im Web zu automatisieren (kann alles automatisieren, was in einem Browser ausgeführt wird). Es kann niemals auf nativen mobilen Apps ausgeführt werden, kann jedoch einige der Funktionen der mobilen Anwendungen automatisieren, wenn diese in einem Browser entwickelt werden.

Eigenschaften

In Cypress stehen viele großartige Funktionen zur Verfügung, die sich von jedem anderen Automatisierungstool abheben. Lassen Sie uns hier einige der Hauptfunktionen besprechen, und wir werden später in andere Teile eingeführt, sobald wir mit dem Schreiben unserer Testfälle beginnen!

1. Automatisches Warten – Cypress hat den Vorteil des automatischen Wartens. Wir werden niemals Force Waits und Sleeps hinzufügen müssen, um darauf zu warten, dass das DOM das Element abholt. Cypress wartet automatisch auf jede Interaktion mit Elementen und die Ausführung von Assertions. Somit sind Tests schnell!
2. Zeitreise – Cypress erstellt Screenshots während der Testausführung. Wir können die Ergebnisse visuell in Echtzeit anzeigen, indem wir einfach mit der Maus über die ausgeführten Befehle im Dashboard fahren. Auf diese Weise sind die Tests einfacher zu debuggen
3. Debugging-Tests – Cypress kann Tests von gängigen Tools wie Entwicklertools debuggen. Die Fehler sind lesbar und Stapel sind leicht nachvollziehbar.
4. Stub-Anfragen – Cypress bietet Optionen zum Bestätigen und Steuern von Funktionsverhalten, Netzwerkreaktionen oder Timern, die von Stubs und Spionen verwendet werden.
5. Kontinuierliche Integration – Cypress ist nicht von anderen zusätzlichen CI-Diensten abhängig. Beim Ausführen des Befehls für den Test ist die Integration jedoch leicht zugänglich.

Mythos über Zypresse

Es gibt einen Mythos, dass Cypress nur auf Javascript-freundlichen Webanwendungen ausgeführt werden kann. Cypress kann jedoch alle Webanwendungen testen, die mit Django, Ruby on Rails, Laravel usw. erstellt wurden. Darüber hinaus unterstützt Cypress alle Programmiersprachen wie PHP, Python, Ruby, C# usw. Wir schreiben unsere Tests jedoch in Javascript ; darüber hinaus funktioniert Cypress mit jeder Anwendung.

Bestandteile von Zypresse

Es gibt zwei Hauptkomponenten in Cypress. Sie sind Testläufer und Dashboard.

Testläufer – Cypress bietet diesen einzigartigen Test-Runner, in dem der Benutzer die Befehle während der Ausführung und Anwendung im Test anzeigen kann.

Es gibt wenige Unterkomponenten unter Test Runner. Sie sind

1. Befehlsprotokoll – Dies ist eine visuelle Darstellung der Testsuite. Sie können die im Test ausgeführten Befehle, die Assertionsdetails und die Testblöcke sehen.
2. Menü Teststatus – Dieses Menü zeigt die Anzahl der bestandenen oder fehlgeschlagenen Testfälle und die für die Ausführung benötigte Zeit.
3. URL-Vorschau – Dies gibt Ihnen Informationen über die URL, die Sie testen, um alle URL-Pfade zu verfolgen.
4. Größe des Ansichtsfensters – Sie können die Ansichtsfenstergröße der App festlegen, um verschiedene responsive Layouts zu testen
5. App-Vorschau – In diesem Abschnitt werden die Befehle angezeigt, die in Echtzeit ausgeführt werden. Hier können Sie Devtools verwenden, um jede Basis zu debuggen oder zu überprüfen.

Dashboard: Cypress Dashboard bietet die Möglichkeit, auf die aufgezeichneten Tests zuzugreifen. Mit dem Dashboard-Service können wir die Anzahl der bestandenen, fehlgeschlagenen oder übersprungenen Tests feststellen. Außerdem können wir mit cy Snapshots der fehlgeschlagenen Tests anzeigen. screenshot()-Befehl. Sie können sich auch das Video des gesamten Tests oder den Clip der fehlgeschlagenen Tests ansehen.

Architektur von Zypressen

Die meisten Testtools laufen auf dem Server außerhalb des Browsers und führen Befehle über das Netzwerk aus. Cypress läuft jedoch auf dem Browser, in dem auch die Anwendung ausgeführt wird. Auf diese Weise kann es auf alle DOM-Elemente und alles im Browser zugreifen.

Der Knotenserver läuft clientseitig hinter der Cypress. So interagieren der Node Server und Cypress miteinander, begleiten und führen Aufgaben zur Unterstützung der Ausführung durch. Da es sowohl Zugriff auf das Front- als auch auf das Backend hat, ist die Reaktionsfähigkeit der Anwendung in Echtzeit während der Ausführung gut gelungen und kann auch Aufgaben ausführen, die sogar außerhalb des Browsers ausgeführt werden.

Cypress interagiert auch mit der Netzwerkschicht und erfasst Befehle durch Lesen und Ändern des Webverkehrs. Schließlich sendet Cypress HTTP-Anforderungen und -Antworten vom Knotenserver an den Browser. Da Cypress in der Netzwerkschicht arbeitet, hilft es, den Code zu ändern, der die Automatisierung des Webbrowsers stören könnte. Die Kommunikation zwischen dem Node-Server und dem Browser erfolgt über den WebSocket, der mit der Ausführung beginnt, nachdem der Proxy gestartet wurde.

Cypress steuert alle Befehle, die in und aus den Browsern ausgeführt werden. Da es auf einem lokalen Computer installiert ist, interagiert es direkt mit dem Betriebssystem, um Videos aufzunehmen, Schnappschüsse aufzunehmen, auf die Netzwerkschicht zuzugreifen und Dateisystemvorgänge problemlos durchzuführen. Cypress kann auf alles zugreifen, von DOM, Window-Objekten, lokalem Speicher, Netzwerkschicht und DevTools.

Cypress installieren

In diesem Abschnitt wird der Installationsprozess erläutert, der vor dem Schreiben unserer Testfälle befolgt werden muss. Es gibt zwei verschiedene Möglichkeiten, Cypress herunterzuladen. Sie sind

1. Installation über npm
2. Direct Download

Bevor wir Cypress installieren, benötigen wir möglicherweise einige Voraussetzungen, um die Installation über npm zu starten. Sehen wir sie uns im Detail an.

Die Anforderungen:

Wir benötigen bestimmte Voraussetzungen, bevor wir unsere Testfälle schreiben.

• Wie oben besprochen, läuft Cypress auf einem Node-Server; Daher müssen wir Node.js installieren.
• Außerdem benötigen wir zum Schreiben unserer Testfälle einen Code-Editor oder eine IDE.

In diesem Beispiel verwenden wir Visual Studio Code. Tauchen wir also in die Details ein.

Node.js-Installation auf dem Mac

Hier werden wir die Schritte zum Herunterladen von Node.js auf dem Mac besprechen. Navigieren Sie zu https://nodejs.org/en/download/. Sie landen nun auf der Downloadseite.

1.Klicken Sie auf das macOS-Installationsprogramm. Wenn Sie darauf klicken, finden Sie unten eine heruntergeladene Paketdatei. Klicken Sie auf die pkg-Datei, um Node.js zu installieren

2. Sobald Sie auf die .pkg-Datei klicken, wird das Node-Installationsprogramm geöffnet. Im Einführungsabschnitt finden Sie die Versionen Node.js und npm. Klicken Sie auf Weiter

3. Klicken Sie auf die Schaltfläche Zustimmen und dann auf Weiter. Ein Popup-Fenster wird angezeigt, um den Zugriff auf Ihre Dateien im Download-Ordner zu ermöglichen. Klicken Sie auf Ok.

4. In diesem Abschnitt können Sie das Ziel auswählen, auf das Node.js heruntergeladen werden soll. Auch hier können Sie entsprechend Ihrem Systemspeicherplatz wählen. Hier wähle ich den Standardspeicherort.

5. Klicken Sie auf die Schaltfläche Installieren. Sobald Sie darauf klicken, wird ein Popup-Fenster angezeigt, in dem Sie nach Ihrem Systemkennwort gefragt werden. Geben Sie Ihr Passwort ein und klicken Sie auf Software installieren.

6. Hurra! Wir haben Node.js und das npm-Paket installiert. Klicken Sie auf Schließen, um die Installation abzuschließen.

Installation von Visual Studio-Code auf dem Mac

Wir haben Node.js erfolgreich installiert. Lassen Sie uns nun unseren Code-Editor Visual Studio Code installieren. VS-Code ist ein leistungsstarkes Tool, das über alle integrierten Funktionen von Javascript verfügt. Lassen Sie uns also in die Installationsschritte von Visual Studio Code eintauchen.

Hier werden wir die Schritte zum Herunterladen von VS-Code auf dem Mac besprechen. Navigieren Sie zuerst zu https://code.visualstudio.com/download um auf der Download-Seite des VS-Codes zu landen.

1. Klicken Sie auf das Mac-Symbol. Unten können Sie sehen, wie ein Paket heruntergeladen wird.

2. Klicken Sie auf die heruntergeladene Datei, um das Paket zu entpacken. Nach dem Entpacken finden Sie den Visual Studio-Code in Ihren Downloads im Finder.

3. Hurra! Wir haben unseren Code-Editor heruntergeladen. Klicken Sie auf das Symbol, um Visual Studio Code zu öffnen.

Erstellung eines neuen Cypress-Projekts

Wir werden nun sehen, wie Sie in unserem Visual Studio Code ein neues Knotenprojekt erstellen. Sobald Sie auf das VS-Code-Symbol klicken, landen Sie auf der Willkommensseite. Klicken Sie anschließend auf den Ordner Arbeitsbereich hinzufügen, um einen neuen Ordner zu erstellen.

Sobald Sie auf den Ordner klicken, wird ein Popup angezeigt, in dem Sie aufgefordert werden, einen neuen Ordner hinzuzufügen. Klicken Sie nun auf den Ort, an dem Sie den Arbeitsbereich hinzufügen möchten. Klicken Sie anschließend auf Neuer Ordner und fügen Sie den Ordnernamen als CypressProject hinzu und klicken Sie auf Öffnen.

Nun haben wir einen Ordner für unseren Cypress-Test erstellt. Bevor wir mit dem Schreiben unserer Tests beginnen, sollten wir die Datei package.json installieren. Lassen Sie uns vor der Installation verstehen, was die Datei package.json ist.

Was ist Package.json-Datei?

Package.json umfasst alle npm-Pakete in einer Datei, die sich normalerweise im Projektstamm befindet. Es befindet sich normalerweise im Stammverzeichnis des Node.js-Projekts. Diese Datei enthält alle relevanten Metadaten, die für das Projekt erforderlich sind. Es gibt alle Informationen an npm und hilft bei der Identifizierung des Projekts und der Handhabung von Abhängigkeiten. Die Datei Package.json enthält Informationen wie Projektname, Versionen, Lizenz, Abhängigkeiten und vieles mehr.
Jetzt haben wir verstanden, was die Datei package.json ist. Beginnen wir also mit den Schritten zum Herunterladen der Datei in unserem Visual Studio-Code.

1. Um unsere Befehle auszuführen, müssen wir das Terminal öffnen. Klicken Sie oben im VS-Code auf das Terminal. Sobald sich das Dropdown öffnet, klicken Sie auf Neues Terminal.

2. Geben Sie nach dem Öffnen des Terminals den folgenden Befehl in das Projektverzeichnis ein und drücken Sie die Eingabetaste.

npm init

3. Sobald Sie die Eingabetaste drücken, können Sie die angezeigten Informationen sehen. Sie können die erforderlichen Details in das Terminal eingeben und die Eingabetaste drücken, um alle Felder zu erhalten.

• Paketnamen: Sie können Ihrem Paket einen beliebigen Namen geben. Ich habe es leer gelassen, da es mit dem von uns erstellten Ordnernamen vorbelegt ist.
• Version: Gibt die Informationen zur Version von npm an. Sie können dies überspringen und die Eingabetaste drücken.
• Beschreibung: Hier können Sie dem Paket zusätzliche Informationen geben. Bei Bedarf können Sie die Beschreibung eingeben und erneut die Eingabetaste drücken.
• Einstiegspunkt: Dies ist der Einstiegspunkt der Anwendung. Da es bereits mit index.js gefüllt ist, können wir dieses Feld überspringen und die Eingabetaste drücken.
• Testbefehl: Befehl zum Ausführen des Tests. Hier ist es nicht notwendig, irgendwelche Befehle zu geben, aber bei Bedarf können Sie auf jeden Fall jeden beliebigen Befehl angeben.
• Git-Repository: Dieses Feld erfordert den Pfad zum Git-Repository. Sie können dieses Feld auch leer lassen.
• Stichwörter: Eindeutige Schlüsselwörter zur Identifizierung des Projekts. Sie können dieses Feld auch überspringen.
• Autor: Dies ist normalerweise der Benutzername der Person. Sie können Ihren Namen hinzufügen und die Eingabetaste drücken.
• Lizenz: Die Lizenz ist mit ISC vorbelegt. Sie können fortfahren, indem Sie die Eingabetaste drücken.

• 4. Sobald Sie die Eingabetaste drücken, fordert das Terminal zur Bestätigung auf, indem es alle von Ihnen angegebenen Details auflistet. Typ Ja und drücken Sie erneut die Eingabetaste.

Wir haben jetzt eine package.json-Datei generiert. Sie können die Datei mit den von uns bereitgestellten Informationen in Ihrem Code-Editor anzeigen.

Installationsschritte von Cypress

Wir haben alle Voraussetzungen für unseren Cypress-Download, den Knoten und das initialisierte npm installiert. Wie oben erwähnt, gibt es zwei Möglichkeiten, Cypress herunterzuladen.

Laden Sie Cypress über npm . herunter

Sie müssen den unten genannten Befehl im Terminal übergeben, um Cypress zu installieren. Außerdem müssen Sie im Projektverzeichnis den Befehl eingeben, um den Knoten zu installieren und die Datei package.json zu generieren.

npm install cypress --save-dev

Sobald Sie den Befehl übergeben haben, werden alle relevanten Abhängigkeiten heruntergeladen, die für das Projekt erforderlich sind. Beim Schreiben dieses Artikels ist die neueste Version von Cypress 7.7.0. Die Version kann zum Zeitpunkt des Downloads abweichen.

Anhand des obigen Bildes können Sie sehen, dass wir Cypress heruntergeladen haben. Sie können dies anhand der heruntergeladenen Darstellung in Terminal und dem Hinzufügen von devDependencies in der Datei package.json überprüfen.

Direct Download

Wir können Cypress direkt von ihrem CDN herunterladen, wenn Sie das Node- oder npm-Paket im Projekt nicht verwenden. Das Aufzeichnen der Tests im Dashboard ist jedoch nicht per Direktdownload möglich.

Sie können herunterladen, indem Sie auf Cypress direkt herunterladen klicken Link. Dadurch wird das Paket nun direkt heruntergeladen. Nachdem das Paket heruntergeladen wurde, öffnen Sie die ZIP-Datei und doppelklicken Sie. Cypress wird ohne die Notwendigkeit einer Installation von Abhängigkeiten ausgeführt. Bei diesem Download wird immer die neueste Version abgerufen und die Plattform wird automatisch erkannt. Es wird jedoch empfohlen, Cypress über npm herunterzuladen und nicht direkt herunterzuladen.

Für weitere Beiträge zum Thema Technologie besuchen Sie bitte unsere Technologieseite.

Aishwarya Lakshmi

Hallo ... ich bin Aishwarya Lakshmi, habe meinen B.Tech abgeschlossen und verfüge über mehr als zwei Jahre Erfahrung im Testbereich. Ich bin ein Test-Enthusiast und habe eine Leidenschaft für das Testen. Ich liebe es, neue Dinge in meinem Bereich zu entdecken und sie mit meinen Kollegen zu teilen. In meiner Freizeit schreibe ich gerne Blogs auf einfachste, aber effektive Weise. Als Tester möchte ich, dass die Dinge perfekt sind, deshalb wünsche ich meinen Lesern, dass sie die Technologie perfekt verstehen. Ich halte mich über die neuen Technologien im Zusammenhang mit Tests auf dem Laufenden und nehme mir Zeit, sie zu verstehen. Ich freue mich, den Studierenden dabei zu helfen, die Konzepte beim Testen zu verstehen.