Strenge Tests treffen auf die reale Welt mit simulierten End-to-End-Benutzertests.

Bei der Frontend-Entwicklung geht es um die Erstellung optisch ansprechender, funktionaler, kundenorientierter Apps. Aber da ist ein Fang; Diese Anwendungen müssen sicherstellen, dass Benutzer ein nahtloses Erlebnis haben.

Während Unit- und Integrationstests zur Überprüfung der Funktionalität einer Anwendung unerlässlich sind, erfassen sie typische Benutzerinteraktionen möglicherweise nicht vollständig. Um die Reise eines Benutzers wirklich zu simulieren, müssen Sie End-to-End-Tests durchführen, die tatsächliche Benutzerinteraktionen nachbilden. Dadurch wird sichergestellt, dass Ihre Anwendung von Anfang bis Ende die gewünschte Leistung erbringt.

Erste Schritte mit End-to-End-Tests mit Cypress

Das Hauptziel von End-to-End-Tests in Front-End-Anwendungen ist die Überprüfung der Ergebnisse und nicht die Implementierungsdetails der Geschäftslogik.

Nehmen Sie als Beispiel ein Anmeldeformular. Idealerweise testen Sie, ob der Anmeldebildschirm wie vorgesehen angezeigt wird und das tut, was er tun soll. Die zugrunde liegenden technischen Details sind im Wesentlichen unwichtig. Das Endziel besteht einfach darin, in die Lage des Benutzers zu schlüpfen und seine gesamte Erfahrung zu bewerten.

instagram viewer

Zypresse ist ein großartiges Automatisierungstest-Framework, das mit einigen davon kompatibel ist die beliebtesten JavaScript-Frameworks. Die Möglichkeit, Tests direkt im Browser auszuführen, und die umfassende Suite an Testfunktionen machen das Testen nahtlos und effizient. Es unterstützt auch verschiedene Testansätze, darunter:

  • Unit-Tests
  • End-to-End-Tests
  • Integrationstests

Um End-to-End-Tests für eine React-Anwendung zu schreiben, berücksichtigen Sie diese User Stories:

  • Ein Benutzer kann ein Eingabefeld mit einer entsprechenden Schaltfläche zum Senden sehen.
  • Ein Benutzer kann eine Suchanfrage in das Eingabefeld eingeben.
  • Nachdem der Benutzer auf die Schaltfläche „Senden“ geklickt hat, sollte eine Liste der Elemente direkt unter dem Eingabefeld angezeigt werden.

Indem Sie diesen User Stories folgen, können Sie eine einfache React-Anwendung erstellen, mit der ein Benutzer nach Produkten suchen kann. Die App ruft Produktdaten von ab DummyJSON-API und rendern Sie es auf der Seite.

Den Code dieses Projekts finden Sie in seiner GitHub Repository

Richten Sie ein Reaktionsprojekt ein

Um zu beginnen, Erstellen Sie ein React-Projekt mit Vite oder nutzen Sie die Befehl „create-react-app“, um eine grundlegende React-Anwendung einzurichten. Sobald der Installationsvorgang abgeschlossen ist, installieren Sie das Cypress-Paket als Entwicklungsabhängigkeit in Ihrem Projekt:

npm install cypress --save-dev

Aktualisieren Sie jetzt Ihre package.json Datei durch Hinzufügen dieses Skripts:

"test": "npx cypress open"

Erstellen Sie eine funktionale Komponente

Im src Verzeichnis, erstellen Sie einen Ordner und benennen Sie ihn Komponenten. Fügen Sie in diesem Ordner einen neuen hinzu products.jsx Datei und fügen Sie den folgenden Code ein.

import React, { useState, useEffect } from'react';
import"./style.component.css"
exportdefaultfunctionProducts(prop) {
const [products, setProducts] = useState([]);
const [error, setError] = useState(null); 
const { searchInput } = prop;
return (
"product-catalogue">
 {error? (
Product not found</p>
 ): (


"product-list">
 {products.slice(0, 6).map((product) => (
"product" key={product.id}>
Title: {product.title}</h2>




Price: ${product.price}</p>
 </div>
 ))}
 </div>
 )}
 </div>
 );
}

Definieren Sie innerhalb der Funktionskomponente a useEffect Hook, der eine asynchrone Funktion ausführt, die die Produktdaten basierend auf der bereitgestellten Suchabfrage abruft.

 useEffect(() => {
const fetchProducts = async () => {
if (searchInput) {
const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
thrownewError('Error fetching products');
 }
const json = await response.json();
 setProducts(json.products);
 setError(null); 
 } catch (error) {
 setError(error.message);
 }
 }
 };
 fetchProducts();
 }, [searchInput]);

Aktualisieren Sie die App.jsx-Datei

Aktualisieren Sie nun die App.jsx Datei mit folgendem Code:

import React, { useState, useRef } from'react'
import'./App.css'
import Products from'./components/Products'
functionApp() {
const [searchInput, setSearchInput] = useState('')
const searchInputRef = useRef('');


const handleSubmit = (e) => {
 setSearchInput(searchInputRef.current.value);
 }


return (




Cypress Testing Library tutorial</h1>






exportdefault App

Fahren Sie fort und starten Sie den Entwicklungsserver.

npm run dev

Großartig! Sie sollten in der Lage sein, bestimmte Produktdaten von der Dummy-JSON-API abzurufen.

Richten Sie die Testumgebung ein

Führen Sie zunächst den Testskriptbefehl auf Ihrem Terminal aus:

npm run test

Dieser Befehl löst den Cypress-Client aus und öffnet ihn. Fahren Sie fort und klicken Sie auf E2E-Tests Taste.

Klicken Sie anschließend auf Weitermachen um Cypress-Konfigurationsdateien hinzuzufügen.

Sobald dieser Vorgang abgeschlossen ist, sollte in Ihrem Projekt ein neues Cypress-Testverzeichnis angezeigt werden. Darüber hinaus fügt der Cypress-Client automatisch die Datei cypress.config.js hinzu. Sie können diese Datei aktualisieren, um verschiedene Aspekte Ihrer Testumgebung, Ihres Verhaltens und Ihrer Einrichtung weiter anzupassen.

Schreiben Sie End-to-End-Tests mit Cypress

Um Ihren ersten Test zu schreiben, müssen Sie den Browser auswählen, in dem der Test ausgeführt werden soll. Wählen Sie Ihre bevorzugte Option aus den verfügbaren Optionen im Cypress-Client aus.

Cypress startet eine vereinfachte Version des von Ihnen gewählten Browsers und erstellt so eine kontrollierte Umgebung zum Ausführen von Tests.

Wähle aus Neue Spezifikation erstellen Option zum Erstellen Ihrer Testdatei.

Gehen Sie zu Ihrem Code-Editor und öffnen Sie den cypress/e2e/App.spec.cy.js Datei und aktualisieren Sie den Inhalt dieser Datei mit dem folgenden Code.

describe('App Tests', () => {
 beforeEach(() => {
 cy.visit('http://127.0.0.1:5173/'); 
 });
 it('Renders input field and submit button', () => { 
 cy.get('#text').should('exist').should('be.visible');
 cy.get('#btn').should('exist').should('be.visible').contains('Submit');
 });
 it('Enters a search query', () => {
const searchQuery = 'laptops';
 cy.get('#text').type(searchQuery);
 });
});

Zurück zu den oben hervorgehobenen User Stories: Diese spezielle Testsuite überprüft zwei Aspekte:

  • Dass der Browser auf der Seite ein Eingabefeld und einen Absenden-Button anzeigt.
  • Dass der Nutzer eine Suchanfrage eingeben kann.

Wie andere JavaScript-Testtools wie Jest und Supertest verwendet Cypress eine deklarative Syntax und Sprache, um Testfälle zu definieren.

Um den Test auszuführen, kehren Sie zur von Cypress verwalteten vereinfachten Browserversion zurück und wählen Sie die spezifische Testdatei aus, die Sie ausführen möchten.

Cypress führt die Tests durch und zeigt die Ergebnisse im linken Bereich des Testspielplatzes an.

Bewerbungsprozesse simulieren

Um sicherzustellen, dass Sie die gesamte User Journey – in diesem speziellen Anwendungsfall – durchlaufen und testen, müssen Sie dies überprüfen Die Anwendung kann die Benutzereingaben entgegennehmen, die erforderlichen Daten abrufen und diese schließlich im Browser anzeigen Seite.

Aus Gründen der Übersichtlichkeit können Sie eine neue Testdatei erstellen, um eine andere Testsuite darin aufzunehmen e2e Ordner. Alternativ können Sie auch alle Testsuiten, die einen bestimmten Testfall untersuchen, in einer Testdatei zusammenfassen.

Machen Sie weiter und erstellen Sie ein neues Products.spec.cy.js Datei in der e2e Ordner. Fügen Sie in diese Datei den folgenden Code ein.

describe('Products Tests', () => {
 it(' fetches and displays the data', () => {
const searchQuery = 'laptops';
 cy.visit('http://127.0.0.1:5173'); 

 cy.get('#text').type(searchQuery);
 cy.get('#btn').contains('Submit').click();

 cy.get('.product').should('have.length.greaterThan', 0);

 cy.get('.product').first().should('contain', 'Title'); 
 cy.get('.product').first().should('contain', 'Price: $');
 });
 });

Diese Testsuite überprüft, ob die App die Daten abruft und auf der Browserseite anzeigt, sobald ein Benutzer einen bestimmten Suchbegriff übermittelt.

Dazu wird der Vorgang der Eingabe der Sucheingabe, des Klickens auf die Schaltfläche „Senden“ und des Wartens auf die Eingabe simuliert Laden Sie die zu ladenden Produkte herunter und überprüfen Sie dann das Vorhandensein von Produktartikeln zusammen mit Details wie Titel und Preis. Im Wesentlichen erfasst und überprüft es das gesamte Erlebnis aus Benutzerperspektive.

Fehler und Reaktionen simulieren

Sie können innerhalb Ihrer Cypress-Tests auch verschiedene Fehlerszenarien und Reaktionen simulieren.

Erstelle eine neue Error.spec.cy.js Datei in der e2e Verzeichnis und fügen Sie den folgenden Code ein.

describe('Error Handling Tests', () => {
 it('Displays error message for incorrect search query', () => {

 cy.intercept('GET', /https:\/\/dummyjson\.com\/products\/category\/.*/, {
 statusCode: 404, // Not Found
 body: 'Product not found'
 }).as('fetchProducts');
 cy.visit('http://127.0.0.1:5173');


const incorrectSearchQuery = 'rocket';
 cy.get('#text').type(incorrectSearchQuery);
 cy.get('#btn').click();


 cy.wait('@fetchProducts');
 cy.contains('Product not found').should('be.visible');
 });
 });

Diese Testsuite prüft, ob eine Fehlermeldung angezeigt wird, wenn ein Benutzer eine falsche Suchanfrage eingibt.

Damit der Testfall erfolgreich ist, wird Cypress verwendet. abfangen Funktion zum Stummschalten des Netzwerks und Simulieren eines Netzwerkanforderungsfehlers. Anschließend wird überprüft, ob nach der Eingabe einer falschen Suchanfrage in das Eingabefeld und dem Einleiten des Abrufvorgangs die Fehlermeldung „Produkt nicht gefunden“ sichtbar auf der Seite angezeigt wird.

Dieses Ergebnis zeigt an, dass der Fehlerbehandlungsmechanismus wie erwartet funktioniert.

Verwendung von Cypress in der testgetriebenen Entwicklung

Tests sind eine grundlegende Entwicklungsanforderung, können aber auch ein zeitaufwändiger Prozess sein. Die Einbindung von Cypress kann jedoch die reine Befriedigung bringen, zuzusehen, wie Ihre Testfälle zusammen ausgeführt werden.

Cypress ist ein großartiges Tool für die Implementierung testgetriebener Entwicklung in Anwendungen – es bietet nicht nur eine umfassende Suite von Testfunktionen, sondern unterstützt auch verschiedene Teststrategien. Um das Beste aus Cypress herauszuholen, schauen Sie sich die offizielle Dokumentation an, um viele weitere Testfunktionen zu entdecken.