Cypress Promise a Cypress Asynchronous: 13 důležitých faktů

by

V našem předchozím článek, viděli jsme konfigurace v Cypressu a různé možnosti, které lze konfigurovat v souborech JSON. Tento článek pochopí Cypress slib a Cypress asynchronní chování s praktickou implementací a příklady v našem projektu. Budeme také diskutovat o tom, jak začlenit čekání do našeho asynchronního kódu a některé základní funkce jako wrap() a task(). Začněme!

Cypress Promise a Cypress asynchronní:

Cypress slib a Cypress asynchronní příroda jsou některé ze základních pojmů. Jako každý jiný rámec Javascriptu se i Cypress točí kolem asynchronních a příslibů. Cypress zpracovává veškeré asynchronní chování interně a je skryto před uživatelem. Budeme používat .then() ručně zpracovávat sliby v našem kódu. Existují externí balíčky jako Cypress-slib v NPM, kde můžeme manipulovat s asynchronním chováním Cypressu. Každé z těchto témat probereme podrobně.

Cypress Promise a Cypress asynchronní
Cypress slib

Obsah

Cypress asynchronní

Jak víme, Cypress je založen na Uzel JS. Jakýkoli rámec, který je napsán, je sestaven z Node.js asynchronní. Než porozumíme asynchronnímu chování Cypressu, měli bychom znát rozdíl mezi synchronní a asynchronní povahou.

Synchronní povaha

V synchronním programu, během provádění kódu, bude spuštěn pouze druhý řádek, pokud je úspěšně spuštěn první řádek. Čeká, dokud nebude spuštěn první řádek. Běží sekvenčně.

Asynchronní povaha

Kód se spouští současně a čeká na spuštění každého kroku bez obtěžování stavu předchozího příkazu. Ačkoli jsme postupně psali náš kód, asynchronní kód se spouští bez čekání na dokončení jakéhokoli kroku a je zcela nezávislý na předchozím příkazu/kódu.

Co je asynchronní v Cypressu?

Všechny příkazy Cypress jsou asynchronní. Cypress má obálku, která rozumí sekvenčnímu kódu, který píšeme, zařazuje je do obálky a spustí se později, když spustíme kód. Cypress tedy dělá veškerou naši práci, která souvisí s asynchronní povahou a sliby!

Pojďme tomu porozumět.

 it('kliknutím na možnost technologie přejděte na adresu URL technologie', function () { cy.visit('https://techiescience.com/') // Není proveden žádný příkaz //klikněte na možnost technologie cy. get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img' ) // Ani zde se nic neprovádí .click() // Zatím se nic neděje cy.url() // Ani zde nejsou provedeny žádné příkazy .should('include', '/technology') // Ne, nic. }); // Nyní jsou všechny testovací funkce dokončeny // Cypress zařadil všechny příkazy do fronty a nyní poběží v pořadí

To bylo docela jednoduché a zábavné. Nyní jsme pochopili, jak fungují asynchronní příkazy Cypress. Pojďme se ponořit hlouběji do míst, kde se pokoušíme smíchat synchronizační a asynchronní kód.

Míchání synchronních a asynchronních příkazů Cypress

Jak jsme viděli, příkazy Cypress jsou asynchronní. Při vkládání libovolného synchronního kódu Cypress nečeká na spuštění synchronizačního kódu; synchronizační příkazy se tedy spustí jako první, i když nečekáte na žádné předchozí příkazy Cypress. Podívejme se na krátký příklad, abychom lépe porozuměli.

 it('kliknutím na možnost technologie přejděte na adresu URL technologie', function () { cy.visit('https://techiescience.com/') //klikněte na možnost technologie 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() // Ani zde nebyly provedeny žádné příkazy .should('include', '/technology') // Ne, nic. console.log("Toto je pro kontrolu protokolu") // Zaznamenat pro kontrolu asynchronního chování }); });
log screenshot 1
Synchronní spuštění příkazu log

Protokol se přidá na konec kódu, což je příkaz synchronizace. Když spustíme test, uvidíte, že protokol byl vytištěn ještě před načtením stránky. Tímto způsobem Cypress nečeká na synchronní příkaz a provede jej ještě před spuštěním jeho příkazů.

Pokud chceme, aby prováděly podle očekávání, měli bychom to zabalit do souboru .then() funkce. Pojďme to pochopit na příkladu.

it('kliknutím na možnost technologie přejděte na adresu URL technologie', function () { cy.visit('https://techiescience.com/') //klikněte na možnost technologie 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() // Ani zde nebyly provedeny žádné příkazy .should('include', '/technology') // Ne, nic. .then(() => { console.log("Toto je pro kontrolu protokolu") // Log pro kontrolu asynchronního chování }); });
po protokolu synchronizace
Asynchronní spuštění příkazem .then ()

Co je to Cypress Promise?

Jak jsme viděli výše, Cypress zařazuje všechny příkazy před spuštěním. Abychom to přeformulovali podrobně, můžeme to říci Cypress přidává sliby (příkazy) do řetězce slibů. Cypress shrnuje všechny příkazy jako příslib v řetězci.

Abyste porozuměli slibům, porovnejte je se skutečným scénářem. Vysvětlení definuje příslib také v asynchronní povaze. Pokud vám to někdo slíbí, tak také odmítnout or splnit prohlášení, které učinili. Stejně tak v asynchronních slibuje buď odmítnout or splnit kód, který zabalíme do slibu.

Cypress se však stará o všechny sliby a není nutné s nimi manipulovat pomocí našeho vlastního kódu. Jako programátoři v Javascriptu jsme zvědaví na používání čeká v našich příkazech. Cypress API jsou úplně jiná, než na jaké jsme obecně zvyklí. Na tuto pozdější část tohoto tutoriálu se podíváme podrobně.

Státy cypřišských příslibů

Sliby mají tři různé stavy na základě příkazů Cypress. Oni jsou

  • Vyřešeno - Nastane, když se krok/ příkaz úspěšně provede.
  • Vyhledávání - Uveďte, kde byla poprava zahájena, ale výsledek je nejistý.
  • Odmítnutí - Vyskytuje se, když krok selhal.

Jako programátor v Javascriptu máme tendenci psát sliby v našem kódu a vracet je. Například,

//Tento kód je pouze pro demonstraci description('Příklad Cypress ', function () { it('kliknutím na možnost technologie přejděte na adresu URL technologie', function () { cy.visit('https://techiescience. com/') //klikněte na možnost technologie 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') }) }); });

Zde vracíme sliby každému z příkazů. V Cypressu to není nutné. Naštěstí se Cypress stará o všechny sliby interně a my nemusíme přidávat sliby v každém kroku. Cypress má schopnost opakovat možnost, kde se opakuje po určitou dobu pro provedení příkazu. Uvidíme příklad kódu bez manuálního zahrnutí slibů.

    it('kliknutím na možnost technologie přejděte na adresu URL technologie', function () { cy.visit('https://techiescience.com/') //klikněte na možnost technologie 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('zahrnout', '/technologie') }); });
VZOREK
Cypress příkazy se sliby zpracovány interně

Výše uvedený kód není nemotorný a je snadno čitelný a srozumitelný. Cypress zvládá veškerou slibnou práci a je před uživatelem skrytý. Nemusíme se tedy starat o vyřízení nebo vrácení slibů kdekoli!

Jak používáte čekání v Cypressu?

Jak bylo uvedeno výše, Cypress má svůj způsob zpracování asynchronního kódu vytvořením fronty příkazů a jejich postupným spuštěním. Přidávání awaits příkazy nebudou fungovat podle očekávání. Protože Cypress vše interně zpracovává, doporučil bych nepřidávat awaits do kódu.

Pokud potřebujete přidat čekání, můžete použít knihovnu třetí strany jako Cypress-slib to mění způsob, jakým Cypress funguje. Tato knihovna vám umožní používat Slibuje v příkazech a použijte čekej v kódu

Pojďme pochopit způsoby, jak používat čekání a jak je nepoužívat.

Taková čekání byste neměli používat

//Nepoužívejte wait this way description('Navštivte stránku', () => { (async () => { cy.visit('https://techiescience.com/') wait cy.url(). should('include', '/technology'); })() })

Místo toho můžete použít takto

description('Navštivte stránku', () => { cy.visit('https://techiescience.com/').then(async () => wait cy.url().should('include', ' /technika') ()) })

To bude fungovat pro všechny příkazy Cypress.

Cypřišový obal

wrap() je funkce v Cypressu, která poskytuje jakýkoli objekt, který je předán jako argument.

Syntax

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

Podívejme se na příklad, jak přistupovat wrap() v našem kódu.

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

V příkladu zabalíme soubor getName a poté pro něj vyvolejte název.

Slib Cypress Wrap

Můžeme zabalit sliby, které vrací kód. Příkazy počkají na vyřešení slibu, než přistoupí k získané hodnotě a. poté pokračujte dalším příkazem nebo tvrzením.

const customPromise = new Promise((vyřešit, odmítnout) => { // pro přístup k asynchronnímu kódu používáme funkci setTimeout(). setTimeout(() => { resolve({ type: 'úspěch', zpráva: 'Jablka a pomeranče' , }) }, 2500) }) it('má čekat na vyřešení slibů', () => { cy.wrap(customPromise).its('message').should('eq', 'Jablka a pomeranče' ) });

Když argument v cy.wrap() je slib, bude čekat na vyřešení slibu. Pokud je slib odmítnut, test se nezdaří.

Cypress-slib npm

Pokud chceme manipulovat s přísliby Cypressu, pak můžeme dodatečně použít knihovnu nebo balíček s názvem Cypress-slib a začlenit jej do našeho kódu. Tento balíček vám umožní převést a Příkaz Cypress do slibu a umožňuje vám čekat nebo se v kódu asynchronizovat. Tyto podmínky však nebudou fungovat before or beforeEach bloky. Zpočátku bychom měli balíček nainstalovat do našeho projektu předáním následujícího příkazu v terminálu.

npm i cypress-promise

Po instalaci bude terminál vypadat nějak takto.

Snímek obrazovky 2021 08 11 v 9.43.42:XNUMX:XNUMX
Instalace Cypress-slib

Po instalaci bychom měli importovat knihovnu do našeho testovacího souboru.

import promisify from 'cypress-promise'

S touto knihovnou můžete vytvořit a přepsat nativní příslib Cypressu a použít čeká a asynchronovat v kódu. K slibu byste měli přistupovat pomocí promisify klíčové slovo. Podívejme se na stejný příklad.

import promisify from 'cypress-promise' it('should run tests with async/await', async () => { const apple = wait promisify(cy.wrap('apple')) const oranges = wait promisify(cy.wrap ('pomeranče')) očekávat(jablko).to.equal('jablko') očekávat(pomeranče).to.equal('pomeranče') });
Snímek obrazovky 2021 08 11 v 9.49.02:XNUMX:XNUMX
Promisify v Cypress-slib

Bylo to velmi jednoduché a zábavné se to naučit! Tímto způsobem můžete v Cypressu přiřadit asynchronní kód.

Úkol Cypress Async

task() je funkce v Cypressu, která spouští kód v Node. Tento příkaz vám umožňuje přepnout z prohlížeče na uzel a provést příkazy v uzlu před vrácením výsledku do kódu.

Syntax

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

task() vrací buď hodnotu, nebo příslib. task() se nezdaří, pokud je slib vrácen jako undefined. Tímto způsobem pomáhá uživateli zachytit překlepy tam, kde v některých scénářích není událost zpracována. Pokud nepožadujete vrácení žádné hodnoty, pak projděte null hodnota.

Často kladené otázky

Je Cypress synchronní nebo asynchronní?

Cypress je Asynchronní vrácením příkazů ve frontě místo čekání na dokončení provádění příkazů. Ačkoli je asynchronní, stále spouští všechny testovací kroky postupně. Toto chování zvládá Cypress Engine.

Je možné chytit řetězec slibů v Cypressu?

Cypress je navržen tak, že nebudeme schopni dodržet sliby. Tyto příkazy nejsou přesně sliby, ale vypadá to jako slib. Tímto způsobem nemůžeme přidat explicitní obslužné rutiny jako catch.