GuideE2E-Testing mit GatsbyJS: 5 Schritte für End-to-End-Tests bei Deploy-Previews mit Github Actions
Einleitung
End-to-End-Tests (E2E) sind ein entscheidender Aspekt des Softwareentwicklungsprozesses. Sie ermöglichen es uns zu überprüfen, ob unsere Anwendungen von Anfang bis Ende korrekt funktionieren.
Durch den Einsatz von E2E-Tests können wir sicherstellen, dass visuelle Elemente wie erwartet funktionieren und dass Nutzer in verschiedenen Umgebungen eine nahtlose Erfahrung haben.
In diesem Leitfaden konzentrieren wir uns auf den Einsatz von Cypress für E2E-Tests mit einer Gatsby-Anwendung, die auf Netlify gehostet wird.
Um mit der Einrichtung und Konfiguration unserer E2E-Testumgebung mit Cypress, Netlify und Gatsby fortzufahren, stellen Sie bitte sicher, dass folgende Voraussetzungen erfüllt sind:
Grundkenntnisse in JavaScript.
Ein Netlify-Account.
Node.js und npm auf Ihrem Rechner installiert.
Motivation
Unsere Motivation für die Erstellung dieses Leitfadens ist zweifach. Erstens möchten wir Entwicklern eine leicht verständliche und umfassende Ressource für die Integration von E2E-Tests mit Cypress zur Verfügung stellen. Wenn Sie diesem Leitfaden folgen, können Sie E2E-Tests effizient in Ihr Projekt integrieren.
Zweitens erkennen wir die zahlreichen Vorteile, die E2E-Tests für Unternehmen bringen, und wie wichtig es ist, diese Pipelines so schnell wie möglich in Betrieb zu nehmen.
Mit diesen Motivationen im Hinterkopf freue ich mich, einen einfachen und erweiterbaren Ansatz zur Integration von E2E-Tests mit Gatsby und Netlify auf die einfache Art vorzustellen.
Ein neues Gatsby-Projekt erstellen
Um zu beginnen, müssen wir ein neues Gatsby-Projekt von Grund auf erstellen. Wir werden einen der verfügbaren Starter verwenden, um unser Projekt schnell einzurichten.
Folgen Sie diesen Schritten:
Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus: npx gatsby new gatsby-cypress-e2e https://github.com/gatsbyjs/gatsby-starter-hello-world
Dieser Befehl erstellt einen neuen Ordner namens gatsby-cypress-e2e und generiert ein Gatsby-Projekt basierend auf dem hello-world-Starter.
Navigieren Sie mit folgendem Befehl in das neu erstellte Verzeichnis: cd gatsby-cypress-e2e
Starten Sie den Gatsby-Entwicklungsserver mit folgendem Befehl: npx gatsby develop
Warten Sie, bis eine Meldung erscheint, dass Ihr Projekt unter localhost:8000 verfügbar ist. Das bedeutet, dass Ihr Gatsby-Projekt läuft.
Nachdem wir erfolgreich ein neues Gatsby-Projekt erstellt haben, fahren wir mit dem nächsten Abschnitt fort, um Cypress in unser Projekt zu integrieren.
Cypress in unser Projekt einbinden
In diesem Abschnitt integrieren wir Cypress in unser Gatsby-Projekt. Cypress ist ein leistungsstarkes Tool, mit dem Sie Tests für moderne Webanwendungen erstellen, sie visuell debuggen und ihre Ausführung in Ihren Continuous-Integration-Builds automatisieren können.
Um zu beginnen, folgen Sie diesen Schritten:
Öffnen Sie das Terminal im Stammverzeichnis Ihres Gatsby-Projekts.
Führen Sie den folgenden Befehl aus, um Cypress als Entwicklungs-Dependency zu installieren: npm install cypress --save-dev
Dieser Befehl fügt Cypress zu den Dependencies Ihres Projekts hinzu und ermöglicht es Ihnen, dessen Testfähigkeiten zu nutzen.
Nachdem Cypress erfolgreich in unserem Projekt installiert wurde, können wir mit dem nächsten Abschnitt fortfahren, um die Cypress-Integration mit Gatsby zu konfigurieren.
Cypress ausführen
Nachdem wir Cypress in unser Gatsby-Projekt integriert haben, öffnen wir Cypress und überprüfen, ob unsere Installation erfolgreich war.
Um Cypress zu öffnen, folgen Sie diesen Schritten:
Öffnen Sie das Terminal Ihres Projekts im Stammverzeichnis Ihres Gatsby-Projekts.
Führen Sie den folgenden Befehl aus: npx cypress open
Dieser Befehl startet Cypress zum ersten Mal und richtet die notwendigen Dateien und Ordner ein.
Hinweis: Wenn Sie Linux verwenden und eine Fehlermeldung über fehlende Abhängigkeiten erhalten, lesen Sie bitte die Cypress-Dokumentation für Linux-Voraussetzungen und installieren Sie die erforderlichen Abhängigkeiten basierend auf Ihrer Distribution.
Sobald der Befehl erfolgreich ausgeführt wurde, sollte Cypress geöffnet sein und Sie sollten die Cypress Test Runner-Oberfläche sehen.
Unseren Test hinzufügen
Jetzt implementieren wir unseren E2E-Test. In diesem Fall erstellen wir eine einfache Assertion, die das Vorhandensein des Textes "Hello World" auf unserer Seite überprüft.
Folgen Sie diesen Schritten, um den Test hinzuzufügen:
Öffnen Sie den Ordner cypress/e2e in Ihrem Projekt. Falls der Ordner nicht existiert, erstellen Sie ihn.
Erstellen Sie im Ordner e2e eine neue Datei namens home.cy.js und fügen Sie den folgenden Code hinzu:
1describe("Home component", () => {
2 beforeEach(() => {
3 cy.visit("/") // Visit the home page
4 })
5
6 it('should display "Hello world!"', () => {
7 cy.get("div").contains("Hello world!").should("exist") // Ensure that the text exists within the div
8 })
9})Erläuterung des obigen Codes:
Der describe-Block legt den Kontext für unsere Test-Suite fest, in diesem Fall die "Home component".
Der beforeEach-Block legt fest, dass wir vor jedem Test die Startseite besuchen sollen.
Der it-Block definiert unseren Testfall, der überprüft, ob der Text "Hello World" in einem div-Element vorhanden ist.
Erstellen Sie eine neue Datei namens cypress.config.js im Stammverzeichnis Ihres Projekts. Fügen Sie den folgenden Code hinzu:
1module.exports = {
2 e2e: {
3 baseUrl: "http://localhost:8000",
4 },
5}Diese Konfigurationsdatei legt die Basis-URL für Cypress fest, in unserem Fall http://localhost:8000, wo der Gatsby-Entwicklungsserver läuft.
Stellen Sie sicher, dass Sie die Datei speichern.
Öffnen Sie jetzt, mit laufendem Gatsby-Entwicklungsserver, Cypress erneut, indem Sie den Befehl npx cypress open in Ihrem Projekt-Terminal ausführen.
Sobald das Cypress-Fenster geöffnet ist, wählen Sie "electron" als Browser und klicken Sie auf den aufgelisteten Test, den wir gerade erstellt haben.
Der Test beginnt zu laufen, und Sie sollten eine Erfolgsmeldung sehen, die anzeigt, dass der Test bestanden wurde.
Was wir bisher erreicht haben
Bisher haben wir Folgendes erreicht:
Ein grundlegendes Gatsby-Projekt erstellt und Cypress als unsere Test-Suite integriert.
Überprüft, dass unser Cypress-Setup funktioniert, indem wir einen grundlegenden E2E-Test auf der Startseite ausgeführt haben.
Eine Basis-URL für Cypress in der Datei cypress.config.js konfiguriert.
Unseren Test erfolgreich mit dem Cypress Test Runner ausgeführt.
Im nächsten Abschnitt werden wir erkunden, wie wir unser Gatsby-Projekt über Netlify deployen können.
Außerdem werden wir Cypress so konfigurieren, dass es in der Cloud für jede Deploy-Preview mit dem Plugin netlify-plugin-cypress ausgeführt wird. Dadurch werden unsere E2E-Tests automatisch bei jeder Deploy-Preview ausgeführt, was uns mehr Vertrauen in die Stabilität und Funktionalität unserer Anwendung gibt.
Fahren wir mit dem nächsten Abschnitt fort, um mit dem Deployment und dem Konfigurationsprozess fortzufahren.
Unser Projekt auf Netlify hochladen
In diesem Abschnitt laden wir unser Gatsby-Projekt auf Netlify hoch, eine beliebte Hosting-Plattform für statische Websites.
Folgen Sie diesen Schritten, um Ihr Projekt auf Netlify hochzuladen:
Erstellen Sie ein neues Repository auf GitHub für Ihr Projekt. Stellen Sie sicher, dass Sie das Repository nicht mit einer README-, Lizenz- oder .gitignore-Datei initialisieren. Sie können diese Dateien später hinzufügen, nachdem Sie Ihr Projekt auf GitHub gepusht haben.
Pushen Sie Ihr lokales Repository auf GitHub, indem Sie die von GitHub bereitgestellten Schritte zum Hochladen eines vorhandenen lokalen Repositorys befolgen. Dadurch wird Ihr Projekt auf GitHub zugänglich.
Melden Sie sich in Ihrem Netlify-Dashboard an.
Klicken Sie auf "New site from Git" oder "New site" und wählen Sie den Git-Anbieter (GitHub) aus, bei dem sich Ihr Repository befindet.
Folgen Sie dem Netlify-Setup-Assistenten und lassen Sie alles als Standard. Netlify erkennt automatisch, dass Ihr Projekt ein Gatsby-Projekt ist, und richtet alles korrekt für Sie ein.
Warten Sie, bis Netlify Ihre Website erfolgreich deployt hat. Sobald das Deployment abgeschlossen ist, wird Ihnen eine eindeutige URL für Ihre Website zugewiesen. Besuchen Sie die URL und überprüfen Sie, ob alles wie erwartet funktioniert.
Unsere Tests bei jedem erfolgreichen Deployment ausführen
Um unsere Tests direkt in Netlify auszuführen, verwenden wir die offizielle Cypress-Integration für Netlify. So können wir auf den aktuellen Stand des gerade deployte Codes zugreifen und Fehler frühzeitig erkennen.
Folgen Sie diesen Schritten, um Cypress so zu konfigurieren, dass es bei jedem erfolgreichen Deployment ausgeführt wird:
Navigieren Sie im Terminal zum Stammordner Ihres Projekts.
Führen Sie den folgenden Befehl aus, um das offizielle Cypress-Plugin für Netlify zu installieren: npm install --save-dev netlify-plugin-cypress
Als Nächstes müssen wir Netlify mitteilen, dass wir dieses Plugin in unsere Deployment-Pipeline einbinden möchten. Erstellen Sie eine neue Datei namens netlify.toml im Stammverzeichnis Ihres Projekts und fügen Sie den folgenden Code hinzu:
1[build]
2
3 [build.environment]
4 # cache Cypress binary in local "node_modules" folder
5 # so Netlify caches it
6 CYPRESS_CACHE_FOLDER = "./node_modules/CypressBinary"
7 # set TERM variable for terminal output
8 TERM = "xterm"
9
10[[plugins]]
11 package = "netlify-plugin-cypress"
12 [plugins.inputs]
13 record = true
14 group = "Testing Built Site"Diese Konfigurationsdatei legt das Caching des Cypress-Binaries im lokalen "node_modules"-Ordner fest und setzt die TERM-Variable für die Terminal-Ausgabe. Sie enthält auch das Plugin netlify-plugin-cypress mit zusätzlichen Eingaben, wie der Aktivierung der Testaufzeichnung und der Angabe der Testgruppe "Testing Built Site".
Committen und pushen Sie Ihre Änderungen auf GitHub.
Gehen Sie zu Ihrem Deploy-Log in Netlify.
Jetzt sollten Ihre Cypress-Tests direkt nach der Verfügbarkeit Ihrer Deploy-Preview auf Netlify ausgeführt werden.
Nächste Schritte
Herzlichen Glückwunsch, dass Sie Cypress mit Gatsby und Netlify erfolgreich eingerichtet haben! Diese Integration bietet eine nahtlose Möglichkeit, Ihre E2E-Tests bei jedem erfolgreichen Deployment auszuführen.
Hier sind einige nächste Schritte, die Sie in Betracht ziehen können:
Zusätzliche Features erkunden: Sie können dieses Setup erweitern, indem Sie das offizielle Cypress Dashboard integrieren. Das Dashboard ermöglicht es Ihnen, Ihre Testergebnisse und Videos zu speichern und sogar Pull Requests zu blockieren, wenn Tests fehlschlagen. Dies kann die Qualität und Zuverlässigkeit Ihrer Anwendung weiter verbessern.
Weitere Tests schreiben: Jetzt, da Sie einen grundlegenden Test haben, sollten Sie weitere Tests hinzufügen, um andere wichtige Funktionalitäten und User-Flows in Ihrer Anwendung abzudecken. Das Abdecken von Edge-Cases und kritischen Pfaden kann dazu beitragen, eine robuste Teststrategie zu gewährleisten.
Kontinuierlich überwachen und verbessern: Machen Sie es zur Praxis, Ihre Tests regelmäßig zu überprüfen und zu überwachen. Behalten Sie die Testergebnisse im Auge, untersuchen Sie etwaige Fehler und verbessern oder aktualisieren Sie Ihre Tests nach Bedarf. Dies wird dazu beitragen, die Qualität und Zuverlässigkeit Ihrer Anwendung im Laufe der Zeit aufrechtzuerhalten.
Ich hoffe, dieser Leitfaden hat Ihnen geholfen, mit Cypress, Gatsby und Netlify zu beginnen. Wenn Sie weitere Fragen haben oder Unterstützung benötigen, können Sie sich gerne melden. Viel Erfolg beim Testen!