Cypress Promise en Cypress Asynchroon: 13 belangrijke feiten

by

In onze vorige dit artikel, zagen we de configuraties in Cypress en verschillende opties die kunnen worden geconfigureerd in JSON-bestanden. Dit artikel zal het begrijpen Cypress Belofte en Cypress asynchroon gedrag met hands-on implementatie en voorbeelden in ons project. We zullen ook bespreken hoe we waits kunnen opnemen in onze asynchrone code en enkele essentiële functies zoals: wrap() en task(). Laten we beginnen!

Cypress Promise en Cypress Asynchroon:

Cypress Belofte en Cypress asynchroon natuur zijn enkele van de essentiële concepten. Net als elk ander Javascript-framework draait Cypress ook om Asynchronous en Promises. Cypress verwerkt al het asynchrone gedrag intern en is verborgen voor de gebruiker. We zullen gebruiken .then() om beloften handmatig af te handelen in onze code. Er zijn externe pakketten zoals Cypress-promise in npm waar we het asynchrone gedrag van Cypress kunnen manipuleren. We zullen elk van deze onderwerpen in detail bespreken.

Cypress Promise en Cypress Asynchroon
Cypress Belofte

Inhoudsopgave

Cypress asynchroon

Zoals we weten, is Cypress gebaseerd op: Knooppunt JS. Elk framework dat is geschreven vanuit Node.js is asynchrone. Voordat we het asynchrone gedrag van Cypress begrijpen, moeten we het verschil weten tussen synchrone en asynchrone aard.

Synchrone natuur

In een synchroon programma, tijdens het uitvoeren van een code, wordt alleen als de eerste regel met succes wordt uitgevoerd, de tweede regel uitgevoerd. Het wacht tot de eerste regel wordt uitgevoerd. Het loopt opeenvolgend.

Asynchrone aard

De code wordt gelijktijdig uitgevoerd, wacht tot elke stap wordt uitgevoerd zonder de status van de vorige opdracht te storen. Hoewel we onze code achtereenvolgens hebben geschreven, wordt asynchrone code uitgevoerd zonder te wachten op het voltooien van een stap en is deze volledig onafhankelijk van de vorige opdracht/code.

Wat is asynchroon in Cypress?

Alle Cypress-commando's zijn asynchroon van aard. Cypress heeft een wrapper die de sequentiële code die we schrijven begrijpt, deze in de wrapper plaatst en later wordt uitgevoerd wanneer we de code uitvoeren. Cypress doet dus al ons werk dat te maken heeft met asynchrone natuur en beloften!

Laten we er een voorbeeld van begrijpen.

 it('klik op de technologie-optie om naar de technologie-URL te navigeren', function () cy.visit('https://techiescience.com/') // Er wordt geen opdracht uitgevoerd //klik op de technologie-optie cy. get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img' ) // Hier wordt ook niets uitgevoerd .click() // Er gebeurt nog niets cy.url() // Ook hier worden geen opdrachten uitgevoerd .should('include', '/technology') // Nee, niets. }); // Nu zijn alle testfuncties uitgevoerd // Cypress heeft alle opdrachten in de wachtrij geplaatst en nu worden ze achter elkaar uitgevoerd

Dat was vrij eenvoudig en leuk. We hebben nu begrepen hoe Cypress Asynchronous-opdrachten werken. Laten we dieper ingaan op waar we synchronisatie- en asynchrone code proberen te combineren.

Cypress synchrone en asynchrone opdrachten mengen

Zoals we zagen, zijn Cypress-commando's asynchroon. Bij het injecteren van synchrone code wacht Cypress niet tot de synchronisatiecode wordt uitgevoerd; vandaar dat de synchronisatiecommando's als eerste worden uitgevoerd, zelfs zonder te wachten op eerdere Cypress-commando's. Laten we een kort voorbeeld bekijken om het beter te begrijpen.

 it('klik op de technologie-optie om naar de technologie-URL te navigeren', function () cy.visit('https://techiescience.com/') //klik op de technologie-optie 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() // Ook hier worden geen opdrachten uitgevoerd .should('include', '/technology') // Nee, niets. console.log("Dit is om het log te controleren") // Logboek om het async-gedrag te controleren }); });
logboekscherm 1
Synchrone uitvoering van de logopdracht

Het logboek wordt toegevoegd aan het einde van de code, wat een synchronisatieopdracht is. Wanneer we de test uitvoeren, kunt u zien dat het logboek al is afgedrukt voordat de pagina is geladen. Op deze manier wacht Cypress niet op het synchrone commando en voert het uit zelfs voordat het zijn commando's uitvoert.

Als we willen dat ze worden uitgevoerd zoals verwacht, moeten we het in de .then() functie. Laten we het begrijpen met een voorbeeld.

it('klik op de technologie-optie om naar de technologie-URL te navigeren', function () cy.visit('https://techiescience.com/') //klik op de technologie-optie 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() // Ook hier worden geen opdrachten uitgevoerd .should('include', '/technology') // Nee, niets. .then(() => { console.log("Dit is om het log te controleren") // Log in om het asynchrone gedrag te controleren }); });
na synchronisatielogboek
Asynchrone uitvoering met .then() commando

Wat is Cypress Promise?

Zoals we hierboven zagen, plaatst Cypress alle opdrachten in de wachtrij voordat ze worden uitgevoerd. Om het in detail te herformuleren, kunnen we zeggen dat: Cypress voegt beloften (commando's) toe aan een keten van beloften. Cypress somt alle opdrachten op als een belofte in een ketting.

Om Beloften te begrijpen, vergelijk ze met een realistisch scenario. De uitleg definieert de Belofte ook in asynchrone aard. Als iemand je iets belooft, doen ze ofwel verwerpen or vervullen de verklaring die ze hebben afgelegd. Evenzo, in asynchroon, belooft ofwel verwerpen or vervullen de code die we in een belofte inpakken.

Cypress zorgt echter voor alle beloften en het is niet nodig om ze te manipuleren met onze aangepaste code. Als Javascript-programmeurs worden we nieuwsgierig naar het gebruik van wacht in onze bevelen. Cypress API's zijn compleet anders dan we in het algemeen gewend zijn. We zullen hier in een later deel van deze tutorial dieper op ingaan.

Staten van cipresbeloften

Beloften hebben drie verschillende statussen op basis van de Cypress-commando's. Zij zijn

  • Vastbesloten – Treedt op wanneer de stap/opdracht met succes wordt uitgevoerd.
  • In behandeling – Vermeld waar de executie is begonnen, maar het resultaat is onzeker.
  • Afwijzing – Treedt op wanneer de stap is mislukt.

Als Javascript-programmeur hebben we de neiging om beloften in onze code te schrijven en deze terug te sturen. Bijvoorbeeld,

//Deze code is alleen bedoeld ter demonstratie write('Cypress Voorbeeld ', function () { it('klik op de technologie-optie om naar de technologie-URL te navigeren', function () { cy.visit('https://techiescience. com/') //klik op de technologie-optie 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(' omvatten', '/technologie') }) }); });

Hier geven we beloften terug aan elk van de commando's. Dit is niet vereist in Cypress. Gelukkig zorgt Cypress intern voor alle beloften en hoeven we niet bij elke stap beloftes toe te voegen. Cypress heeft de herkansbaarheid optie, waar het gedurende een bepaalde tijd opnieuw probeert om de opdracht uit te voeren. We zullen een voorbeeld van een code zien zonder handmatig toezeggingen op te nemen.

    it('klik op de technologie-optie om naar de technologie-URL te navigeren', function () cy.visit('https://techiescience.com/') //klik op de technologie-optie 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', '/technologie') }); });
SAMPLE
Cypress-commando's met beloften die intern worden afgehandeld

Bovenstaande code is niet onhandig en gemakkelijk te lezen en te begrijpen. Cypress handelt al het beloofde werk af en is verborgen voor de gebruiker. We hoeven ons dus geen zorgen te maken over het afhandelen of retourneren van de beloften waar dan ook!

Hoe gebruik je wait in Cypress?

Zoals hierboven besproken, heeft Cypress zijn manier om asynchrone code te verwerken door een opdrachtwachtrij te maken en deze in volgorde uit te voeren. Toevoegen awaits naar de commando's zal niet werken zoals verwacht. Aangezien Cypress alles intern afhandelt, raad ik aan om niet toe te voegen awaits naar de code.

Als u waits moet toevoegen, kunt u een bibliotheek van derden gebruiken, zoals Cypress-belofte dat verandert hoe Cypress werkt. Met deze bibliotheek kun je Beloften in de commando's, en gebruik wachten in de code

Laten we de manieren begrijpen om wacht te gebruiken en hoe ze niet te gebruiken.

Je moet wachten niet op deze manier gebruiken

//Gebruik niet op deze manier wachten beschrijven('Bezoek de pagina', () => { (async () => cy.visit('https://techiescience.com/') wachten op cy.url(). zou('include', '/technologie'); })() })

In plaats daarvan kun je het zo gebruiken

beschrijven('Bezoek de pagina', () => { cy.visit('https://techiescience.com/').then(async () => wacht op cy.url().should('include', ' /technologie') ()) })

Dit werkt voor alle Cypress-opdrachten.

Cipres Wrap

wrap() is een functie in Cypress die elk object oplevert dat als argument wordt doorgegeven.

Syntaxis

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

Laten we eens kijken naar een voorbeeld van hoe toegang te krijgen wrap() in onze code.

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

In het voorbeeld wikkelen we de getName en roep dan de naam ervoor op.

Cypress Wrap Belofte

We kunnen de beloften die door de code worden geretourneerd, inpakken. Opdrachten wachten tot de belofte is opgelost voordat ze toegang krijgen tot de opgeleverde waarde en. ga dan verder met het volgende commando of de volgende bewering.

const customPromise = new Promise((resolve, reject) => { // we gebruiken de setTimeout() functie om toegang te krijgen tot asynchrone code. setTimeout(() => { resolve({ type: 'success', message: 'Apples and Oranges' , }) }, 2500) }) it('zou moeten wachten tot beloften worden opgelost', () => { cy.wrap(customPromise).its('message').should('eq', 'Apples and Oranges' ) });

Wanneer het argument in cy.wrap() een belofte is, zal het wachten tot de belofte wordt opgelost. Als de belofte wordt afgewezen, mislukt de test.

Cypress-belofte npm

Als we de beloften van Cypress willen manipuleren, kunnen we bovendien een bibliotheek of pakket gebruiken met de naam Cypress-belofte en neem het op in onze code. Met dit pakket kunt u een Cypress commando in een belofte en stelt u in staat om af te wachten of te asynchroniseren in de code. Deze voorwaarden zullen echter niet werken before or beforeEach de blokken. In eerste instantie moeten we het pakket in ons project installeren door de volgende opdracht in de terminal door te geven.

npm i cypress-promise

Na installatie ziet de terminal er ongeveer zo uit.

Screenshot 2021 08 11 om 9.43.42 uur
Cypress-belofte installeren

Na de installatie moeten we de bibliotheek in ons testbestand importeren.

import promisify from 'cypress-promise'

Met deze bibliotheek kunt u de native Cypress-belofte maken en negeren en gebruiken in afwachting en asynchrone code in de code. U moet toegang krijgen tot de belofte met de promisify trefwoord. Laten we eens kijken naar een voorbeeld voor hetzelfde.

import promisify van 'cypress-promise' it('should tests with async/wait', async () => { const apple = wait promisify(cy.wrap('apple')) const oranges = wait promisify(cy.wrap ('sinaasappels')) expect(appel).to.equal('apple') expect(sinaasappels).to.equal('sinaasappels') });
Screenshot 2021 08 11 om 9.49.02 uur
Beloven in Cypress-belofte

Dit was heel eenvoudig en leuk om te leren! Op deze manier kunt u asynchrone code toewijzen in Cypress.

Cypress asynchrone taak

task() is een functie in Cypress die de code uitvoert in Node. Met deze opdracht kunt u van browser naar knooppunt schakelen en opdrachten in het knooppunt uitvoeren voordat het resultaat naar de code wordt geretourneerd.

Syntaxis

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

task() geeft een waarde of belofte terug. task() zal mislukken als de belofte wordt geretourneerd als: undefined. Op deze manier helpt het de gebruiker typefouten vast te leggen waar de gebeurtenis in sommige scenario's niet wordt afgehandeld. Als u geen waarde hoeft te retourneren, geef dan door null waarde.

Veelgestelde Vragen / FAQ

Is Cypress synchroon of asynchroon?

cipres is Asynchronous door de opdrachten in de wachtrij te retourneren in plaats van te wachten op de voltooiing van de uitvoering van de opdrachten. Hoewel het asynchroon is, voert het nog steeds alle teststappen opeenvolgend uit. Cypress Engine verwerkt al dit gedrag.

Is het mogelijk om de belofteketen in Cypress te vangen?

Cypress is zo ontworpen dat we de beloften niet kunnen waarmaken. Deze opdrachten zijn niet bepaald Beloften, maar het lijkt wel een belofte. Op deze manier kunnen we geen expliciete handlers toevoegen zoals catch.