Cypress Promise e Cypress asincrono: 13 fatti importanti

Nel nostro precedente articolo, abbiamo visto le configurazioni in Cypress e varie opzioni che possono essere configurate nei file JSON. Questo articolo capirà Cipresso Promessa ed Cipresso asincrono comportamento con implementazione pratica ed esempi nel nostro progetto. Discuteremo anche di come incorporare gli wait nel nostro codice asincrono e alcune funzioni essenziali come wrap() ed task(). Iniziamo!

Cypress Promise e Cypress Asincrono:

Cipresso Promessa ed Cipresso asincrono natura sono alcuni dei concetti essenziali. Come qualsiasi altro framework Javascript, anche Cypress ruota attorno a Asincrono e Promesse. Cypress gestisce internamente tutto il comportamento asincrono ed è nascosto all'utente. Noi useremo .then() per gestire le promesse manualmente nel nostro codice. Esistono pacchetti esterni come Cypress-promise in npm in cui possiamo manipolare il comportamento asincrono di Cypress. Discuteremo in dettaglio ciascuno di questi argomenti.

Cypress Promise e Cypress Asincrono
Cipresso Promessa

Sommario

Cipresso asincrono

Come sappiamo, Cypress si basa su Nodo JS. Qualsiasi framework scritto build da Node.js è asincrono. Prima di comprendere il comportamento asincrono di Cypress, dovremmo conoscere la differenza tra natura sincrona e asincrona.

Natura sincrona

In un programma sincrono, durante l'esecuzione di un codice, solo se la prima riga viene eseguita correttamente, verrà eseguita la seconda riga. Attende fino a quando non viene eseguita la prima riga. Funziona in sequenza.

Natura asincrona

Il codice viene eseguito simultaneamente, attende che ogni passaggio venga eseguito senza disturbare lo stato del comando precedente. Sebbene il nostro codice sia stato scritto in sequenza, il codice asincrono viene eseguito senza attendere il completamento di alcun passaggio ed è completamente indipendente dal comando/codice precedente.

Cos'è l'asincrono in Cypress?

Tutti i comandi Cypress sono di natura asincrona. Cypress ha un wrapper che comprende il codice sequenziale che scriviamo, li accoda nel wrapper e viene eseguito in seguito quando eseguiamo il codice. Quindi, Cypress fa tutto il nostro lavoro che è legato alla natura asincrona e promette!

Comprendiamo un esempio per questo.

 it('fai clic sull'opzione della tecnologia per passare all'URL della tecnologia', function () { cy.visit('https://lambdageeks.com/') // Nessun comando viene eseguito //fai clic sull'opzione della tecnologia cy. get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img' ) // Anche qui non viene eseguito nulla .click() // Non succede ancora nulla cy.url() // Nessun comando eseguito anche qui .should('include', '/technology') // No, niente. }); // Ora, tutte le funzioni di test hanno completato l'esecuzione // Cypress aveva messo in coda tutti i comandi e ora verranno eseguiti in sequenza

È stato abbastanza semplice e divertente. Ora abbiamo capito come funzionano i comandi Cypress Asincrono. Immergiamoci più in profondità nel punto in cui stiamo cercando di combinare il codice di sincronizzazione e asincrono.

Combinazione di comandi sincroni e asincroni Cypress

Come abbiamo visto, i comandi di Cypress sono asincroni. Quando si inserisce un codice sincrono, Cypress non attende l'esecuzione del codice di sincronizzazione; quindi i comandi di sincronizzazione vengono eseguiti per primi anche senza attendere i precedenti comandi di Cypress. Esaminiamo un breve esempio per capire meglio.

 it('fai clic sull'opzione della tecnologia per passare all'URL della tecnologia', function () { cy.visit('https://lambdageeks.com/') //fai clic sull'opzione della tecnologia 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() // Nessun comando eseguito anche qui .should('include', '/technology') // No, niente. console.log("Questo è per controllare il registro") // Registra per controllare il comportamento asincrono }); });
schermata di registro 1
Esecuzione sincrona del comando log

Il registro viene aggiunto alla fine del codice, che è un comando di sincronizzazione. Quando eseguiamo il test, puoi vedere che il registro è stato stampato anche prima che la pagina fosse caricata. In questo modo Cypress non attende il comando sincrono e lo esegue ancor prima di eseguire i suoi comandi.

Se vogliamo che vengano eseguiti come previsto, dovremmo avvolgerlo all'interno del .then() funzione. Cerchiamo di capire con un esempio.

it('fai clic sull'opzione della tecnologia per passare all'URL della tecnologia', function () { cy.visit('https://lambdageeks.com/') //fai clic sull'opzione della tecnologia 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() // Nessun comando eseguito anche qui .should('include', '/technology') // No, niente. .then(() => { console.log("Questo è per controllare il log") // Log per verificare il comportamento asincrono }); });
dopo la sincronizzazione del registro
Esecuzione asincrona con il comando .then()

Cos'è la promessa di Cypress?

Come abbiamo visto sopra, Cypress accoda tutti i comandi prima dell'esecuzione. Per riformulare in dettaglio, possiamo dire che Cypress aggiunge promesse (comandi) in una catena di promesse. Cypress riassume tutti i comandi come una promessa in una catena.

Per comprendere le promesse, confrontale con uno scenario di vita reale. La spiegazione definisce la Promessa anche in natura asincrona. Se qualcuno te lo promette, neanche loro rifiutare or compiere la dichiarazione che hanno fatto. Allo stesso modo, in asincrono, promette sia rifiutare or compiere il codice che avvolgiamo in una promessa.

Tuttavia, Cypress si prende cura di tutte le promesse e non è necessario manipolarle con il nostro codice personalizzato. Come programmatori Javascript, siamo curiosi di usare attende nei nostri comandi. Le API di Cypress sono completamente diverse da quelle a cui siamo abituati in generale. Lo esamineremo in una parte successiva di questo tutorial in modo approfondito.

Stati di Cypress Promesse

Le promesse hanno tre diversi stati basati sui comandi Cypress. Loro sono

  • risoluto – Si verifica quando il passaggio/comando viene eseguito correttamente.
  • Attesa Pagamento – Indicare dove è iniziata l'esecuzione, ma il risultato è incerto.
  • Rifiuto – Si verifica quando il passaggio non è riuscito.

Come programmatore Javascript, tendiamo a scrivere promesse nel nostro codice e a restituirle. Per esempio,

//Questo codice è solo a scopo dimostrativo describe('Cypress Example ', function() { it('click sull'opzione della tecnologia per passare all'URL della tecnologia', function() { cy.visit('https://lambdageeks. com/') //fare clic sull'opzione tecnologica cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl- contenuto-foto > a > .fl-photo-img') .then(() => { return cy.click(); }) cy.url() .then(() => { return cy.should(' include', '/tecnologia') }) }); });

Qui, stiamo restituendo le promesse a ciascuno dei comandi. Questo non è richiesto in Cypress. Fortunatamente, Cypress si occupa di tutte le promesse internamente e non è necessario aggiungere promesse in ogni passaggio. Il cipresso ha il possibilità di ritentare opzione, dove riprova per un determinato periodo di tempo per l'esecuzione del comando. Vedremo un esempio di codice senza includere le promesse manualmente.

    it('fai clic sull'opzione della tecnologia per passare all'URL della tecnologia', function () { cy.visit('https://lambdageeks.com/') //fai clic sull'opzione della tecnologia 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') }); });
CAMPIONE
Comandi Cypress con promesse gestite internamente

Il codice sopra non è goffo ed è facile da leggere e capire. Cypress gestisce tutto il lavoro di promessa ed è nascosto all'utente. Quindi non dobbiamo preoccuparci di gestire o restituire le promesse da nessuna parte!

Come si usa attendere in Cypress?

Come discusso sopra, Cypress ha il suo modo di gestire il codice asincrono creando una coda di comandi ed eseguendoli in sequenza. aggiungendo awaits ai comandi non funzionerà come previsto. Poiché Cypress gestisce tutto internamente, consiglierei di non aggiungere awaits al codice.

Se devi aggiungere attende, puoi utilizzare una libreria di terze parti come Cypress-promessa che cambia il modo in cui funziona Cypress. Questa libreria ti permetterà di usare promette nei comandi e usa attendere nel codice

Cerchiamo di capire le modalità di utilizzo degli waits e come non utilizzarli.

Non dovresti usare attende come questo

//Non utilizzare await in questo modo describe('Visit the page', () => { (async () => { cy.visit('https://lambdageeks.com/') await cy.url(). dovrebbe('include', '/tecnologia'); })() })

Invece, puoi usare così

describe('Visita la pagina', () => { cy.visit('https://lambdageeks.com/').then(async () => await cy.url().should('include', ' /tecnologia') ()) })

Funzionerà per qualsiasi comando Cypress.

Involucro di cipresso

wrap() è una funzione in Cypress che restituisce qualsiasi oggetto passato come argomento.

Sintassi

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

Vediamo un esempio di come accedere wrap() nel nostro codice.

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

Nell'esempio, stiamo avvolgendo il getName e quindi invoca il nome per esso.

La promessa dell'involucro di cipresso

Possiamo avvolgere le promesse che vengono restituite dal codice. I comandi attenderanno la risoluzione della promessa prima di accedere al valore prodotto e. quindi procedere con il comando o l'asserzione successiva.

const customPromise = new Promise((risolvere, rifiutare) => { // usiamo la funzione setTimeout() per accedere al codice asincrono. setTimeout(() => { risolvere({ tipo: 'success', messaggio: 'Mele e arance' , }) }, 2500) }) it('dovrebbe attendere che le promesse si risolvano', () => { cy.wrap(customPromise).its('message').should('eq', 'Mele e arance' ) });

Quando l'argomento in cy.wrap() è una promessa, aspetterà che la promessa si risolva. Se la promessa viene rifiutata, il test fallirà.

Cypress-promessa npm

Se vogliamo manipolare le promesse di Cypress, possiamo anche utilizzare una libreria o un pacchetto chiamato Cypress-promessa e incorporarlo nel nostro codice. Questo pacchetto ti permetterà di convertire a comando cipresso in una promessa e ti consente di attendere o sincronizzare nel codice. Tuttavia, queste condizioni non funzioneranno before or beforeEach i blocchi. Inizialmente, dovremmo installare il pacchetto nel nostro progetto passando il seguente comando nel terminale.

npm i cypress-promise

Una volta installato, il terminale sarà simile a questo.

Screenshot 2021 08 11 alle 9.43.42 PM
Installazione Cypress-promessa

Dopo l'installazione, dovremmo importare la libreria nel nostro file di test.

import promisify from 'cypress-promise'

Con questa libreria, puoi creare e sovrascrivere la promessa Cypress nativa e utilizzare wait e asincrono nel codice. Dovresti accedere alla promessa con il promisify parola chiave. Esaminiamo un esempio per lo stesso.

import promisify da 'cypress-promise' it('should run test with async/await', async () => { const apple = await promisify(cy.wrap('apple')) const oranges = await promisify(cy.wrap ('oranges')) Expect(apple).to.equal('apple') Expect(oranges).to.equal('oranges') });
Screenshot 2021 08 11 alle 9.49.02 PM
Prometti in Cypress-promessa

È stato molto semplice e divertente da imparare! In questo modo, puoi assegnare codice asincrono in Cypress.

Attività asincrona Cypress

task() è una funzione in Cypress che esegue il codice in Node. Questo comando consente di passare dal browser al nodo ed eseguire comandi nel nodo prima di restituire il risultato al codice.

Sintassi

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

task() restituisce un valore o una promessa. task() fallirà se la promessa viene restituita come undefined. In questo modo, aiuta l'utente a catturare errori di battitura in cui l'evento non viene gestito in alcuni scenari. Se non è necessario restituire alcun valore, passare null valore.

Domande frequenti

Cypress è sincrono o asincrono?

Il cipresso è asincrono restituendo i comandi in coda invece di attendere il completamento dell'esecuzione dei comandi. Sebbene sia asincrono, esegue comunque tutti i passaggi del test in sequenza. Cypress Engine gestisce tutto questo comportamento.

È possibile catturare la catena di promesse in Cypress?

Cypress è progettato in modo tale da non essere in grado di mantenere le promesse. Questi comandi non sono esattamente delle promesse, ma sembrano una promessa. In questo modo, non possiamo aggiungere gestori espliciti come catch.