In unserem vorherigen Artikel, haben wir die Konfigurationen in Cypress und verschiedene Optionen gesehen, die in JSON-Dateien konfiguriert werden können. Dieser Artikel wird es verstehen Zypressenversprechen und Cypress Asynchron Verhalten mit praktischer Umsetzung und Beispielen in unserem Projekt. Wir werden auch besprechen, wie wir erwarten, in unseren asynchronen Code zu integrieren und einige wesentliche Funktionen wie wrap() und task(). Lass uns anfangen!

Cypress Promise und Cypress Asynchronous:

Zypressenversprechen und Cypress Asynchron Natur sind einige der wesentlichen Konzepte. Wie jedes andere Javascript-Framework dreht sich auch Cypress um Asynchronous und Promises. Cypress verarbeitet das gesamte asynchrone Verhalten intern und ist für den Benutzer verborgen. Wir werden verwenden .then() Versprechen manuell in unserem Code zu handhaben. Es gibt externe Pakete wie Cypress-Promise in npm, mit denen wir das asynchrone Verhalten von Cypress manipulieren können. Wir werden jedes dieser Themen im Detail besprechen.

Inhaltsverzeichnis

Cypress Asynchron

Wie wir wissen, basiert Cypress auf Knoten JS. Jedes Framework, das aus Node.js erstellt wurde, ist asynchron. Bevor wir das asynchrone Verhalten von Cypress verstehen, sollten wir den Unterschied zwischen synchroner und asynchroner Natur kennen.

Synchrone Natur

In einem synchronen Programm wird während der Ausführung eines Codes nur dann die zweite Zeile ausgeführt, wenn die erste Zeile erfolgreich ausgeführt wurde. Es wartet, bis die erste Zeile ausgeführt wird. Es läuft sequentiell.

Asynchrone Natur

Der Code wird gleichzeitig ausgeführt, wartet darauf, dass jeder Schritt ausgeführt wird, ohne den Zustand des vorherigen Befehls zu stören. Obwohl wir unseren Code sequentiell geschrieben haben, wird asynchroner Code ausgeführt, ohne auf den Abschluss eines Schritts zu warten, und ist völlig unabhängig vom vorherigen Befehl/Code.

Was ist asynchron in Cypress?

Alle Cypress-Befehle sind von Natur aus asynchron. Cypress hat einen Wrapper, der den von uns geschriebenen sequentiellen Code versteht, ihn in den Wrapper einreiht und später ausgeführt wird, wenn wir den Code ausführen. Cypress erledigt also all unsere Arbeit, die mit asynchroner Natur und Versprechen zu tun hat!

Lassen Sie uns ein Beispiel dafür verstehen.

 it('klicken Sie auf die Technologieoption, um zur Technologie-URL zu navigieren', function () { cy.visit('https://techiescience.com/') // Es wird kein Befehl ausgeführt //klicken Sie auf die Technologieoption cy. get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img' ) // Auch hier wird nichts ausgeführt .click() // Es passiert noch nichts cy.url() // Auch hier werden keine Befehle ausgeführt .should('include', '/technology') // Nein, nichts. }); // Jetzt ist die Ausführung aller Testfunktionen abgeschlossen // Cypress hat alle Befehle in die Warteschlange gestellt und sie werden nun nacheinander ausgeführt

Das war ziemlich einfach und hat Spaß gemacht. Wir haben jetzt verstanden, wie Cypress Asynchronous-Befehle funktionieren. Lassen Sie uns tiefer in die Bereiche eintauchen, in denen wir versuchen, Sync- und Async-Code zu mischen.

Mischen von synchronen und asynchronen Cypress-Befehlen

Wie wir gesehen haben, sind Cypress-Befehle asynchron. Beim Einfügen von synchronem Code wartet Cypress nicht auf die Ausführung des Sync-Codes; Daher werden die Sync-Befehle zuerst ausgeführt, auch ohne auf vorherige Cypress-Befehle zu warten. Schauen wir uns zum besseren Verständnis ein kurzes Beispiel an.

 it('klicken Sie auf die Technologieoption, um zur Technologie-URL zu navigieren', function () { cy.visit('https://techiescience.com/') //klicken Sie auf die Technologieoption cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() // Auch hier werden keine Befehle ausgeführt .should('include', '/technology') // Nein, nichts. console.log("Dies dient zur Überprüfung des Protokolls") // Protokoll zur Überprüfung des asynchronen Verhaltens }); });

Das Protokoll wird am Ende des Codes hinzugefügt, bei dem es sich um einen Synchronisierungsbefehl handelt. Wenn wir den Test ausführen, können Sie sehen, dass das Protokoll gedruckt wurde, noch bevor die Seite geladen wurde. Auf diese Weise wartet Cypress nicht auf den synchronen Befehl und führt ihn aus, noch bevor seine Befehle ausgeführt werden.

Wenn wir möchten, dass sie wie erwartet ausgeführt werden, sollten wir es in die .then() Funktion. Lassen Sie es uns anhand eines Beispiels verstehen.

it('klicken Sie auf die Technologieoption, um zur Technologie-URL zu navigieren', function () { cy.visit('https://techiescience.com/') //klicken Sie auf die Technologieoption cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() // Auch hier werden keine Befehle ausgeführt .should('include', '/technology') // Nein, nichts. .then(() => { console.log("Dies dient zur Überprüfung des Protokolls") // Protokollieren, um das asynchrone Verhalten zu überprüfen }); });

Was ist Cypress Promise?

Wie wir oben gesehen haben, stellt Cypress alle Befehle vor der Ausführung in die Warteschlange. Um es im Detail umzuformulieren, können wir das sagen Cypress fügt Versprechen (Befehle) in eine Kette von Versprechen ein. Cypress fasst alle Befehle als Versprechen in einer Kette zusammen.

Um Versprechen zu verstehen, vergleichen Sie sie mit einem realen Szenario. Die Erklärung definiert das Versprechen auch in asynchroner Natur. Wenn dir jemand verspricht, dann auch ablehnen or erfüllen die Aussage, die sie gemacht haben. Ebenso verspricht asynchron entweder ablehnen or erfüllen den Code, den wir in ein Versprechen packen.

Cypress kümmert sich jedoch um alle Versprechen, und es ist unnötig, sie mit unserem benutzerdefinierten Code zu manipulieren. Als Javascript-Programmierer werden wir neugierig auf die Verwendung auf Sie in unseren Befehlen. Cypress APIs sind völlig anders, als wir es allgemein gewohnt sind. Wir werden uns dies in einem späteren Teil dieses Tutorials genauer ansehen.

Staaten von Cypress Promises

Versprechen haben drei verschiedene Zustände basierend auf den Cypress-Befehlen. Sie sind

• Aufgelöst – Tritt auf, wenn der Schritt/Befehl erfolgreich ausgeführt wird.
• Zu überprüfen – Geben Sie an, wo die Hinrichtung begonnen hat, aber das Ergebnis ist ungewiss.
• Ablehnung – Tritt auf, wenn der Schritt fehlgeschlagen ist.

Als Javascript-Programmierer neigen wir dazu, Versprechen in unseren Code zu schreiben und diese zurückzugeben. Beispielsweise,

//Dieser Code dient nur zu Demonstrationszwecken beschreiben('Cypress-Beispiel ', function () { it('Klicken Sie auf die Technologieoption, um zur Technologie-URL zu navigieren', function () { cy.visit('https://techiescience. com/') //klicken Sie auf die Technologieoption cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl- photo-content > a > .fl-photo-img') .then(() => { return cy.click(); }) cy.url() .then(() => { return cy.should(' include', '/technology') }) }); });

Hier geben wir Versprechen an jeden der Befehle zurück. Dies ist in Cypress nicht erforderlich. Glücklicherweise kümmert sich Cypress intern um alle Zusagen, und wir müssen nicht bei jedem Schritt Zusagen hinzufügen. Zypresse hat die Wiederholbarkeit Option, wo es für eine bestimmte Zeit versucht, den Befehl auszuführen. Wir sehen ein Beispiel für einen Code ohne manuelle Zusagen.

    it('klicken Sie auf die Technologieoption, um zur Technologie-URL zu navigieren', function () { cy.visit('https://techiescience.com/') //klicken Sie auf die Technologieoption cy.get('.fl- node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') .click() cy .url() .should('include', '/technology') }); });

Der obige Code ist nicht umständlich und leicht zu lesen und zu verstehen. Cypress übernimmt die gesamte Versprechensarbeit und ist vor dem Benutzer verborgen. Wir müssen uns also nirgendwo um die Handhabung oder Rückgabe der Versprechen kümmern!

Wie verwendet man Await in Cypress?

Wie oben besprochen, verarbeitet Cypress asynchronen Code, indem es eine Befehlswarteschlange erstellt und diese nacheinander ausführt. Hinzufügen awaits zu den Befehlen funktioniert nicht wie erwartet. Da Cypress alles intern abwickelt, würde ich empfehlen, es nicht hinzuzufügen awaits zum Code.

Wenn Sie Waits hinzufügen müssen, können Sie eine Drittanbieterbibliothek wie . verwenden Zypresse-Versprechen das ändert, wie Cypress funktioniert. Diese Bibliothek können Sie verwenden Promises in den Befehlen und verwenden Sie – warten auf Sie! im Code

Lassen Sie uns verstehen, wie man Waits verwendet und wie man sie nicht verwendet.

Sie sollten solche Waits nicht verwenden

//Await nicht auf diese Weise verwenden beschreiben('Besuchen Sie die Seite', () => { (async () => { cy.visit('https://techiescience.com/') Warte auf cy.url(). sollte('include', '/technology'); })() })

Stattdessen können Sie so verwenden

beschreiben('Besuchen Sie die Seite', () => { cy.visit('https://techiescience.com/').then(async () => waiting cy.url().should('include', ' /Technologie') ()) })

Dies funktioniert für alle Cypress-Befehle.

Zypressenwickel

wrap() ist eine Funktion in Cypress, die jedes Objekt liefert, das als Argument übergeben wird.

Syntax

cy.wrap(subject)
cy.wrap(subject, options)

Sehen wir uns ein Beispiel für den Zugriff an wrap() in unserem Code.

const getName = () => { return 'Horse' } cy.wrap({ name: getName }).invoke('name').should('eq', 'Horse') // true

Im Beispiel wickeln wir die getName und rufen Sie dann den Namen dafür auf.

Zypressen-Wrap-Versprechen

Wir können die vom Code zurückgegebenen Versprechen umschließen. Befehle warten darauf, dass das Promise aufgelöst wird, bevor sie auf den zurückgegebenen Wert zugreifen und. Fahren Sie dann mit dem nächsten Befehl oder der nächsten Assertion fort.

const customPromise = new Promise((auflösen, ablehnen) => { // Wir verwenden die Funktion setTimeout(), um auf asynchronen Code zuzugreifen. setTimeout(() => { resolve({ type: 'success', message: 'Apples and Oranges' , }) }, 2500) }) it('sollte warten, bis Versprechungen aufgelöst werden', () => { cy.wrap(customPromise).its('message').should('eq', 'Apples and Oranges' ) });

Wenn das Argument in cy.wrap() ein Versprechen ist, wartet es, bis das Versprechen aufgelöst wird. Wenn das Versprechen abgelehnt wird, schlägt der Test fehl.

Zypresse-Versprechen npm

Wenn wir die Versprechen von Cypress manipulieren möchten, können wir zusätzlich eine Bibliothek oder ein Paket namens . verwenden Zypresse-Versprechen und in unseren Code einbauen. Mit diesem Paket können Sie eine Zypressen-Befehl in ein Versprechen und ermöglicht es Ihnen, im Code zu warten oder zu asynchronisieren. Diese Bedingungen werden jedoch nicht funktionieren before or beforeEach die Blöcke. Zunächst sollten wir das Paket in unserem Projekt installieren, indem wir den folgenden Befehl im Terminal übergeben.

npm i cypress-promise

Nach der Installation sieht das Terminal ungefähr so ​​​​aus.

Nach der Installation sollten wir die Bibliothek in unsere Testdatei importieren.

import promisify from 'cypress-promise'

Mit dieser Bibliothek können Sie das native Cypress-Versprechen erstellen und überschreiben und im Code Waits und Async verwenden. Sie sollten auf das Versprechen zugreifen mit dem promisify Stichwort. Schauen wir uns ein Beispiel dafür an.

import promisify from 'cypress-promise' it('sollte Tests mit async/await ausführen', async () => { const apple = await promisify(cy.wrap('apple')) const oranges = await promisify(cy.wrap ('Orangen')) Expect(Apfel).to.equal('Apfel') Expect(Orangen).to.Equal('Orangen') });

Das war sehr einfach und hat Spaß gemacht! Auf diese Weise können Sie in Cypress asynchronen Code zuweisen.

Cypress Async-Aufgabe

task() ist eine Funktion in Cypress, die den Code in Node. Mit diesem Befehl können Sie vom Browser zum Knoten wechseln und Befehle im Knoten ausführen, bevor Sie das Ergebnis an den Code zurückgeben.

Syntax

cy.task(event)
cy.task(event, arg)
cy.task(event, arg, options)

task() gibt entweder einen Wert oder ein Versprechen zurück. task() wird fehlschlagen, wenn das Versprechen zurückgegeben wird als undefined. Auf diese Weise hilft es dem Benutzer, Tippfehler zu erfassen, bei denen das Ereignis in einigen Szenarien nicht behandelt wird. Wenn Sie keinen Wert zurückgeben müssen, übergeben Sie null Wert.

Häufig gestellte Fragen

Ist Cypress synchron oder asynchron?

Zypresse ist asynchrone indem die Befehle in der Warteschlange zurückgegeben werden, anstatt auf den Abschluss der Ausführung der Befehle zu warten. Obwohl es asynchron ist, führt es dennoch alle Testschritte nacheinander aus. Cypress Engine handhabt all dieses Verhalten.

Ist es möglich, die Versprechenskette in Cypress zu fangen?

Cypress ist so konzipiert, dass wir die Versprechen nicht einhalten können. Diese Befehle sind nicht gerade Versprechen, aber es sieht aus wie ein Versprechen. Auf diese Weise können wir keine expliziten Handler hinzufügen wie catch.

Aishwarya Lakshmi

Hallo ... ich bin Aishwarya Lakshmi, habe meinen B.Tech abgeschlossen und verfüge über mehr als zwei Jahre Erfahrung im Testbereich. Ich bin ein Test-Enthusiast und habe eine Leidenschaft für das Testen. Ich liebe es, neue Dinge in meinem Bereich zu entdecken und sie mit meinen Kollegen zu teilen. In meiner Freizeit schreibe ich gerne Blogs auf einfachste, aber effektive Weise. Als Tester möchte ich, dass die Dinge perfekt sind, deshalb wünsche ich meinen Lesern, dass sie die Technologie perfekt verstehen. Ich halte mich über die neuen Technologien im Zusammenhang mit Tests auf dem Laufenden und nehme mir Zeit, sie zu verstehen. Ich freue mich, den Studierenden dabei zu helfen, die Konzepte beim Testen zu verstehen.