Cypress Promise és Cypress Asynchronous: 13 fontos tény

Előzőnkben cikk, láttuk a Cypress konfigurációit és a JSON-fájlokban konfigurálható különféle lehetőségeket. Ez a cikk megérti Cypress Promise és a Cypress Aszinkron magatartás gyakorlati megvalósítással és példákkal projektünkben. Azt is megvitatjuk, hogyan építsük be a várakozásokat az aszinkron kódunkba, és néhány alapvető funkciót, mint pl wrap() és a task(). Lássunk neki!

Cypress Promise és Cypress Asynchronous:

Cypress Promise és a Cypress Aszinkron a természet néhány alapvető fogalma. Mint minden más Javascript-keretrendszer, a Cypress is az Asynchronous és az Promises körül forog. A Cypress az összes aszinkron viselkedést belsőleg kezeli, és rejtve van a felhasználó elől. Használni fogjuk .then() hogy kézzel kezeljük az ígéreteket a kódunkban. Vannak külső csomagok, mint például a Cypress-promise az npm-ben, ahol manipulálhatjuk a Cypress aszinkron viselkedését. Mindegyik témakört részletesen megvitatjuk.

Cypress Promise és Cypress Asynchronous
Cypress Promise

Tartalomjegyzék

Cypress Aszinkron

Mint tudjuk, a Cypress alapja Csomópont JS. Bármely keretrendszer, amely Node.js-ből épül fel aszinkron. Mielőtt megértené a Cypress aszinkron viselkedését, ismernünk kell a különbséget a szinkron és az aszinkron természet között.

Szinkron természet

Szinkron programban egy kód végrehajtása során csak az első sor sikeres végrehajtása esetén kerül végrehajtásra a második sor. Megvárja, amíg az első sor végrehajtásra kerül. Szekvenciálisan fut.

Aszinkron természet

A kód egyszerre fut le, és megvárja, amíg minden lépés végrehajtásra kerül anélkül, hogy az előző parancs állapotát zavarná. Bár a kódunkat szekvenciálisan írtuk, az aszinkron kód végrehajtásra kerül anélkül, hogy megvárná a lépések befejezését, és teljesen független az előző parancstól/kódtól.

Mi az aszinkron a Cypressben?

Minden Cypress parancs aszinkron jellegű. A Cypressnek van egy burkolója, amely megérti az általunk írt szekvenciális kódot, sorba rendezi azokat a burkolóban, és később fut le, amikor végrehajtjuk a kódot. Tehát a Cypress elvégzi az összes munkánkat, ami az aszinkron jelleggel és az ígéretekkel kapcsolatos!

Értsünk rá egy példát.

 it('kattintson a technológiai lehetőségre a technológiai URL-hez való navigáláshoz', function () { cy.visit('https://lambdageeks.com/') // Nincs parancs végrehajtva //kattintson a cy technológiai beállításra. get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img' ) // Itt sem hajtódik végre semmi .click() // Még nem történik semmi cy.url() // Itt sincsenek végrehajtva parancsok .should('include', '/technology') // Nem, semmi. }); // Most az összes tesztfüggvény végrehajtása befejeződött // A Cypress sorba állította az összes parancsot, és most sorban fognak futni

Ez elég egyszerű és szórakoztató volt. Most már megértettük, hogyan működnek a Cypress Asynchronous parancsok. Merüljünk el mélyebben abban, hogy hol próbáljuk keverni a szinkron és az aszinkron kódot.

Cypress Synchronous és Asynchronous parancsok keverése

Mint láttuk, a Cypress parancsok aszinkronok. Szinkron kód beszúrásakor a Cypress nem várja meg a szinkronkód végrehajtását; így a szinkronizálási parancsok először futnak le anélkül, hogy megvárnák a korábbi Cypress parancsokat. Nézzünk egy rövid példát, hogy jobban megértsük.

 it('kattintson a technológiai lehetőségre a technológiai URL-hez való navigáláshoz', function () { cy.visit('https://lambdageeks.com/') //kattintson a technológiai lehetőségre 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() // Itt sem futnak parancsok }); });
A log parancs szinkron végrehajtása

A napló a kód végére kerül hozzáadásra, amely egy szinkronizálási parancs. Amikor lefuttatjuk a tesztet, láthatja, hogy a napló már az oldal betöltése előtt ki lett nyomtatva. Így a Cypress nem várja meg a szinkron parancsot, és még a parancsok végrehajtása előtt végrehajtja azt.

Ha azt akarjuk, hogy a várt módon hajtsák végre, akkor csomagoljuk be a .then() funkció. Értsük meg egy példával.

it('kattintson a technológiai lehetőségre a technológiai URL-hez való navigáláshoz', function () { cy.visit('https://lambdageeks.com/') //kattintson a technológiai lehetőségre 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() // Itt sincsenek végrehajtva parancsok .should('include', '/technology') // Nem, semmi. .then(() => { console.log("Ez a napló ellenőrzése") // Jelentkezzen be az aszinkron viselkedésének ellenőrzéséhez }); });
Aszinkron végrehajtás a .then() paranccsal

Mi az a Cypress Promise?

Ahogy fentebb láttuk, a Cypress a végrehajtás előtt sorba állítja az összes parancsot. Hogy részletesen átfogalmazzuk, azt mondhatjuk A Cypress ígéreteket (parancsokat) ad hozzá az ígéretek láncához. A Cypress az összes parancsot ígéretként láncba foglalja.

Az ígéretek megértéséhez hasonlítsa össze őket egy valós forgatókönyvvel. A magyarázat az Ígéretet is aszinkron jelleggel határozza meg. Ha valaki megígéri neked, akkor is elutasít or eleget tesz az általuk tett nyilatkozatot. Hasonlóképpen, aszinkronban, ígéretek is elutasít or eleget tesz a kód, amit ígéretbe csomagolunk.

A Cypress azonban gondoskodik minden ígéretről, és szükségtelen ezeket egyedi kódunkkal manipulálni. Javascript programozóként kíváncsiak vagyunk a használatára Önre vár parancsainkban. A Cypress API-k teljesen mások, mint amit általában megszoktunk. Ennek az oktatóanyagnak egy későbbi részében ezt részletesen megvizsgáljuk.

A ciprusi ígéretek államai

Az ígéretek három különböző állapotúak a Cypress parancsok alapján. Ők

  • Megoldott – Akkor fordul elő, amikor a lépés/parancs sikeresen végrehajtódik.
  • Függőben levő – Adja meg, hol kezdődött a végrehajtás, de az eredmény bizonytalan.
  • Elutasítás – Akkor fordul elő, ha a lépés meghiúsult.

Javascript programozóként hajlamosak vagyunk ígéreteket írni a kódunkba és visszaadni. Például,

//Ez a kód csak demonstrációra szolgál description('Cypress példa ', function () { it('kattintson a technológiai lehetőségre a technológiai URL-hez való navigáláshoz'), function () { cy.visit('https://lambdageeks. com/') //kattints a technológiai lehetőségre 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(' tartalmazza', '/technológia') }) }); });

Itt minden parancshoz ígéretet adunk. Ez nem kötelező a Cypressben. Szerencsére a Cypress belsőleg gondoskodik az összes ígéretről, és nem kell minden lépésben ígéreteket hozzáadnunk. A ciprusnak megvan a újrapróbálhatóság opciót, ahol egy adott ideig újra próbálkozik a parancs végrehajtásával. Példát fogunk látni egy olyan kódra, amely nem tartalmazza az ígéreteket manuálisan.

    it('kattintson a technológiai lehetőségre a technológiai URL-hez való navigáláshoz', function () { cy.visit('https://lambdageeks.com/') //kattintson a technológiai lehetőségre 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 parancsok belsőleg kezelt ígéretekkel

A fenti kód nem ügyetlen, könnyen olvasható és érthető. A Cypress kezeli az összes ígéretet, és el van rejtve a felhasználó elől. Így nem kell aggódnunk az ígéretek kezelése vagy visszaadása miatt!

Hogyan használod a await-t a Cypress-ben?

Amint fentebb tárgyaltuk, a Cypress képes kezelni az aszinkron kódot úgy, hogy létrehoz egy parancssort, és sorban futtatja azokat. Hozzáadás awaits a parancsok nem a várt módon fognak működni. Mivel a Cypress mindent belsőleg kezel, azt javaslom, hogy ne adja hozzá awaits a kódhoz.

Ha meg kell adni a várakozásokat, használhat harmadik féltől származó könyvtárat, például Ciprus-ígéret ez megváltoztatja a Cypress működését. Ez a könyvtár lehetővé teszi a használatát ígér a parancsokban, és használja várják a kódban

Hadd értsük meg, hogy miként használhatjuk, és hogyan ne használjuk őket.

Nem szabad ilyen várakozásokat használni

//Ne használja a await this way-t description('Látogassa meg az oldalt', () => { (async () => { cy.visit('https://lambdageeks.com/')) await cy.url(). kellene('tartalmazza', '/technológia'); })() })

Ehelyett használhatja így

description('Látogassa meg az oldalt', () => { cy.visit('https://lambdageeks.com/').then(async () => várja a cy.url().should('include',') /technológia') ()) })

Ez minden Cypress parancsnál működik.

Cypress Wrap

wrap() egy függvény a Cypressben, amely bármely argumentumként átadott objektumot eredményez.

Szintaxis

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

Nézzünk egy példát a hozzáférésre wrap() kódunkban.

const getName = () => { return 'Ló' } cy.wrap({ név: getName }).invoke('name').should('eq', 'Horse') // igaz

A példában becsomagoljuk a getName majd hívd meg a nevet.

Cypress Wrap Promise

A kód által visszaadott ígéreteket becsomagolhatjuk. A parancsok megvárják az ígéret megoldását, mielőtt hozzáférnének a kapott értékhez és. majd folytassa a következő parancsra vagy állításra.

const customPromise = new Promise((resolve, reject) => { // a setTimeout() függvényt használjuk az aszinkron kód eléréséhez. setTimeout(() => { solve({ type: 'siker', üzenet: 'Almák és narancsok' , }) }, 2500) }) it('meg kell várni az ígéretek megoldására', () => { cy.wrap(customPromise).its('message').should('eq', 'Alma és narancs' ) });

Amikor az érv be cy.wrap() ígéret, megvárja, amíg az ígéret megoldódik. Ha az ígéretet elutasítják, akkor a teszt kudarcot vall.

Cypress-ígéret npm

Ha manipulálni akarjuk a Cypress ígéreteit, akkor ezen kívül használhatunk egy könyvtárat vagy csomagot is Ciprus-ígéret és beépítjük a kódunkba. Ez a csomag lehetővé teszi az a Cypress parancs ígéretté, és lehetővé teszi, hogy várjon vagy aszinkronizáljon a kódban. Ezek a feltételek azonban nem működnek before or beforeEach a blokkokat. Kezdetben telepítenünk kell a csomagot a projektünkben a következő parancs átadásával a terminálban.

npm i cypress-promise

A telepítés után a terminál valahogy így fog kinézni.

Cypress-promise telepítés

A telepítés után importálnunk kell a könyvtárat a tesztfájlunkba.

import promisify from 'cypress-promise'

Ezzel a könyvtárral létrehozhatja és felülírhatja a natív Cypress ígéretet, valamint a kódban a várakozás és aszinkron használatát. Az ígérethez a promisify kulcsszó. Nézzünk egy példát ugyanerre.

import promisify from 'cypress-promise' it('teszteket kell futtatni az async/await segítségével', async () => { const apple = await promisify(cy.wrap('apple')) const oranges = vár promisify(cy.wrap ('narancsok')) expect(alma).to.equal('alma') expect(narancsok).to.equal('narancsok') });
Ígéret a ciprusi ígéretben

Ezt nagyon egyszerű és szórakoztató volt megtanulni! Ily módon aszinkron kódot rendelhet hozzá a Cypressben.

Cypress Async Task

task() egy függvény a Cypressben, amely a kódot a Node-ban futtatja. Ez a parancs lehetővé teszi, hogy böngészőről csomópontra váltson, és parancsokat hajtson végre a csomópontban, mielőtt az eredményt visszaküldi a kódba.

Szintaxis

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

task() értéket vagy ígéretet ad vissza. task() meghiúsul, ha az ígéretet visszaadják undefined. Ily módon segít a felhasználónak elfogni az elírási hibákat, amikor az eseményt bizonyos forgatókönyvekben nem kezelik. Ha nem kell visszaadnia semmilyen értéket, akkor adja át null értéket.

Gyakran ismételt kérdések

A Cypress szinkron vagy aszinkron?

A ciprus az Aszinkron úgy, hogy visszaadja a sorba állított parancsokat ahelyett, hogy a parancsok végrehajtásának befejezésére várna. Noha aszinkron, az összes tesztlépést szekvenciálisan futtatja. A Cypress Engine kezeli mindezt a viselkedést.

Meg lehet fogni az ígéretláncot a Cypressben?

A Cypress úgy van megtervezve, hogy nem fogjuk tudni betartani az ígéreteket. Ezek a parancsok nem éppen ígéretek, de ígéretnek tűnik. Így nem tudunk olyan explicit kezelőket hozzáadni, mint pl catch.

Lapozzon a lap tetejére