Cypress Promise and Cypress Asynchronous: Hands-On Implementation, Παράδειγμα

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

Cypress Promise και Cypress Asynchronous
Cypress Promise

Cypress Promise και Cypress Asynchronous:

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

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

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

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

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

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

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

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

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

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

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

 it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/') // No command is executed

        //click on the technology option
        cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') // Nothing is executed here too
            .click() // Nothing happens yet

        cy.url() // No commands executed here too
            .should('include', '/technology') // No, nothing.
    });
        // Now, all the test functions have completed executing
        // Cypress had queued all the commands, and now they will run in sequence

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

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

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

 it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/') 

        //click on the technology option
        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() // No commands executed here too
            .should('include', '/technology') // No, nothing.
        console.log("This is to check the log")  // Log to check the async behaviour
    });
});
Σύγχρονη εκτέλεση της εντολής καταγραφής

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

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

it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/') 

        //click on the technology option
        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() // No commands executed here too
            .should('include', '/technology') // No, nothing.
        .then(() => {
            console.log("This is to check the log")  // Log to check the async behaviour
        });
    });
Εκτέλεση ασύγχρονου με την εντολή .then ()

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

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

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

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

State of Cypress Promises

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

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

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

//This code is only for demonstration
describe('Cypress Example ', function () {
    it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/')

        //click on the technology option
        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') 
            })
    });
});

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

    it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/')

        //click on the technology option
        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', '/technology') ())
})

Αυτό θα λειτουργήσει για τυχόν εντολές 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 και στη συνέχεια να επικαλεστεί το όνομα γι 'αυτό.

Cypress Wrap Promise

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

const customPromise = new Promise((resolve, reject) => {
  // we use setTimeout() function to access async code.
  setTimeout(() => {
    resolve({
      type: 'success',
      message: 'Apples and Oranges',
    })
  }, 2500)
})

it('should wait for promises to resolve', () => {
  cy.wrap(customPromise).its('message').should('eq', 'Apples and Oranges')
});

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

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

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

npm i cypress-promise

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

Κυπαρίσσι-υπόσχεση εγκατάστασης

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

import promisify from 'cypress-promise'

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

import promisify from 'cypress-promise'

it('should run tests 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')
});
Υποσχεθείτε στο Κυπαρίσσι-υπόσχεση

Αυτό ήταν πολύ απλό και διασκεδαστικό για μάθηση! Με αυτόν τον τρόπο, μπορείτε να αντιστοιχίσετε ασύγχρονο κώδικα στο 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.

Σχετικά με την Aishwarya Lakshmi

Είμαι ενθουσιώδης των δοκιμών και έχω σχεδόν 2+ χρόνια εμπειρίας στον τομέα των δοκιμών. Είμαι παθιασμένος με τις δοκιμές και μου αρέσει να εξερευνώ νέα πράγματα στον τομέα μου και να τα μοιράζομαι με τους συναδέλφους μου. Μου αρέσει να γράφω blogs στον ελεύθερο χρόνο μου με τον απλούστερο αλλά αποτελεσματικό τρόπο. Ως υπεύθυνος δοκιμών, θέλω να έχω τα πράγματα στην τελειότητα, οπότε εύχομαι στους αναγνώστες μου να έχουν την τέλεια κατανόηση της τεχνολογίας. Ενημερώνομαι με τις νέες τεχνολογίες που σχετίζονται με τις δοκιμές και αφιερώνω χρόνο για να τις κατανοήσω Είμαι στην ευχάριστη θέση να βοηθήσω τους μαθητές να κατανοήσουν τις έννοιες στις δοκιμές.
Ας συνδεθούμε μέσω του LinkedIn - https://www.linkedin.com/in/aishwarya-lakshmi-n-46903217a

Lambda Geeks