Wie kann ich mit Cypress überprüfen, ob ein Element vorhanden ist oder nicht?

Cypress ist ein Tool, das Webentwicklern und Testern hilft, sicherzustellen, dass ihre Websites ordnungsgemäß funktionieren. Es kann prüfen, ob ein bestimmter Teil der Website existiert. Dies ist hilfreich, da es dazu beiträgt, Probleme zu erkennen, bevor Benutzer sie bemerken. Das Vorhandensein von Elementen ist eines der ersten Dinge, die Sie in Ihrem Projekt mit Cypress testen sollten. In diesem Artikel schauen wir uns an, wie man testet, ob ein Element existiert oder nicht. Und wenn es existiert, wie überprüfen Sie, ob es sichtbar ist oder nicht?.

Was sind Zypressenelemente?

• Elemente in Webanwendungen beziehen sich auf einzelne HTML-Elemente, die die Struktur und den Inhalt einer Webseite bilden.
• Beispiele für Elemente sind Schaltflächen, Textfelder, Links und Bilder, jedes mit seinen eigenen Attributen wie ID, Klasse und Stil.
• Diese Attribute können zur Interaktion mit CSS- oder JavaScript-Selektoren verwendet werden.

Elemente sind wichtig, weil sie die Struktur und das Verhalten einer Seite definieren.
Durch Auswahl und Interaktion mit Elementen können Sie automatisierte Tests erstellen, um sicherzustellen, dass sich die Webanwendung für alle Benutzer wie erwartet verhält.
In Cypress sind Elemente die HTML-Elemente Ihrer Website, mit denen Sie interagieren oder die Sie testen möchten.
Um mit diesen Elementen zu interagieren oder sie zu testen, wählen Sie sie einfach mit einem CSS-ähnlichen Selektor aus.

Warum ist die Existenz von Elementen in Zypressen wichtig?

Eine Website ist wie ein Puzzle mit interaktiven Teilen wie Schaltflächen und Formularen. Beim Testen muss sichergestellt werden, dass diese Teile an der richtigen Stelle sind und ordnungsgemäß funktionieren. Es ist wichtig zu prüfen, ob ein Element vorhanden ist, da sich verschiedene Teile einer Website aufgrund von Benutzeraktionen ändern können.

Zum Beispiel kann nach dem Ausfüllen eines Formulars die Schaltfläche „Senden“ angezeigt werden. Sie müssen also überprüfen, ob sie angezeigt wird. Dies hilft, Probleme zu erkennen, bevor Benutzer auf sie stoßen, und sorgt so für ein reibungsloseres Erlebnis.

Wie überprüfe ich die Existenz eines Elements mit Cypress?

Cypress bietet mehrere Methoden, um die Existenz von Elementen auf einer Webseite zu überprüfen. Lassen Sie uns in die einzelnen Ansätze eintauchen und verstehen, wie Sie sie effektiv umsetzen können.

1. cy.get() Methode

real-device-cloud-cta.jpg
Die Methode cy.get() in Cypress wird verwendet, um Elemente auf der Seite basierend auf verschiedenen Selektoren wie Klassennamen, IDs, Attributen und mehr auszuwählen und abzurufen. Um zu überprüfen, ob ein Element vorhanden ist, können Entwickler den Befehl Should() zusammen mit der Methode cy.get() verwenden.

Durch die Verwendung der .should(‘exist’)-Behauptung mit cy.get() wird sichergestellt, dass das ausgewählte Element auf der Seite vorhanden ist.

2. cy.contains() Methode

Die Methode cy.contains() wird verwendet, um ein Element basierend auf seinem Textinhalt zu finden. Diese Methode kann auch verwendet werden, um zu überprüfen, ob ein Element mit einem bestimmten Text auf der Seite vorhanden ist.

3. cy.find() Methode

Die Methode cy.find() ist nützlich, wenn es um verschachtelte Elemente innerhalb eines übergeordneten Elements geht. Sie können damit nach Elementen im Kontext eines anderen Elements suchen und so eine gezieltere Suche gewährleisten.

4. cy.get().should() mit benutzerdefinierten Behauptungen

Cypress ermöglicht Entwicklern das Erstellen benutzerdefinierter Behauptungen mithilfe der Methode cy.should(). Dies ist besonders nützlich, wenn Sie spezifischere Prüfungen implementieren möchten, die über die bloße Existenz von Elementen hinausgehen.

5. Verwendung von .should() mit Timeout

Manchmal werden Elemente asynchron oder mit einer leichten Verzögerung geladen. In solchen Fällen können Sie die .should()-Behauptung mit einem Timeout verwenden, um sicherzustellen, dass Cypress auf das Erscheinen des Elements wartet.

Bedingte Tests mit Cypress:
Beim bedingten Testen in Cypress wird bedingte Logik in Ihre Testskripte integriert, um während der Testausführung Entscheidungen zu treffen und Aktionen auf der Grundlage spezifischer Bedingungen oder Ergebnisse auszuführen. Mit dieser Methode können Sie flexiblere und anpassungsfähigere Tests entwerfen, die verschiedene Szenarien verarbeiten und entsprechend reagieren können. Cypress bietet eine Reihe von Befehlen und APIs, die Sie für effektive bedingte Tests nutzen können. Im Folgenden wird veranschaulicht, wie Cypress für bedingte Tests verwendet werden kann.

Beispiel -1

In diesem Beispiel besucht das Testskript eine Webseite und führt einen bedingten Test für die Existenz eines Elements sowie den Titel der Seite durch. Je nachdem, ob die Bedingungen erfüllt sind oder nicht, protokolliert das Skript entsprechende Meldungen in der Cypress-Testausgabe.

real-device-cloud-cta.jpg
Cypress bietet eine flüssige und intuitive Syntax für die Durchführung bedingter Tests in Ihren Testskripten. Sie können Behauptungen, Versprechen und reguläre JavaScript-Logik verwenden, um komplexe Bedingungen und Aktionen basierend auf den Ergebnissen dieser Bedingungen zu erstellen.

Bedingte Tests in Cypress helfen Ihnen, ähnlich wie bei anderen Test-Frameworks, vielseitigere und effektivere Tests zu erstellen, die sich an verschiedene Szenarien anpassen lassen, wodurch Ihr Testprozess robuster und zuverlässiger wird.

Beispiel 2:

In diesem Codeausschnitt stellt Cypress zunächst mithilfe von .should('exist') die Existenz des Schaltflächenelements sicher. Anschließend wird das Element mithilfe von .then() abgerufen und die anschließende bedingte Prüfung ermittelt, ob die Schaltfläche vorhanden ist. Wenn die Bedingung erfüllt ist und das Vorhandensein der Schaltfläche anzeigt, klickt Cypress mit cy.wrap(button).click() auf die Schaltfläche. Wenn die Bedingung fehlschlägt, ermöglicht der else-Block die Ausführung einer alternativen Aktion.

Reale Anwendungen von Elementexistenzprüfungen:

Denken wir an einige alltägliche Situationen, in denen die Überprüfung der Elementexistenz sehr hilfreich ist:

1. Formular-Erfolgsmeldung

Nachdem Benutzer ein Formular gesendet haben, wird möglicherweise eine Erfolgsmeldung angezeigt. Mit Cypress können Sie überprüfen, ob diese Meldung angezeigt wird, und so sicherstellen, dass Benutzer wissen, dass ihr Formular erfolgreich übermittelt wurde.

2. Menünavigation

Sie haben ein Dropdown-Menü, das angezeigt wird, wenn Benutzer mit der Maus über eine Schaltfläche fahren. Sie möchten bestätigen, dass das Menü angezeigt wird, wenn Benutzer diese Hover-Aktion ausführen.

3. Responsives Design

Auf Mobil- und Desktop-Versionen Ihrer Website können unterschiedliche Elemente angezeigt oder ausgeblendet werden. Sie können Cypress verwenden, um sicherzustellen, dass diese Elemente wie vorgesehen angezeigt oder ausgeblendet werden.

4. Benutzerzugriffskontrolle

Bestimmte Schaltflächen oder Links sind möglicherweise nur für bestimmte Benutzertypen sichtbar. Cypress hilft Ihnen zu überprüfen, ob diese Elemente den richtigen Personen angezeigt werden.

Lesen Sie auch: Cypress Parallel Testing: Eine Schritt-für-Schritt-Anleitung mit Codebeispielen

Abschluss

Webtests sind dank Tools wie Cypress keine schwierige und zeitaufwändige Aufgabe mehr. Die Funktion „Wenn ein Element vorhanden ist“ fasst die Essenz des bedingten Testens zusammen und ermöglicht es Entwicklern und Testern, Tests zu erstellen, die reale Benutzerinteraktionen möglichst genau nachahmen. Diese Funktionalität vereinfacht nicht nur das Testen, sondern fördert auch einen durchdachteren Ansatz für das Anwendungsverhalten. Durch die Nutzung der intuitiven Befehle und leistungsstarken Behauptungen von Cypress können Entwickler ihre Testsuiten optimieren, Redundanzen reduzieren und robustere Webanwendungen erstellen. Nutzen Sie also die Leistungsfähigkeit von Cypress und begeben Sie sich auf die Reise, um die Qualität Ihrer Webentwicklungsprojekte zu steigern.

Quelle: Dieser Blog wurde ursprünglich auf testgrid.io veröffentlicht

Das obige ist der detaillierte Inhalt vonWie kann ich mit Cypress überprüfen, ob ein Element vorhanden ist oder nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!