Πίνακας περιεχομένων
- Τι είναι το Cypress Commands;
- Οι εντολές αλληλεπίδρασης UI παρέχονται από το Cypress
- Cypress Εντολή δεξιού κλικ
- Cypress Εντολή διπλού κλικ
- Εντολή κλικ Cypress
- Εντολή σκανδάλης Cypress
- Εντολή Τύπου Κυπαρισσιού
- Εντολή επιλογής Cypress
- Εντολή ελέγχου κυπαρισσιού
- Εντολή Cypress Clear
- Είναι οι εντολές κυπαρισσιών ασύγχρονες;
- Προσαρμοσμένες εντολές κυπαρισσιού
- Chaining Assertion εντολές στο Cypress
- Αντικατάσταση υπαρχουσών εντολών Cypress
- Κυπαρίσσι αλυσοδέκτες εντολές
- Προσαρμοσμένη εντολή γονέα στο κυπαρίσσι
- Child Custom Command στο Cypress
- Διπλή προσαρμοσμένη εντολή στο κυπαρίσσι
- Cypress Custom Commands with Παράδειγμα
- Εντολές εισαγωγής κυπαρισσιού
- Cypress Custom Command IntelliSense
Τι είναι το Cypress Commands;
Το Cypress μας παρέχει API και μεθόδους αλληλεπίδρασης με το περιβάλλον χρήστη της εφαρμογής. Είναι γνωστά ως Cypress Commands και βοηθούν στην αλληλεπίδραση της διαδικτυακής εφαρμογής. Όλες οι διαθέσιμες εντολές έχουν ενσωματωμένες μεθόδους και θα επικαλεστούμε τις μεθόδους μόνο στις δοκιμαστικές μας περιπτώσεις. Οι εντολές Cypress θα προσομοιώσουν μια παρόμοια ενέργεια με έναν χρήστη που προσπαθεί να εκτελέσει λειτουργίες στην εφαρμογή.
Εντολές αλληλεπίδρασης UI που παρέχονται από το Cypress
Υπάρχουν διάφορες εντολές που παρέχονται από το Cypress που αλληλεπιδρούν με το περιβάλλον χρήστη. Θα εξετάσουμε λεπτομερώς τη λίστα με όλες τις εντολές.
- .Κάντε κλικ()
- .dblclick ()
- .κάντε δεξί κλικ()
- .τύπος()
- .Σαφή()
- .έλεγχος()
- . μη ελέγχου ()
- .επιλέγω()
- .δώσει το έναυσμα για()
Εντολή κλικ Cypress
.Κάντε κλικ() - Αυτή η εντολή είναι να κλικ οποιοδήποτε στοιχείο στο DOM.
Ακολουθούν οι συνταγές για την εντολή κλικ
.click()
.click(options)
.click(position)
.click(position, options)
.click(xCoordinate, yCoordinate)
.click(xCoordinate, yCoordinate, options) Όπως μπορείτε να δείτε παραπάνω, το κλικ δέχεται παραμέτρους όπως επιλογές, θέση, και συντεταγμένες.
Επιλογές
Οι πιθανές επιλογές που μπορούν να περάσουν για κλικ είναι
| Επιλογή | Αθέτηση | Περιγραφή |
|---|---|---|
| altKey | ψευδής | Ενεργοποιήστε το εναλλακτικό πλήκτρο (Option Key στο Mac), όπως optionKey |
ctrlKey | ψευδής | Ενεργοποιήστε το πλήκτρο ελέγχου. Επίσης γνωστός ως: controlKey. |
| metaKey | ψευδής | Ενεργοποιεί το μετα -κλειδί (κλειδί Windows στα Windows ή κλειδί εντολών σε Mac). Επίσης: commandKey, cmdKey. |
| ShiftKey | ψευδής | Ενεργοποιεί το πλήκτρο shift |
| κούτσουρο | αληθής | Εκτυπώνει τα αρχεία καταγραφής στη γραμμή εντολών |
| δύναμης | ψευδής | Αυτή η επιλογή αναγκάζει τη δράση και απενεργοποιεί την αναμονή για δυνατότητα δράσης |
| πολλαπλούς | ψευδής | Κάντε διαδοχικά κλικ σε πολλά στοιχεία |
| χρονικού ορίου | defaultCommandTimeout | Timeρα για .click () περιμένετε πριν επιλύσετε το χρονικό όριο |
| αναμονή για κινούμενα σχέδια | αναμονή για κινούμενα σχέδια | Επιλογή αναμονής για την ολοκλήρωση της κίνησης των στοιχείων πριν εκτελέσετε την εντολή |
θέσεις
Οι διαφορετικοί τύποι θέσεων που μπορούν να περάσουν στο .click () είναι
- κέντρο (αθέτηση)
- αριστερά
- δεξιά
- κορυφή
- πάνω αριστερά
- πάνω δεξιά
- κάτω μέρος
- κάτω αριστερά
- κάτω δεξιά
Παράδειγμα
cy.get('btn').click() //κάνοντας κλικ στο κουμπί cy.get('btn').κλικ({ force: true }) //κάνοντας κλικ στο κουμπί περνώντας την επιλογή 'force' ως true cy. get('btn').κλικ('bottomRight') // κάνοντας κλικ στο κουμπί στην κάτω δεξιά θέση cy.get('btn').click(10, 70, { force: true }) // κάνοντας κλικ στο κουμπί με τιμή θέσης και δύναμη αληθής
Cypress Εντολή διπλού κλικ
Το διπλό κλικ μπορεί να επιτευχθεί με τη χρήση dblclick() σύνταξη στο Cypress.
Σύνταξη
.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)Επιλογές
.dblclick() αποδέχεται όλες τις επιλογές που γίνονται αποδεκτές από .click()Το Μπορείτε να βρείτε τις επιλογές στην παραπάνω ενότητα.
θέσεις
Όλες οι πιθανές θέσεις που καθορίζονται στο .click() είναι επίσης διαθέσιμα για dblclick()Το Ο κατάλογος των θέσεων βρίσκεται στην παραπάνω ενότητα.
Παράδειγμα
cy.get('button').dblclick() // Διπλό κλικ στο κουμπί cy.focused().dblclick() // Διπλό κλικ στο στοιχείο με εστίαση cy.contains('Home').dblclick() // Double κάντε κλικ στο πρώτο στοιχείο που περιέχει 'Αρχική' cy.get('button').dblclick('top') // Κάντε διπλό κλικ στο κουμπί στην επάνω θέση cy.get('button').dblclick(30, 10) // Κάντε διπλό κλικ στις συντεταγμένες των 30 και 10
Cypress Εντολή δεξιού κλικ
Αυτή η εντολή Cypress, κάνει δεξί κλικ στο στοιχείο DOM .rightclick() εντολή δεν θα ανοίξει μενού περιβάλλοντος του προγράμματος περιήγησης.rightclick() χρησιμοποιείται για τον έλεγχο της διαχείρισης συμβάντων που σχετίζονται με το δεξί κλικ στην εφαρμογή, όπως π.χ. contextmenu.
Σύνταξη
.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)Επιλογές
Όπως είδαμε παραπάνω, όλες οι επιλογές που γίνονται αποδεκτές από .click() εντολή μπορεί να ρυθμιστεί με .rightclick() εντολή επίσης.
θέσεις
Όλες οι πιθανές θέσεις που μπορούν να περάσουν στο .rightclick() είναι το ίδιο με το .click() αναφέρθηκε παραπάνω.
Παράδειγμα
cy.get(" / Κάντε δεξί κλικ στο πρώτο στοιχείο που περιέχει 'Ιανουάριος' cy.get('button').dblclick('topRight') // Κάντε διπλό κλικ στο κουμπί στην επάνω δεξιά θέση cy.get('button').dblclick(80, 20 ) // Κάντε διπλό κλικ στις συντεταγμένες των 80 και 20
Εντολή Τύπου Κυπαρισσιού
.type() εντολή εισάγει τιμή σε ένα στοιχείο DOM.
Σύνταξη
.type(text)
.type(text, options)Επιχειρήματα
.type() δέχεται τη συμβολοσειρά ως όρισμα. Οι αξίες πέρασαν σε .type() μπορεί να περιλαμβάνει οποιαδήποτε από τις ακολουθίες ειδικών χαρακτήρων που δίνονται παρακάτω.
| Ακολουθία | Notes |
|---|---|
{{} | Μπαίνει στην κυριολεκτική { κλειδί |
{backspace} | Διαγράφει τον χαρακτήρα από τα δεξιά προς τα αριστερά του δρομέα |
{del} | Αφαιρεί τον χαρακτήρα από αριστερά προς τα δεξιά του κέρσορα |
{downarrow} | Μετατοπίζει τον κέρσορα προς τα κάτω |
{end} | Μετατοπίζει τον κέρσορα στο τέλος της γραμμής |
{enter} | Πληκτρολογεί το κλειδί Enter |
{esc} | Πληκτρολογεί το πλήκτρο Escape |
{home} | Μετατοπίζει τον κέρσορα στην αρχή της γραμμής |
{insert} | Θέσεις χαρακτήρα στα δεξιά του κέρσορα |
{leftarrow} | Μετακινεί τον κέρσορα αριστερά |
{movetoend} | Μετατοπίζει τον κέρσορα στο τέλος του στοιχείου με δυνατότητα δακτυλογράφησης |
{movetostart} | Μετατοπίζει τον κέρσορα στην αρχή του στοιχείου με δυνατότητα δακτυλογράφησης |
{pagedown} | Κύλιση προς τα κάτω |
{pageup} | Κύλιση προς τα πάνω |
{rightarrow} | Μετατοπίζει τον κέρσορα δεξιά |
{selectall} | Επιλέγει όλο το κείμενο δημιουργώντας ένα selection range |
{uparrow} | Μετατοπίζει τον κέρσορα προς τα πάνω |
Επιλογές
Μπορούμε να περάσουμε στα αντικείμενα ως επιλογές για να τροποποιήσουμε την προεπιλεγμένη συμπεριφορά του .type()
| Επιλογή | Αθέτηση | Περιγραφή |
|---|---|---|
delay | 10 | Επιλογή για καθυστέρηση εγκαίρως μετά από κάθε πάτημα πλήκτρου |
force | false | Αναγκάζει τη δράση να εκτελεστεί και απενεργοποιεί αναμονή για δράση |
log | true | Εμφανίζει τα αρχεία καταγραφής στο Αρχείο καταγραφής εντολών |
parseSpecialCharSequences | true | Ανάλυση ειδικών χαρακτήρων για χορδές που περιστοιχίζονται {}, Όπως {esc}Το Μπορείτε να ορίσετε την επιλογή σε false για εισαγωγή των κυριολεκτικών χαρακτήρων. |
release | true | Αυτή η επιλογή σας επιτρέπει να ενεργοποιήσετε τη διατήρηση ενός τροποποιητή μεταξύ εντολών |
scrollBehavior | scrollBehavior | Θέση θύρας προβολής στο σημείο που πρέπει να γίνει κύλιση πριν εκτελέσετε οποιαδήποτε εντολή |
timeout | defaultCommandTimeout | Timeρα να περιμένουμε .type() εντολή επίλυσης πριν το χρονικό όριο |
waitForAnimations | waitForAnimations | Να πει αν θα περιμένει στοιχεία για να τελειώστε την εμψύχωση πριν εκτελέσετε οποιαδήποτε εντολή. |
Παράδειγμα
Ας δούμε παραδείγματα για .type() εντολή
cy.get('textarea').type('Hey there') // εισάγετε τιμή στην περιοχή κειμένου cy.get('body').type('{shift}') //ενεργοποιεί το πλήκτρο shift cy.get ('body').type('{rightarrow}') //type event δεξιό βέλος
Εντολή Cypress Clear
Η εντολή Clear θα διαγράψει τις τιμές στην περιοχή εισαγωγής ή στο πεδίο κειμένου.
Σύνταξη
Η σύνταξη για σαφή εντολή είναι η ακόλουθη.
.clear()
.clear(options)Επιλογές
Θα εξετάσουμε τις επιλογές που μπορούν να περάσουν στο .clear() εντολή.
| Επιλογή | Αθέτηση | Περιγραφή |
|---|---|---|
force | false | Αυτό θα αναγκάσει τη δράση και θα απενεργοποιήσει την αναμονή για να εμφανιστεί η δυνατότητα δράσης |
log | true | Εμφανίζει την εντολή στο αρχείο καταγραφής εντολών |
scrollBehavior | scrollBehavior | Θέση θύρας προβολής στο σημείο στο οποίο πρέπει να γίνει κύλιση ενός στοιχείου πριν από την εκτέλεση της εντολής |
timeout | defaultCommandTimeout | Αυτή η επιλογή είναι η ώρα που πρέπει να περιμένετε .clear() για επίλυση πριν από το χρονικό όριο |
waitForAnimations | waitForAnimations | Αυτό θα περιμένει για την ολοκλήρωση των κινούμενων στοιχείων πριν από την εκτέλεση της εντολής. |
Παράδειγμα
Ας δούμε τα παραδείγματα για σαφή εντολή
cy.get('[type="text"]').clear() // Εκκαθάριση εισαγωγής τύπου text cy.get('textarea').type('Welcome!').clear() // Εκκαθάριση textarea cy .focused().clear() // Διαγραφή εστιασμένης εισόδου/textarea
Εντολή ελέγχου κυπαρισσιού
Η εντολή ελέγχου θα ελέγξει ή με πιο απλές λέξεις, επιλέξτε τα πλαίσια ελέγχου ή τα κουμπιά επιλογής. Μπορείτε να καταργήσετε την επιλογή των πλαισίων ελέγχου ή των κουμπιών επιλογής χρησιμοποιώντας το .uncheck() εντολή.
Σύνταξη
Θα κατανοήσουμε τη σύνταξη για την εντολή ελέγχου στο Cypress.
//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)
//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)Επιλογές
Οι πιθανές επιλογές που μπορούν να μεταβιβαστούν για έλεγχο/κατάργηση εντολών είναι οι ίδιες επιλογές με την καθαρή εντολή που παρατίθεται παραπάνω
Παράδειγμα
Θα εξετάσουμε το παράδειγμα του πώς μπορούμε να χρησιμοποιήσουμε εντολές ελέγχου και κατάργησης ελέγχου.
cy.get('[type="checkbox"]').check() // Έλεγχος στοιχείου πλαισίου ελέγχου cy.get('[type="radio"]').first().check() // Check first radio στοιχείο cy.get('[type="radio"]').check('Male') //Ελέγξτε το στοιχείο ραδιοφώνου που έχει Male cy.get('[type="checkbox"]').αποεπιλέξτε() / /Απεπιλέξτε το στοιχείο πλαισίου ελέγχου cy.get('[type="radio"]').αποεπιλέξτε() //Αποεπιλέξτε το πρώτο ραδιοστοιχείο cy.get('[type="checkbox"]').αποεπιλέξτε('Πρωινό') // Καταργήστε την επιλογή του στοιχείου πρωινού
Εντολή επιλογής Cypress
Η εντολή select Cypress σάς επιτρέπει να επιλέξετε στοιχεία εντός ενός ετικέτα.
Σύνταξη
Τα παρακάτω είναι η σύνταξη για την εντολή επιλογής
.select(value)
.select(values)
.select(value, options)
.select(values, options)Επιλογές
Μπορούμε να περάσουμε τις επιλογές για να τροποποιήσουμε την προεπιλεγμένη συμπεριφορά της εντολής επιλογής.
| Επιλογή | Αθέτηση | Περιγραφή |
|---|---|---|
force | false | Αυτή η επιλογή αναγκάζει τη δράση να πραγματοποιηθεί και απενεργοποιεί την αναμονή για δράση |
log | true | Εμφανίζει τα αρχεία καταγραφής στο αρχείο καταγραφής εντολών και ορίζεται ως προεπιλογή ως αληθές |
timeout | defaultCommandTimeout | Αυτή η επιλογή είναι η ώρα που πρέπει να περιμένετε .select() για επίλυση πριν από το χρονικό όριο |
Παράδειγμα
Ας δούμε παραδείγματα για την εντολή επιλογής
cy.get('select').select('butterfly') // Επιλέξτε την επιλογή 'butterfly' cy.get('select').select(0) // επιλέγει το στοιχείο με 0 ευρετήριο cy.get('select ').select(['parrot', 'peacock']) //επιλέγει την επιλογή parrot and peacock
Εντολή σκανδάλης Cypress
Η εντολή ενεργοποίησης βοηθά στην ενεργοποίηση οποιουδήποτε συμβάντος στο στοιχείο.
Σύνταξη
Θα εξετάσουμε τη σύνταξη για πρόσβαση στην εντολή σκανδάλης
.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)Επιλογή
Η εντολή ενεργοποίησης δέχεται όλες τις επιλογές για τις οποίες αναφέρεται .clear() εντολή. Επιπλέον, υπάρχουν λίγες επιλογές που μπορούμε να διαμορφώσουμε και αναφέρονται παρακάτω.
| Επιλογή | Αθέτηση | Περιγραφή |
|---|---|---|
bubbles | true | Αν το συμβάν πρέπει να κάνει φούσκα |
cancelable | true | Αν η εκδήλωση μπορεί να ακυρωθεί |
eventConstructor | Event | Ο κατασκευαστής για τη δημιουργία του αντικειμένου συμβάντος (π MouseEvent, keyboardEvent) |
Παράδειγμα
Αφήστε μας διαφορετικούς τρόπους χρήσης .trigger() στον κώδικα.
cy.get('a').trigger('mouseover') // Ενεργοποίηση συμβάντος mouseover σε σύνδεσμο cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown ενεργοποιήθηκε στο button 0 cy.get('button').trigger('mouseup', topRight, { bubbles: false }) //mouseup ενεργοποιήθηκε στην topRight θέση με ρύθμιση του συννεφάκι ως false
Οι εντολές του Κυπαρισσιού είναι συγχρονισμένες;
Όλες οι εντολές Cypress είναι ασύγχρονες. Βρίσκονται σε ουρά για εκτέλεση σε μεταγενέστερο χρονικό σημείο και δεν θα περιμένουν την ολοκλήρωση των εντολών. Η εντολή Cypress δεν κάνει τίποτα τη στιγμή της κλήσης, αλλά την αποθηκεύει για αργότερα για εκτέλεση. Μπορείτε να καταλάβετε την ασύγχρονη συμπεριφορά του Κυπαρίσσι εδώ
Κυπαρίσσι αλυσοδέκτες εντολές
Στο Cypress, μπορούμε να χρησιμοποιήσουμε μια σειρά εντολών για αλληλεπίδραση με στοιχεία στο DOM. Είναι επιτακτική ανάγκη να κατανοήσουμε πώς λειτουργεί η αλυσίδα των εντολών εσωτερικά. Εάν συνδέουμε εντολές σε μια συγκεκριμένη γραμμή, τότε το Cypress θα χειριστεί μια υπόσχεση που βασίζεται στην αλυσίδα εντολών και θα δώσει μια εντολή βασισμένη στο θέμα της επόμενης εντολής, μέχρι να τελειώσει η αλυσίδα εντολών ή να συμβεί σφάλμα.
Το Cypress μας επιτρέπει να κάνουμε κλικ σε ένα στοιχείο ή να πληκτρολογήσουμε στοιχεία χρησιμοποιώντας το .click() or .type() εντολές παίρνοντας τα στοιχεία χρησιμοποιώντας cy.get() or cy.contains()Το Ας δούμε ένα απλό παράδειγμα αλυσιδωτών εντολών
cy.get('textarea').type('Πώς είσαι;')
Στο παραπάνω παράδειγμα, cy.get() είναι μία εντολή Κυπαρίσσι και .type() είναι μια άλλη εντολή, όπου συνδέουμε την αλυσίδα .type() εντολή στο cy.get() εντολή, λέγοντάς του να πληκτρολογήσει στο θέμα που παράγεται από το cy.get() στοιχείο. Ομοίως, μπορούμε να αλυσιδώσουμε όλες τις εντολές που συζητήσαμε παραπάνω.
Chaining Assertion Commands στο Cypress
Παρόμοια με την αλυσίδα πολλαπλών εντολών χρησιμοποιώντας το Cypress, μπορούμε επίσης να αλυσοδέσουμε ισχυρισμούς με εντολές. Οι ισχυρισμοί είναι εντολές που σας επιτρέπουν να περιγράψετε το αναμένεται κατάσταση ή συμπεριφορά της εφαρμογής. Το Cypress θα περιμένει μέχρι τα στοιχεία να φτάσουν στην αναμενόμενη κατάσταση και η δοκιμή θα αποτύχει εάν οι ισχυρισμοί δεν περάσουν. Θα δούμε πώς μπορούμε να χρησιμοποιήσουμε αλυσιδωτές εντολές για την επιβεβαίωση ενός στοιχείου.
cy.get('button').should('be.disabled') //αναμένεται εάν το κουμπί θα πρέπει να απενεργοποιηθεί cy.get('form').should('have.class', 'form-vertical') / /expect εάν η φόρμα θα πρέπει να έχει κλάση ως 'form-vertical' cy.get('input').should('not.have.value', 'Name') // βεβαιωθεί ότι η είσοδος δεν πρέπει να έχει την τιμή 'Name' '
Όπως αναφέρθηκε παραπάνω, χρησιμοποιούμε το cy.get() εντολή και αλυσοδέστε το με το .should() εντολή διεκδίκησης για να περιμένουμε τη συμπεριφορά με βάση το αποτέλεσμα. Με αυτόν τον τρόπο, μπορούμε να χρησιμοποιήσουμε την αλυσίδα εντολές διεκδίκησης στο Κυπαρίσσι.
Προσαρμοσμένες εντολές κυπαρισσιού
Το Cypress μας παρέχει API για τη δημιουργία εντολών με βάση τις απαιτήσεις μας. Η προσαρμοσμένη εντολή Cypress είναι παρόμοια με τις προεπιλεγμένες εντολές που προϋπήρχαν, εκτός από αυτήν ορισμένο από τον χρήστηΤο Με προσαρμοσμένες εντολές, μπορούμε να παίξουμε με τις εντολές και να τις αλυσοδέσουμε με βάση την περίπτωση χρήσης μας. Οι προσαρμοσμένες εντολές κυπαρίσσιου είναι χρήσιμες στη ροή εργασιών μας, εάν απαιτείται επαναχρησιμοποίησή τους ξανά και ξανά στις δοκιμές.
Ας δούμε τη σύνταξη για τη δημιουργία μιας νέας προσαρμοσμένης εντολής στο Cypress.
Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)όπου τα επιχειρήματα έχουν ως εξής
όνομα - Το όνομα της εντολής στη συμβολοσειρά που θέλουμε να προσθέσουμε ή να αντικαταστήσουμε
επιστροφή κλήσηςFn - Αυτή η συνάρτηση παίρνει ένα όρισμα που μεταφέρεται στην εντολή
επιλογές - Περάστε οποιοδήποτε αντικείμενο επιλογών για να ορίσετε τη συμπεριφορά της εντολής
Note : οι επιλογές υποστηρίζονται μόνο για τις εντολές προσθήκης και δεν υποστηρίζουν τις εντολές αντικατάστασης
| Επιλογή | Αποδέχεται | Αθέτηση | Περιγραφή |
|---|---|---|---|
prevSubject | Boolean, String or Array | false | καθορίζει τον τρόπο χειρισμού του θέματος που αποδόθηκε προηγουμένως. |
Οι επιλογές που prevSubject δέχεται είναι ως εξής
false- αγνοήστε προηγούμενα θέματα (εντολή γονέα)true- αποδεχτείτε τα προηγούμενα θέματα (εντολή για παιδιά)optional- περάστε εάν θέλετε να ξεκινήσετε μια νέα αλυσίδα ή να χρησιμοποιήσετε μια υπάρχουσα αλυσίδα (διπλή εντολή)
Προσαρμοσμένη εντολή γονέα στο κυπαρίσσι
Θα δούμε πώς να προσθέσετε μια γονική προσαρμοσμένη εντολή στο Cypress. Η γονική εντολή θα ξεκινά πάντα μια νέα αλυσίδα εντολών, αν και έχετε κλείσει μια προηγούμενη εντολή. Η προηγούμενη αλυσιδωτή εντολή θα αγνοηθεί και μια νέα εντολή θα είναι πάντα αλυσοδεμένη. Μερικές από τις γονικές εντολές είναι cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()
Παράδειγμα
Θα δούμε ένα παράδειγμα για το πώς να γράψετε μια γονική προσαρμοσμένη εντολή στο Cypress
Cypress.Commands.add('clickLink', (label) => { cy.get('a').contains(label).click() }) //κάνοντας κλικ στον σύνδεσμο "Buy Now" cy.clickLink('Buy Τώρα')
Στο παραπάνω παράδειγμα, 'κάντε κλικ στο σύνδεσμο'είναι το όνομα της προσαρμοσμένης εντολής μας. Θα αναζητήσει το επιγραφήΤο Στη γραμμή 2, η εντολή παίρνει "a', και αναζητήστε τον σύνδεσμο που περιέχει ετικέτα και κάντε κλικ στο στοιχείο. cy.clickLink() θα εκτελέσει την ενέργεια στο αρχείο δοκιμής και θα κάνει κλικ στο "Άμεση αγορά" Σύνδεσμος.
Child Custom Command στο Cypress
Οι Child Custom εντολές στο Cypress είναι αλυσοδεμένες από μια γονική εντολή ή μια άλλη παιδική εντολή. Το θέμα από την προηγούμενη εντολή θα αποδοθεί στη λειτουργία επανάκλησης.
Μερικές από τις εντολές του Κυπαρισσιού που μπορούν να συνδεθούν με αλυσίδες ως εντολή για παιδιά είναι .click(), .trigger(), .should(), .find(), .as()
Παράδειγμα
Θα εξετάσουμε ένα παράδειγμα σχετικά με τον τρόπο αλυσίδας μιας προσαρμοσμένης εντολής για παιδιά
Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (subject, options) => { // τυλίξτε το υπάρχον θέμα και κάντε κάτι με αυτό cy.wrap(subject).click({force:true }) }) //πρόσβαση στο forceClick στο δοκιμαστικό αρχείο cy.get("[data-test='panel-VALUES']").forceClick();
Στο παραπάνω παράδειγμα, ονομάζουμε την προσαρμοσμένη εντολή μας ως "forceClick'. Περνάμε το όρισμα prevSubject στο στοιχείο και τυλίγουμε το υπάρχον θέμα. Με cy.wrap(), κάνουμε κλικ με δύναμη στο θέμα. Στη συνέχεια, στο αρχείο δοκιμής, έχουμε πρόσβαση στην προσαρμοσμένη εντολή, "forceClick' πάνω σε cy.get() εντολή.
Διπλές προσαρμοσμένες εντολές στο κυπαρίσσι
Οι διπλές προσαρμοσμένες εντολές είναι υβριδικές μεταξύ εντολής γονέα και παιδιού. Μπορείτε να ξεκινήσετε μια νέα αλυσίδα εντολών ή να απενεργοποιήσετε μια υπάρχουσα εντολή. Οι διπλές εντολές είναι χρήσιμες εάν θέλουμε η εντολή μας να λειτουργεί με διαφορετικούς τρόπους με ή χωρίς το υπάρχον θέμα.
Μερικές από τις εντολές που μπορούν να χρησιμοποιηθούν για διπλές εντολές είναι cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()
Παράδειγμα
Ας δούμε ένα παράδειγμα του τρόπου χρήσης διπλών προσαρμοσμένων εντολών
Cypress.Commands.add('getButton', { prevSubject: 'optional' }, (subject) => { if (subject) { cy.get(subject).get('btn').its('button'); } else { cy.get('btn').its('button'); } })
Σε ορισμένες περιπτώσεις, θα χρειαστεί να λάβουμε το κουμπί του κειμένου χρησιμοποιώντας το getButton το οποίο θα αποκτήσει όλο το κουμπί του στοιχείου. Τώρα μπορούμε να χρησιμοποιήσουμε το getButton για να αλυσοδέσουμε το στοιχείο γονέα ή να αλυσιδώσουμε το στοιχείο παιδί, όπου μπορεί να επικαλεστεί τα στοιχεία του γονέα.
Δεδομένου ότι η prevSubject είναι προαιρετικό, μπορούμε είτε να περάσουμε το θέμα ως επιχείρημα είτε να επικαλεστούμε την εντολή χωρίς το θέμα στο αρχείο δοκιμής όπως παρακάτω
cy.getButton() // χωρίς το θέμα cy.get('#loginBtn').getButton() // με το θέμα
Αντικατάσταση υπαρχουσών εντολών κυπαρισσιού
Μπορούμε να αντικαταστήσουμε τις ήδη υπάρχουσες εντολές Cypress και να τροποποιήσουμε τη συμπεριφορά για να αποφύγουμε τη δημιουργία μιας άλλης εντολής που θα προσπαθήσει να χρησιμοποιήσει την αρχική εντολή στο τέλος.
Μερικές από τις αρχικές εντολές Cypress που μπορούν να αντικατασταθούν είναι cy.visit(), cy.type(), cy.screenshot(), cy.contains()
Παράδειγμα
Ας δούμε ένα παράδειγμα για το πώς μπορούμε να αντικαταστήσουμε το υπάρχον Cypress εντολή.
Cypress.Commands.overwrite('contains', (originalFn, θέμα, φίλτρο, κείμενο, επιλογές = {}) => { // προσδιορίστε εάν πέρασε ένα όρισμα φίλτρου if (typeof text === 'object') { options = κείμενο κειμένου = φίλτρο φίλτρου = απροσδιόριστο } options.matchCase = εσφαλμένη επιστροφή originalFn(θέμα, φίλτρο, κείμενο, επιλογές) } )
Όπως είδαμε παραπάνω, χρησιμοποιούμε το Cypress.Commands. overwrite για να τροποποιήσετε την υπάρχουσα εντολή Cypress. Ονομάζουμε την προσαρμοσμένη εντολή μας ως contains και περνάμε ορίσματα για να καθορίσουμε αν το όρισμα φίλτρου έχει περάσει.
Εντολές εισαγωγής κυπαρισσιού
Σε αυτήν την ενότητα, θα κατανοήσουμε τον τρόπο εισαγωγής εντολών Cypress.
Πρέπει να δημιουργήσουμε τις προσαρμοσμένες εντολές μας Cypress στο κυπαρίσσι/υποστήριξη/εντολές.js αρχείο. Θα προσθέσουμε τις προσαρμοσμένες εντολές στο αρχείο command.js και θα εισαγάγουμε στο αρχείο δοκιμής για να το χρησιμοποιήσουμε.
Cypress Custom Commands with Παράδειγμα
Θα καταλάβουμε πώς να δημιουργήσουμε μια προσαρμοσμένη εντολή και να τη χρησιμοποιήσουμε στο αρχείο προδιαγραφών μας με παράδειγμα σε πραγματικό χρόνο.
Όπως είδαμε παραπάνω, πρέπει να προσθέσουμε νέες προσαρμοσμένες εντολές κάτω από το εντολές.js αρχείο. Σε αυτό το αρχείο, ας προσθέσουμε μια προσαρμοσμένη εντολή για μια λειτουργία σύνδεσης
Cypress.Commands.add("login", (όνομα χρήστη, κωδικός πρόσβασης) => { //προσθήκη νέας εντολής με το όνομα login cy.get('[id=Email]').clear(); cy.get('[id =Email]').type(username); cy.get('[id=Password]').clear(); cy.get('[id=Password]').type(password); cy.get( '[type=submit]').click(); });
Στον παραπάνω κώδικα, ονομάζουμε την προσαρμοσμένη εντολή μας ως ΣύνδεσηΤο Μέσα στην προσαρμοσμένη εντολή, προσθέσαμε τα βήματα εκκαθάρισης του πεδίου ονόματος χρήστη και εισαγωγής τιμής στο πεδίο κειμένου. Ομοίως, καθαρίζουμε το πεδίο και προσθέτουμε τον κωδικό πρόσβασης στο πεδίο κωδικού πρόσβασης. Αργότερα, κάνουμε κλικ στο κουμπί υποβολής. Αυτή είναι μια απλή προσαρμοσμένη εντολή που δέχεται δύο ορίσματα: όνομα χρήστη και κωδικό πρόσβασης. Θα περάσουμε την τιμή για το όνομα χρήστη και τον κωδικό πρόσβασης στο αρχείο προδιαγραφών μας.
Τώρα ας δημιουργήσουμε ένα συγκεκριμένο αρχείο με όνομα customCommand.spec.js κάτω από το φάκελο ενσωμάτωσης. Το αρχείο προδιαγραφών μας θα περιέχει τον ακόλουθο κώδικα
describe("Παράδειγμα προσαρμοσμένων εντολών", () => { it("θα πρέπει να συνδεθείτε χρησιμοποιώντας τις προσαρμοσμένες εντολές", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .login("admin@yourstore.com", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });
Όπως είδαμε παραπάνω, έχουμε πρόσβαση στην προσαρμοσμένη εντολή μας ως cy.login() , όπου περνάμε τις τιμές του ονόματος χρήστη και του κωδικού πρόσβασης.
Cypress Custom Commands IntelliSense
Το IntelliSense παρέχει έξυπνες προτάσεις κώδικα στο IDE ή στον επεξεργαστή κώδικα απευθείας ενώ γράφουμε δοκιμές. Βοηθά με την εμφάνιση ενός αναδυόμενου παραθύρου που εμφανίζει τον ορισμό της εντολής, σύνδεσμο προς τη σελίδα τεκμηρίωσης και παραδείγματα κώδικα. Εάν χρησιμοποιούμε οποιονδήποτε σύγχρονο επεξεργαστή κώδικα όπως το Visual Studio Code ή το IntellJ, τότε το IntelliSense θα είναι πολύ χρήσιμο.
Το IntelliSense χρησιμοποιεί Typescript για να κατανοήσει και εμφανίζει τη σύνταξη. Εάν γράφουμε προσαρμοσμένες εντολές και παρέχουμε ορισμούς TypeScript για τις προσαρμοσμένες εντολές, μπορούμε να χρησιμοποιήσουμε τις τριπλές καμπύλες για την εμφάνιση του IntelliSense, ακόμη και αν το έργο μας χρησιμοποιεί μόνο JavaScript.
Για να διαμορφώσουμε το IntelliSense, πρέπει να περιγράψουμε τον κώδικα κυπαρίσσι/υποστήριξη/index.d.ts αρχείο.
// ορισμοί τύπων για το αντικείμενο Cypress "cy" /// δήλωση χώρου ονομάτων Cypress { διεπαφή Chainable { /** * Είσοδος με διαπιστευτήρια * @example * cy.login(username,password) */ login(username: String, password: String): Chainable } }
Τώρα, πρέπει να ενημερώσουμε τα αρχεία προδιαγραφών μας ότι υπάρχουν ορισμοί Typescript στο ευρετήριο.δ.τσ αρχείο. Έτσι, στην αρχή του αρχείου προδιαγραφών μας, προσθέστε τον παρακάτω κώδικα για να επιτρέψετε στο IntelliSense να μας προτείνει.
// οι ορισμοί τύπων για προσαρμοσμένες εντολές όπως "login" // θα επιλυθούν σε "cypress/support/index.d.ts" //
Όπως είδαμε παραπάνω, το IntelliSense μας παρέχει το επιχείρημα που δώσαμε στο αρχείο command.js και βοηθά στην αυτόματη συμπλήρωση.
