Ecom Cypress-Tests

E2E-Tests mit Cypress zeigt Ihnen, wie Sie End-to-End-Tests (E2E) mit Cypress durchführen , eines der beliebtesten Tools für automatisiertes Testen in JavaScript, insbesondere für Webanwendungen. Ich werde alle Konzepte und Schritte im Detail erklären.

---

Was sind E2E-Tests?

End-to-End-Tests (E2E) sind automatisierte Tests, die das vollständige Verhalten einer Anwendung von Anfang bis Ende überprüfen und dabei die Benutzerinteraktion mit der Schnittstelle simulieren. Diese Tests sind wichtig, da sie bestätigen, dass alle Teile der Anwendung in einer realen Umgebung wie erwartet korrekt zusammenarbeiten.

Zypresse: Was ist das und wie funktioniert es?

Cypress ist ein Tool zum automatisierten Testen von Webanwendungen. Es ist so konzipiert, dass es einfach zu bedienen, leistungsstark und schnell ist. Es ermöglicht Ihnen, Tests zu schreiben, die mit der Benutzeroberfläche der Anwendung auf die gleiche Weise interagieren, wie ein Benutzer es tun würde, indem er auf Schaltflächen klickt, Formulare ausfüllt, Texte validiert und vieles mehr.

Einige wichtige Funktionen von Cypress:

• Echtzeittests: Die Tests werden im Browser selbst ausgeführt, sodass Sie die laufenden Tests live verfolgen können.
• Einfache Einrichtung: Für den Einstieg ist keine komplizierte Einrichtung erforderlich.
• Schnelle Ausführung: Da Cypress im Browser ausgeführt wird, ist die Testausführung im Vergleich zu anderen E2E-Testtools schneller.
• CI/CD-Integration: Es lässt sich problemlos in CI/CD-Pipelines zur Testautomatisierung integrieren.

---

Modul 34 Exemplarische Vorgehensweise

1. Konzeptualisierung des Cypress-Tools

Cypress ist ein automatisiertes Testtool für Webanwendungen, hauptsächlich für E2E-Tests. Es ist so konzipiert, dass es direkt mit dem Anwendungscode im Browser interagiert, wodurch das Testen effizienter wird.

2. Cypress auf der Maschine installieren

Um Cypress verwenden zu können, müssen Sie es in Ihrem Projekt installieren. Hier ist der Installationsbefehl:

npm install cypress --save-dev

Dadurch wird Cypress als Entwicklungsabhängigkeit in Ihrem Projekt installiert.

3. Cypress starten

Nach der Installation von Cypress können Sie es mit dem folgenden Befehl im Terminal öffnen:

npm install cypress --save-dev

Dadurch wird der Cypress Test Runner geöffnet, in dem Sie die im Browser ausgeführten Tests sehen können. Außerdem wird in Ihrem Projekt ein Cypress-Ordner erstellt, in dem alle Tests und Konfigurationen gespeichert werden.

4. Verwenden der Funktion „Beschreiben“ zum Gruppieren von Tests

In Cypress (und Jest) verwenden wir describe, um mehrere Tests zu gruppieren, die Teil derselben Suite oder desselben Moduls sind. Dies hilft, die Tests strukturierter zu organisieren.

npx cypress open

Im Beispiel oben:

• describe wird verwendet, um anmeldebezogene Tests zu gruppieren.
• es definiert einen bestimmten Test innerhalb der Gruppe. Darin folgt der Code, der die Verifizierung durchführt (Testschritte).

5. Verwenden der it-Funktion

Die Funktion it dient der Definition einzelner Testfälle. Jeder Testfall muss unabhängig sein und eine bestimmte Funktionalität oder ein bestimmtes Verhalten der Anwendung darstellen.

6. Elemente mit der Funktion cy.get abrufen

Die Funktion cy.get wird verwendet, um Seitenelemente auszuwählen, mit denen in Tests interagiert werden soll.

Beispiel:

describe('Teste de Login', () => {
  it('Deve realizar o login com sucesso', () => {
    cy.visit('https://exemplo.com/login');
    cy.get('input[name="username"]').type('usuario');
    cy.get('input[name="password"]').type('senha123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

Hier sucht cy.get nach der Eingabe mit name="username" und der Senden-Schaltfläche mit type="submit" und führt dann die Aktionen von type und klicken.

7. Einführung in VScode und Autocomplete

Sie können

VSCode verwenden, um Ihre Tests zu bearbeiten und die Vorteile der automatischen Vervollständigung von Cypress zu nutzen, die es einfach macht, Tests korrekt zu schreiben, indem sie während der Eingabe Methoden und Befehle vorschlägt.

8. Verwendung hierarchischer Beziehungen

Mit Cypress können Sie Elemente basierend auf der Seitenhierarchie auswählen und dabei komplexere CSS-Selektoren verwenden. Sie können beispielsweise eine Schaltfläche auswählen, die sich in einem Div mit einer bestimmten Klasse befindet:

cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();

9. Erstellen von Filtertests

Ein Beispiel für einen Filtertest wäre die Überprüfung, ob bei der Anwendung eines Filters die Liste der Elemente korrekt aktualisiert wird. Mit Cypress können Sie diese Art von Tests einfach durchführen, indem Sie mit den Filtern interagieren und die Ergebnisse überprüfen.

cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica

10. Verwendung der beforeEach-Funktion

Die Funktion

beforeEach ist nützlich, um den Anwendungsstatus vor jedem Test zu konfigurieren. Dies ist besonders wichtig, wenn Sie sicherstellen müssen, dass sich die Anwendung in einem Anfangszustand befindet, bevor Sie den Test ausführen.

npm install cypress --save-dev

11. Den Cypress-Return-Typ kennen

Cypress verwendet Versprechen, um die asynchrone Zeit zu verwalten, verarbeitet diese Versprechen jedoch automatisch, was das Testen vereinfacht. In vielen Fällen ist die Verwendung von „await“ oder „.then()“ nicht erforderlich, da Cypress dies intern erledigt.

12. Den Code organisieren, um Zeilen zu reduzieren

Es ist wichtig, die Tests organisiert und wiederverwendbar zu halten. Sie können Hilfsfunktionen erstellen und Codefragmente wiederverwenden.

Beispiel:

npx cypress open

13. Kennen der zusätzlichen Funktionen von Cypress

• Screenshots machen: Cypress kann während des Tests automatisch Screenshots erstellen. Dies hilft Ihnen zu visualisieren, was passiert ist, wenn ein Test fehlgeschlagen ist.

describe('Teste de Login', () => {
  it('Deve realizar o login com sucesso', () => {
    cy.visit('https://exemplo.com/login');
    cy.get('input[name="username"]').type('usuario');
    cy.get('input[name="password"]').type('senha123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

• Berichte generieren: Mit Cypress können Sie Testausführungsberichte erstellen, was die Analyse der Ergebnisse erleichtert.

• Cypress Run: Um die Tests im Headless-Modus (ohne grafische Oberfläche) auszuführen, verwenden Sie den Befehl:
  

cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();

• HTTP Request Mocking: Sie können mit Cypress Serverantworten simulieren, ohne echte Anrufe tätigen zu müssen. Dies ist nützlich, um Szenarios mit spezifischen Daten zu testen.

cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica

14. Mock Service Worker (MSW)-Installation

Mock Service Worker ist ein Tool, mit dem Sie HTTP-Anfragen in Ihren Tests abfangen können. Es kann mit Cypress verwendet werden, um Anfragen zu simulieren und Antworten zu steuern.

cy.get('.filter').select('Option 1');
cy.get('.item-list').should('have.length', 5);

Dann können Sie Netzwerkhandler konfigurieren, um die Anfragen abzufangen.

---

Fazit

In Modul 34 haben Sie gelernt, wie Sie mit Cypress E2E-Tests für Ihre Anwendung durchführen und so sicherstellen, dass sie in realen Nutzungssituationen korrekt funktioniert. Sie haben gelernt, wie Sie Cypress konfigurieren, Tests schreiben, mit Seitenelementen interagieren und Funktionen wie beforeEach, cy.get, Screenshots, Berichte und vieles mehr verwenden. Diese Tests sind von entscheidender Bedeutung, um sicherzustellen, dass Ihre Anwendung ordnungsgemäß funktioniert und keine neuen Fehler eingeführt werden.

Das obige ist der detaillierte Inhalt vonEcom Cypress-Tests. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!