Cypress Promise and Cypress Asynchronous: 13 Important Facts

Στο προηγούμενο μας άρθρο, είδαμε τις διαμορφώσεις στο Cypress και διάφορες επιλογές που μπορούν να ρυθμιστούν σε αρχεία JSON. Αυτό το άρθρο θα καταλάβει Υπόσχεση Κυπαρισσιού και Κυπαρίσσι Ασύγχρονο συμπεριφορά με πρακτική εφαρμογή και παραδείγματα στο έργο μας. Θα συζητήσουμε επίσης πώς να ενσωματώσουμε τις αναμονές στον ασύγχρονο κώδικα και μερικές βασικές λειτουργίες όπως wrap() και task(). Ας αρχίσουμε!

Cypress Promise και Cypress Asynchronous:

Υπόσχεση Κυπαρισσιού και Κυπαρίσσι Ασύγχρονο η φύση είναι μερικές από τις βασικές έννοιες. Όπως κάθε άλλο πλαίσιο Javascript, έτσι και το Cypress περιστρέφεται γύρω από το Asynchronous and Promises. Το Cypress χειρίζεται όλη την ασύγχρονη συμπεριφορά εσωτερικά και είναι κρυμμένη από τον χρήστη. Θα το χρησιμοποιησουμε .then() να χειριστούμε τις υποσχέσεις με μη αυτόματο τρόπο στον κώδικά μας. Υπάρχουν εξωτερικά πακέτα όπως το Κυπαρίσσι-υπόσχεση σε npm όπου μπορούμε να χειριστούμε την ασύγχρονη συμπεριφορά του Κυπαρισσιού. Θα συζητήσουμε λεπτομερώς καθένα από αυτά τα θέματα.

Cypress Promise και Cypress Asynchronous
Υπόσχεση Κυπαρισσιού

Πίνακας περιεχομένων

Κυπαρίσσι Ασύγχρονο

Όπως γνωρίζουμε, το Cypress βασίζεται στο Κόμβος JSΕ Κάθε πλαίσιο που είναι γραμμένο build από το Node.js είναι ασύγχρονηΕ Πριν κατανοήσουμε την ασύγχρονη συμπεριφορά του Κυπαρίσσι, θα πρέπει να γνωρίζουμε τη διαφορά μεταξύ σύγχρονης και ασύγχρονης φύσης.

Σύγχρονη φύση

Σε ένα σύγχρονο πρόγραμμα, κατά την εκτέλεση ενός κώδικα, μόνο εάν η πρώτη γραμμή εκτελεστεί με επιτυχία, η δεύτερη γραμμή θα εκτελεστεί. Περιμένει μέχρι να εκτελεστεί η πρώτη γραμμή. Λειτουργεί διαδοχικά.

Ασύγχρονη φύση

Ο κώδικας εκτελείται ταυτόχρονα, περιμένει να εκτελεστεί κάθε βήμα χωρίς να ενοχλεί την κατάσταση της προηγούμενης εντολής. Αν και έχουμε γράψει διαδοχικά τον κωδικό μας, ο ασύγχρονος κώδικας εκτελείται χωρίς να περιμένει να ολοκληρωθεί κανένα βήμα και είναι εντελώς ανεξάρτητος από την προηγούμενη εντολή/κώδικα.

Τι είναι ασύγχρονο στο Cypress;

Όλες οι εντολές Cypress είναι ασύγχρονες στη φύση τους. Το Cypress έχει ένα περιτύλιγμα που καταλαβαίνει τον διαδοχικό κώδικα που γράφουμε, το εμπλουτίζει στο περιτύλιγμα και εκτελείται αργότερα όταν εκτελούμε τον κώδικα. Έτσι, το Cypress κάνει όλη τη δουλειά μας που σχετίζεται με τη φύση και τις υποσχέσεις!

Ας καταλάβουμε ένα παράδειγμα για αυτό.

 it('κάντε κλικ στην επιλογή τεχνολογίας για πλοήγηση στη διεύθυνση URL τεχνολογίας', συνάρτηση () { cy.visit('https://lambdageeks.com/') // Δεν εκτελείται καμία εντολή //κάντε κλικ στην επιλογή τεχνολογίας 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 είχε τοποθετήσει όλες τις εντολές στην ουρά και τώρα θα εκτελούνται με τη σειρά

Wasταν αρκετά απλό και διασκεδαστικό. Τώρα καταλάβαμε πώς λειτουργούν οι ασύγχρονες εντολές Cypress. Ας βουτήξουμε βαθύτερα στο σημείο που προσπαθούμε να συνδυάσουμε συγχρονισμό και ασύγχρονο κώδικα.

Ανάμειξη Cypress Synchronous και Asynchronous εντολές

Όπως είδαμε, οι εντολές Cypress είναι ασύγχρονες. Κατά την έγχυση οποιουδήποτε σύγχρονου κώδικα, το Cypress δεν περιμένει να εκτελεστεί ο κωδικός συγχρονισμού. Ως εκ τούτου, οι εντολές συγχρονισμού εκτελούνται πρώτα ακόμη και χωρίς να περιμένουμε προηγούμενες εντολές κυπαρισσιού. Ας δούμε ένα σύντομο παράδειγμα για να καταλάβουμε καλύτερα.

 it('κάντε κλικ στην επιλογή τεχνολογίας για πλοήγηση στη διεύθυνση URL τεχνολογίας', συνάρτηση () { cy.visit('https://lambdageeks.com/') //κάντε κλικ στην επιλογή τεχνολογίας 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') // Όχι, τίποτα. console.log ("Αυτό είναι για έλεγχο του αρχείου καταγραφής") // Καταγραφή για έλεγχο της συμπεριφοράς ασυγχρονισμού }); });
στιγμιότυπο οθόνης καταγραφής 1
Σύγχρονη εκτέλεση της εντολής καταγραφής

Το αρχείο καταγραφής προστίθεται στο τέλος του κώδικα, το οποίο είναι μια εντολή συγχρονισμού. Όταν εκτελούμε τη δοκιμή, μπορείτε να δείτε ότι το αρχείο καταγραφής έχει εκτυπωθεί ακόμη και πριν από τη φόρτωση της σελίδας. Με αυτόν τον τρόπο, το Cypress δεν περιμένει τη σύγχρονη εντολή και την εκτελεί ακόμη και πριν εκτελέσει τις εντολές της.

Εάν θέλουμε να εκτελεστούν όπως αναμένεται, τότε θα πρέπει να το τυλίξουμε μέσα στο .then() λειτουργία. Ας το καταλάβουμε με ένα παράδειγμα.

it('κάντε κλικ στην επιλογή τεχνολογίας για πλοήγηση στη διεύθυνση URL τεχνολογίας', συνάρτηση () { cy.visit('https://lambdageeks.com/') //κάντε κλικ στην επιλογή τεχνολογίας 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') // Όχι, τίποτα. .then(() => { console.log("This is to check the log") // Καταγραφή για έλεγχο της ασύγχρονης συμπεριφοράς }); });
μετά το αρχείο καταγραφής συγχρονισμού
Εκτέλεση ασύγχρονου με την εντολή .then ()

Τι είναι το Cypress Promise;

Όπως είδαμε παραπάνω, το Cypress εγκυμονεί όλες τις εντολές πριν από την εκτέλεση. Για να αναδιατυπώσουμε λεπτομερώς, μπορούμε να το πούμε Το Cypress προσθέτει υποσχέσεις (εντολές) σε μια αλυσίδα υποσχέσεων. Το Cypress αθροίζει όλες τις εντολές ως υπόσχεση σε μια αλυσίδα.

Για να καταλάβετε τις Υποσχέσεις, συγκρίνετε τις με ένα πραγματικό σενάριο. Η εξήγηση ορίζει την υπόσχεση και σε ασύγχρονη φύση. Αν σας υποσχεθεί κάποιος, θα το κάνει απορρίπτω or εκπληρώ τη δήλωση που έκαναν. Ομοίως, σε ασύγχρονες, υπόσχεται είτε απορρίπτω or εκπληρώ τον κωδικό που τυλίγουμε σε μια υπόσχεση.

Ωστόσο, το Cypress φροντίζει για όλες τις υποσχέσεις και είναι περιττό να τις χειριστούμε με τον προσαρμοσμένο μας κώδικα. Ως προγραμματιστές Javascript, είμαστε περίεργοι να χρησιμοποιήσουμε περιμένει στις εντολές μας. Τα API του κυπαρισσιού είναι εντελώς διαφορετικά από αυτά που έχουμε συνηθίσει γενικά. Θα το εξετάσουμε σε βάθος ένα μεταγενέστερο μέρος αυτού του σεμιναρίου.

State of Cypress Promises

Οι υποσχέσεις έχουν τρεις διαφορετικές καταστάσεις βασισμένες στις εντολές του Κυπαρισσιού. Αυτοί είναι

  • Αποφασισμένοι - Εμφανίζεται όταν το βήμα/ εντολή εκτελεστεί με επιτυχία.
  • εκκρεμής - Δηλώστε όπου ξεκίνησε η εκτέλεση, αλλά το αποτέλεσμα είναι αβέβαιο.
  • Απόρριψη - Εμφανίζεται όταν το βήμα έχει αποτύχει.

Ως προγραμματιστής Javascript, έχουμε την τάση να γράφουμε υποσχέσεις στον κώδικά μας και να τις επιστρέφουμε. Για παράδειγμα,

//Αυτός ο κώδικας είναι μόνο για επίδειξη describe('Cypress Example', function () { it('κάντε κλικ στην επιλογή τεχνολογίας για πλοήγηση στη διεύθυνση URL τεχνολογίας', function () { cy.visit('https://lambdageeks. com/') //κάντε κλικ στην επιλογή τεχνολογίας 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(' περιλαμβάνει', '/technology') }) }); });

Εδώ, επιστρέφουμε υποσχέσεις σε κάθε μία από τις εντολές. Αυτό δεν απαιτείται στο Cypress. Ευτυχώς, η Cypress φροντίζει όλες τις υποσχέσεις εσωτερικά και δεν χρειάζεται να προσθέτουμε υποσχέσεις σε κάθε βήμα. Το κυπαρίσσι έχει το επανάληψη-ικανότητα επιλογή, όπου επαναλαμβάνεται για συγκεκριμένο χρονικό διάστημα για την εκτέλεση της εντολής. Θα δούμε ένα παράδειγμα κώδικα χωρίς χειροκίνητες υποσχέσεις.

    it('κάντε κλικ στην επιλογή τεχνολογίας για πλοήγηση στη διεύθυνση URL τεχνολογίας', συνάρτηση () { cy.visit('https://lambdageeks.com/') //κάντε κλικ στην επιλογή τεχνολογίας 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 χειρίζεται όλη την υπόσχεση και είναι κρυμμένο από τον χρήστη. Δεν χρειάζεται λοιπόν να ανησυχούμε για το χειρισμό ή την επιστροφή των υποσχέσεων οπουδήποτε!

Πώς χρησιμοποιείτε το await στο Cypress;

Όπως συζητήθηκε παραπάνω, το Cypress έχει τον τρόπο χειρισμού του ασύγχρονου κώδικα δημιουργώντας μια ουρά εντολών και εκτελώντας τους με τη σειρά. Προσθέτωντας awaits στις εντολές δεν θα λειτουργήσει όπως αναμενόταν. Δεδομένου ότι η Cypress χειρίζεται τα πάντα εσωτερικά, θα συνιστούσα να μην προσθέσετε awaits στον κωδικό.

Εάν πρέπει να προσθέσετε αναμονές, μπορείτε να χρησιμοποιήσετε μια βιβλιοθήκη τρίτου μέρους όπως Κυπαρίσσι-υπόσχεση που αλλάζει τον τρόπο λειτουργίας του Cypress. Αυτή η βιβλιοθήκη θα σας επιτρέψει να χρησιμοποιήσετε Υπόσχεται στις εντολές και χρήση αναμένω στον κώδικα

Ας κατανοήσουμε τους τρόπους χρήσης των αναμονών και πώς να μην τους χρησιμοποιήσουμε.

Δεν πρέπει να χρησιμοποιείτε αναμονές όπως αυτό

//Do not use await this way describe('Visit the page', () => { (async () => { cy.visit('https://lambdageeks.com/') await cy.url(). should('include', '/technology'); })() })

Αντ 'αυτού, μπορείτε να χρησιμοποιήσετε έτσι

describe('Visit the page', () => { cy.visit('https://lambdageeks.com/').then(async () => await cy.url().should('include', ' /τεχνολογία') ()) })

Αυτό θα λειτουργήσει για τυχόν εντολές Cypress.

Κυπαρίσσι Τυλίξτε

wrap() είναι μια συνάρτηση στο Cypress που δίνει κάθε αντικείμενο που περνά ως όρισμα.

Σύνταξη

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

Ας δούμε ένα παράδειγμα του τρόπου πρόσβασης wrap() στον κωδικό μας.

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

Στο παράδειγμα, τυλίγουμε το getName και στη συνέχεια να επικαλεστεί το όνομα γι 'αυτό.

Υπόσχεση περιτύλιξης κυπαρισσιού

Μπορούμε να ολοκληρώσουμε τις υποσχέσεις που επιστρέφονται από τον κώδικα. Οι εντολές θα περιμένουν να επιλυθεί η υπόσχεση πριν αποκτήσετε πρόσβαση στην τιμή που αποδόθηκε και. στη συνέχεια προχωρήστε στην επόμενη εντολή ή ισχυρισμό.

const customPromise = new Promise((resolve, reject) => { // χρησιμοποιούμε τη συνάρτηση setTimeout() για πρόσβαση σε ασύγχρονο κώδικα. setTimeout(() => { fix({ type: 'success', message: 'Apples and Orange' , }) }, 2500) }) it('θα πρέπει να περιμένει να επιλυθούν οι υποσχέσεις', () => { cy.wrap(customPromise).its('message').should('eq', 'Apples and Orange' ) });

Όταν το επιχείρημα στο cy.wrap() είναι μια υπόσχεση, θα περιμένει να επιλυθεί η υπόσχεση. Εάν η υπόσχεση απορριφθεί, τότε το τεστ θα αποτύχει.

Κυπαρίσσι-υπόσχεση npm

Εάν θέλουμε να χειριστούμε τις υποσχέσεις του Cypress, τότε μπορούμε επιπλέον να χρησιμοποιήσουμε μια βιβλιοθήκη ή ένα πακέτο που ονομάζεται Κυπαρίσσι-υπόσχεση και να το ενσωματώσουμε στον κώδικά μας. Αυτό το πακέτο θα σας επιτρέψει να μετατρέψετε ένα Εντολή κυπαρίσσι σε μια υπόσχεση και σας επιτρέπει να περιμένετε ή να συγχρονίσετε τον κώδικα. Ωστόσο, αυτές οι συνθήκες δεν θα λειτουργήσουν before or beforeEach τα μπλοκ. Αρχικά, θα πρέπει να εγκαταστήσουμε το πακέτο στο έργο μας περνώντας την ακόλουθη εντολή στο τερματικό.

npm i cypress-promise

Μόλις εγκατασταθεί, το τερματικό θα μοιάζει κάπως έτσι.

Στιγμιότυπο οθόνης 2021 08 11 στις 9.43.42 μ.μ
Κυπαρίσσι-υπόσχεση εγκατάστασης

Μετά την εγκατάσταση, θα πρέπει να εισαγάγουμε τη βιβλιοθήκη στο αρχείο δοκιμής.

import promisify from 'cypress-promise'

Με αυτήν τη βιβλιοθήκη, μπορείτε να δημιουργήσετε και να παρακάμψετε την εγγενή υπόσχεση Κυπαρισσιού και να χρησιμοποιήσετε αναμονές και συγχρονισμό στον κώδικα. Θα πρέπει να έχετε πρόσβαση στην υπόσχεση με το promisify λέξη -κλειδί. Ας δούμε ένα παράδειγμα για το ίδιο.

εισαγωγή promisify από 'cypress-promise' it('should run tests with async/wait', async () => { const apple = await promisify(cy.wrap('apple')) const oranges = await promisify(cy.wrap ('πορτοκάλια')) expect(apple).to.equal('apple') expect(πορτοκάλια).to.equal('πορτοκάλια') });
Στιγμιότυπο οθόνης 2021 08 11 στις 9.49.02 μ.μ
Υποσχεθείτε στο Κυπαρίσσι-υπόσχεση

Αυτό ήταν πολύ απλό και διασκεδαστικό για μάθηση! Με αυτόν τον τρόπο, μπορείτε να αντιστοιχίσετε ασύγχρονο κώδικα στο Cypress.

Cypress Async Task

task() είναι μια συνάρτηση στο Cypress που εκτελεί τον κώδικα στο Node. Αυτή η εντολή σάς επιτρέπει να μεταβείτε από πρόγραμμα περιήγησης σε κόμβο και να εκτελέσετε εντολές στον κόμβο πριν επιστρέψετε το αποτέλεσμα στον κώδικα.

Σύνταξη

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

task() επιστρέφει είτε μια τιμή είτε μια υπόσχεση. task() θα αποτύχει εάν η υπόσχεση επιστραφεί ως undefinedΕ Με αυτόν τον τρόπο, βοηθά τον χρήστη να καταγράφει τυπογραφικά λάθη όπου το συμβάν δεν αντιμετωπίζεται σε ορισμένα σενάρια. Εάν δεν απαιτείται να επιστρέψετε οποιαδήποτε τιμή, τότε περάστε null αξία.

Συχνές Ερωτήσεις

Είναι το Cypress Synchronous ή Asynchronous;

Κυπαρίσσι είναι ασύγχρονη επιστρέφοντας τις εντολές στην ουρά αντί να περιμένουμε την ολοκλήρωση της εκτέλεσης των εντολών. Αν και είναι ασύγχρονη, εξακολουθεί να εκτελεί διαδοχικά όλα τα βήματα δοκιμής. Η Cypress Engine χειρίζεται όλη αυτή τη συμπεριφορά.

Είναι δυνατόν να πιάσετε την αλυσίδα της υπόσχεσης στο Cypress;

Το κυπαρίσσι έχει σχεδιαστεί με τρόπο που δεν θα μπορούμε να πιάσουμε τις υποσχέσεις. Αυτές οι εντολές δεν είναι ακριβώς Υποσχέσεις, αλλά μοιάζει με υπόσχεση. Με αυτόν τον τρόπο, δεν μπορούμε να προσθέσουμε ρητούς χειριστές όπως catch.