Cypress Promise und Cypress Asynchronous: 13 wichtige Fakten

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.

Cypress Promise und Cypress Asynchronous
Zypressenversprechen

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://lambdageeks.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 haben alle Testfunktionen die Ausführung abgeschlossen // Cypress hat alle Befehle in die Warteschlange gestellt und jetzt werden sie 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://lambdageeks.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 }); });
Synchrone Ausführung des Log-Befehls

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://lambdageeks.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("Hier wird das Log geprüft") // Protokollieren, um das asynchrone Verhalten zu prüfen }); });
Asynchrone Ausführung mit dem Befehl .then()

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 Wartet auf 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.
  • anstehend – 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. describe('Cypress Example', function () { it('klicken Sie auf die Technologieoption, um zur Technologie-URL zu navigieren', function () { cy.visit('https://lambdageeks. 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://lambdageeks.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') }); });
Cypress-Befehle mit intern verarbeiteten Versprechungen

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

//Verwenden Sie await nicht auf diese Weise. describe('Visit the page', () => { (async () => { cy.visit('https://lambdageeks.com/') await cy.url(). should('include', '/technology'); })() })

Stattdessen können Sie so verwenden

description('Besuche die Seite', () => { cy.visit('https://lambdageeks.com/').then(async () => warte auf 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.

Cypress-Versprechen installieren

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') });
Versprechen in Zypresse-Versprechen

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.

FAQs

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.

Nach oben scrollen