Achtung, Drupal-Webseitenbetreiber: Hier sind Gründe für den Umstieg auf Cypress-Tests!

Würden Sie mir zustimmen, wenn ich sage, dass das Web vor zehn Jahren nicht dasselbe war wie heute?

Vielleicht stimmen Sie zu, vielleicht aber auch nicht.

Aber wenn wir uns die Statistiken ansehen, lässt sich eine Schlussfolgerung ziehen: Das Web verändert sich ständig, und das Testen hat diese Veränderung begleitet. 

Das Testen ist einer der wichtigsten Prozesse in der Anwendungsentwicklung. Der Erfolg oder Misserfolg der Anwendung hängt vollständig davon ab. 

Cypress ist ein solches Framework, das Ihnen hilft, jede Art von Webtests zu meistern und die beste Option für Ihre Website ist. 

Ja, Sie fragen sich sicher, warum ich von all den Testsoftwares auf dem Markt Cypress hervorhebe. 

Nun, lassen Sie uns herausfinden, warum. 

Warum Cypress?

Cypress ist ein Javascript-basiertes End-to-End-Test-Framework, das Selenium überhaupt nicht verwendet. 

Was ist Selenium?

Nun, Selenium automatisiert Browser. Was der Benutzer mit dieser Macht macht, liegt ganz bei ihm. In erster Linie wird es zur Automatisierung von Webanwendungen für Testzwecke verwendet. Es ist die Kerntechnologie in unzähligen anderen Browser-Automatisierungstools, APIs und Frameworks.

Um auf Cypress zurückzukommen: Das Testtool ist ein modulares, integriertes System zur Dokumentenerstellung und -bereitstellung, das die Verwaltung, den Zugriff und die Verteilung von Inhalten im gesamten Unternehmen verbessert. Dieses System kann schnell eingesetzt werden und erfordert wenig oder gar keine Benutzerschulung.

Cypress bietet viele nützliche Vorteile, die Sie dazu bringen würden, die Software sofort zu wählen. 

• Automatisches Warten: Cypress hat die Fähigkeit, automatisch auf das Laden des DOM (Document Object Model) zu warten, die Elemente sichtbar zu machen, die Animation abzuschließen und vieles mehr. 
   
• Echtzeit-Neuladen: Cypress ist intelligent genug, um zu verstehen, dass der Benutzer nach dem Speichern einer Testdatei diese erneut ausführen wird, sodass es die Ausführung automatisch neben dem Browser auslöst, sobald der Benutzer zum Speichern der Datei drückt. 
   
• Debugbarkeit: Das Test-Framework bietet dem Benutzer die Möglichkeit, eine bestimmte zu testende App direkt über die Chrome Dev-Tools zu debuggen. Es präsentiert eine unkomplizierte Fehlermeldung und empfiehlt dem Benutzer, wie er vorgehen soll.
   
• Architektur: Es gibt viele Testtools, die funktionieren, indem sie außerhalb des Browsers ausgeführt werden und Remote-Befehle über das Netzwerk ausführen, aber Cypress ist genau das Gegenteil. Dieses Testtool wird im selben Run-Loop wie die Anwendung ausgeführt.
   
• Funktioniert auf der Netzwerkschicht: Cypress läuft auf der Netzwerkschicht, indem es den Webverkehr liest und ändert. Dies ermöglicht es dem Testtool, nicht nur alles zu ändern, was in den Browser hinein- und herauskommt, sondern auch den Code zu ändern, der seine Fähigkeit zur Automatisierung des Browsers beeinträchtigen könnte. 
   
• Es ist eine neue Art des Testens: Cypress hat die ultimative Kontrolle über die Anwendungen, den Netzwerkverkehr und den nativen Zugriff auf jedes Host-Objekt, was eine neue Art des Testens ermöglicht (dies war noch nie zuvor möglich).
   

Wie unterscheidet sich Cypress von Selenium?

	Cypress	Selenium
Installation	Keine Konfiguration erforderlich. Alle Abhängigkeiten und Treiber werden automatisch mit .exe installiert	Die Installation der Sprachbindung und die Konfiguration der Treiber ist erforderlich
Ausführung im Browser	Cypress unterstützt nur Chrome	Sie können Ihren Text in jedem Browser ausführen
Architektur	Wird innerhalb des Browsers ausgeführt und im selben Loop ausgeführt	Wird außerhalb des Browsers ausgeführt und führt Remote-Befehle aus
Geschwindigkeit	Der Testcode wird zusammen mit dem Anwendungscode ausgeführt. Daher wird ein extrem schneller Test generiert.	Automatisierungsskripte sind in Selenium langsam
Warten auf die Elemente	Cypress wird im Browser ausgeführt und weiß, was passiert. Daher müssen Sie nicht warten, wenn Sie Cypress verwenden	Um eine effektive Automatisierung zu erreichen, ist das Warten auf ein Element eine wichtige Aufgabe
Dokumentation	Das Team von Cypress hat viel Zeit in die Dokumentation investiert, daher ist sie nahtlos und vollständig.	Die Dokumentation ist nicht vollständig und schwer zu verstehen.

Einschränkungen und Herausforderungen bei Cypress 

Obwohl Cypress einen wirklich guten Job macht, Entwicklern und QA-Ingenieuren das zu geben, was sie in einem Automatisierungstool wollen, hat es einige Einschränkungen.

• Da die Struktur sich sehr von einem Selenium-End-to-End-Tool unterscheidet, muss der Benutzer zuerst die Struktur verstehen und dann den besten Weg finden, um die Skripte zu erstellen.
   
• Da das Test-Framework vergleichsweise neu ist, ist die Community klein. Es ist wirklich schwierig, die Antworten auf die Probleme zu finden. 
   
• Das Hochladen von Dateien wird von dieser Software nicht unterstützt und Cypress unterstützt auch keine Cross-Browser-Tests. Niemand weiß, wann diese Dinge abgedeckt werden und für welche großen Projekte diese Funktionen wirklich wichtig sind. 
   
• Cypress folgt dem Ansatz, der sich auf das Page Object Model bezieht, und dies hat sich mit der Zeit bewährt. 
   
• Das gesamte Framework ist nur für einen Client verfügbar, d. h. Javascript. Um damit zu arbeiten, ist es daher wichtig, dass der Benutzer das Framework kennt.

Kann End-to-End-Testing Qualitätsvorteile bringen?

Ja, End-to-End-Tests sind wirklich wichtig, da sie dazu beitragen, das korrekte Funktionieren der Anwendung sicherzustellen, indem sie sie auf jeder Ebene testen, direkt vom Frontend aus. Einige andere Vorteile der Wahl und Durchführung von End-to-End-Tests können sein:

• Es gewährleistet die vollständige Korrektheit sowie den Zustand einer Anwendung: Beim End-to-End-Testing wird die Anwendung auf allen Ebenen getestet und validiert. Die Ebenen umfassen Datenebene, Geschäftsebene, Integrationsebene und Präsentationsebene, was das Wohlergehen einer Anwendung garantiert. 
   
• Es erhöht die Zuverlässigkeit einer Anwendung: End-to-End-Testing erhöht die Zuverlässigkeit und Leistung einer Anwendung vor ihrer Veröffentlichung, da die Anwendung über verschiedene Endpunkte von verschiedenen Geräten aus getestet wird.
   
• Es verringert die zukünftigen Risiken, die mit dem Prozess einhergehen könnten: End-to-End-Testing bietet dem Benutzer eine rigorose Iteration und einen Sprint. Daher gibt es weniger Chancen für Risiken und Fehler, die in naher Zukunft auftreten können. 
   
• Es verringert den wiederholten Aufwand: Die Anwendung wird gründlich getestet, sodass es kein Zurückblicken gibt. Das Testen reduziert die Wahrscheinlichkeit häufiger Ausfälle und wiederholter Testaufwände 

End-to-End-Testing mit Drupal

Cypress macht es einfach, neue Tests zur Website hinzuzufügen, während der Benutzer die Codes iteriert. Hier sind einige der wenigen Konzepte, die Ihnen bei Ihrer Drupal-Website helfen können. Beginnen wir das Konzept mit: 

Einrichtung 

Mit Hilfe des Standard-Installationsprofils und der Drupal 8-Distribution kann die Installation zusammen mit der JSON-API erfolgen. Drupal 8 verfügt über RESTful Web Services, die viele Zwecke erfüllen können und Dinge wie das Abfragen von Nodes nach Feld erleichtern. 

Es gibt einige Optionen für die Installation von Cypress, von denen eine der bevorzugten Optionen über NPM pacakage.json ist. Der erste Schritt ist das Erstellen einer eigenen Datei im Stammverzeichnis des Projekts. Sobald die Datei platziert wurde, installieren Sie sie, indem Sie npm i von der Projektroute aus ausführen. 

Der erste Test 

Nachdem Cypress mit Hilfe von NPM pacakage.json installiert wurde, ist es an der Zeit zu testen, ob es richtig funktioniert oder nicht.

Der Test macht zwei Dinge:

• Er besucht die Root-Adresse einer beliebigen Website (die von einem NPM-Skript konfiguriert wurde).
   
• Er überprüft, ob die Seite ein Element mit "Cypress Testing" enthält.

Erstellen des Kontos 

Der nächste Schritt ist das Erstellen von Benutzerkonten. Abhängig von der Umgebung ist eine Option praktikabler als eine andere. Um Dinge zu tun, ist es daher wichtig, Drupal-Entitäten zu erstellen. Es ist auch wichtig, Zugriff auf ein Administratorkonto zu haben. Sie können sie manuell in der Datenbank erstellen und die Kontoanmeldeinformationen über eine Umgebungsvariable an Cypress übergeben, oder Sie können Cypress das Konto jedes Mal erstellen lassen, wenn es die Tests ausführt. Dies würde die Wahrscheinlichkeit von Risiken und Problemen verringern, die während des Verfahrens auftreten könnten. 

Der Befehl, der in Cypress vorhanden ist, d. h. cy.exec(), bietet dem Benutzer den Zugriff, der in den Systembefehlen vorhanden ist (insbesondere in Drush). Die Anmeldeinformationen werden dann für den Testbenutzer festgelegt. Ein Objekt wird mit den Schlüsselwerten hinzugefügt, die als Umgebungsvariablen an den Test übergeben werden. Fügen Sie nun Benutzername und Passwort hinzu, um das Benutzer-Administratorkonto zu erstellen. Nun, da die Anmeldeinformationen verfügbar sind, ist es möglich, sie zum Erstellen des Benutzers zu verwenden. 

Anmelden 

Um eingeschränkte oder authentische Benutzer zu testen, ist es wichtig, sich zuerst anzumelden. Der offensichtlichste Weg, dies zu tun, ist derselbe Weg, den ein Benutzer zum Anmelden verwenden würde, über die Benutzeroberfläche. Tatsächlich sollte der Benutzer sicherstellen, dass die Anmeldung über die Benutzeroberfläche möglich ist. 

Nach jedem Test hinterlässt Cypress den Browser in einem Zustand, in dem er sich befand, als er die Ausführung des Tests beendete. Dies ist nützlich, da es eine großartige Position hinterlässt, um die nächsten Schritte zu entdecken. In diesem speziellen Fall kehrt Cypress mit dem angemeldeten Administratorbenutzer zum Browser zurück.
 
Um Tests unabhängig voneinander zu halten, entfernt Cypress die Browser-Cookies, bevor der Osten des Tests ausgeführt wird. Dies verhindert die Nebenwirkungen zwischen Tests, bedeutet aber auch, dass sich der Benutzer jedes Mal anmelden muss, wenn ein Test ausgeführt wird, der eine Authentifizierung benötigt.
 
Nun, da die Anmeldecodes platziert wurden, müssen wir sie schreiben. Der Benutzer kann Protokolle über den UI-Testcode wiederverwenden, aber wenn dieselben Codes vor jedem Test ausgeführt werden müssen, wäre es wenig sinnvoll, den Test überhaupt zu haben. Am wichtigsten ist, dass die Anmeldung über die Benutzeroberfläche langsam ist. Wenn sich der Benutzer vor jedem Test anmelden muss, wird viel Zeit mit der Anmeldung verschwendet. Drupal meldet sich einfach an, indem es Formulardaten an die Anmelde-URL sendet. 

Seed der Daten 

Es ist wichtig zu untersuchen, wie die JSON-API verwendet wird, um die zu testenden Daten zu seeden, und zu verstehen, dass die API die Anfragen authentifiziert. Standardmäßig (für unsichere und Nicht-Lese-Anfragen) erfordern JSON und das Standard-REST-Modul, dass ein Token-Anforderungsheader präsentiert wird. Die Token können dann verwendet werden, um Daten zu erstellen und zu löschen, indem die Endpunkte gesendet werden, die vom JSON-API-Modul bereitgestellt werden. 

Beachten Sie, dass Cypress einen After-Hook präsentiert. Es ist faszinierend, die Test-Nodes im After-Hook zu löschen, da der Benutzer zu diesem Zeitpunkt Zugriff auf die ID des Test-Nodes hat und den Testinhalt löschen könnte, ohne nach dem Titel suchen zu müssen. 

Dieser Ansatz kann jedoch problematisch sein, falls ein Test-Runner vor dem Ausführen des After-Blocks beendet oder aktualisiert werden muss. In diesem Fall würde der Testinhalt nie bereinigt, da der Benutzer in zukünftigen Testläufen keinen Zugriff auf die ID des Nodes hätte. Sobald die Testartikel gesendet wurden, besucht der Test "zeigt veröffentlichte Artikel an" die Seite des Nodes und bestätigt, dass die Felder
 
Debuggen mit DevTools

Wie wir sehen können, hat sich Cypress zu einem ausgezeichneten Test-Runner entwickelt, der dem Benutzer hilft zu verstehen, was in einer Anwendung und in den Tests passiert. Es gibt einfach keinen Ersatz für all die erstaunliche Arbeit, die der Browser an seinen integrierten Entwicklungstools geleistet hat.

Ihr Cypress-Testcode wird im selben Run-Loop wie Ihre Anwendung ausgeführt. Dies bedeutet, dass Sie Zugriff auf den Code haben, der auf der Seite ausgeführt wird, sowie auf die Dinge, die der Browser Ihnen zur Verfügung stellt, wie z. B. Dokument, Fenster und natürlich Debugger

Ausführen von Cypress in Continuous Integration

Wenn Sie möchten, dass automatisiertes Testen und Continuous Integration zusammenarbeiten, dann ist es wichtig, eine Art CI/CD-Server zu haben. Dies sind die gehosteten Server, und um sie mit Drupal 8 zu implementieren, müssen diese Tools zusammenarbeiten.

Es ist wichtig zu beachten, dass Entwickler sicherstellen müssen, dass alle Tests auf der lokalen Workstation bestanden werden. Die Drupal-Konfiguration wird exportiert, wo das System eine neue Installation startet

Fazit

End-to-End-Testing sollte nicht schwer sein. Cypress macht Integrationstests angenehm und erfreulich. Sie können die End-to-End-Tests schreiben, ohne sich um Browser, Selenium und andere beängstigende Dinge kümmern zu müssen.

Sie würden der Tatsache zustimmen, dass das Framework so gut ist, dass die Planung, nichts als Cypress für Integrationstests zu verwenden, fruchtbar wäre. Außerdem ist die Dokumentation pures Gold: Die Cypress-Dokumente sind voll von Best Practices und Beispielen.

Bei OpenSense Labs haben wir qualifizierte Drupal-Experten, die versuchen, die digitale Transformation für das Unternehmen mit den Dienstleistungen und der Unterstützung zu ermöglichen. Kontaktieren Sie uns jetzt unter [email protected]