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.
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 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 }); });
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') }); });
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-promiseA telepítés után a terminál valahogy így fog kinézni.
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') });
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.
