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.
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.
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:
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.
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.
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.
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:
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.
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.
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.
cy.get('input[name="username"]').type('usuario');
cy.get('button[type="submit"]').click();
cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica
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
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.
Es ist wichtig, die Tests organisiert und wiederverwendbar zu halten. Sie können Hilfsfunktionen erstellen und Codefragmente wiederverwenden.
Beispiel:
npx cypress open
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();
cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica
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.
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!
Was bedeutet elektronische Komponenten?
So laden Sie Videos von Douyin herunter
Computersoftwaresysteme umfassen
Verwendung zufälliger Funktionen in der C-Sprache
Der Unterschied zwischen insertbefore und before
So richten Sie den Ruhezustand im Win7-System ein
GameProtectNet-Lösung
Eigenschaft mit linearem Gradienten
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
