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

Παράδειγμα κυπαρίσσι

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

Παράδειγμα κυπαρίσσι

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

Παράδειγμα Cypress JSON

Αρχικά, όταν ανοίγουμε το Cypress Test Runner, a cypress.json το αρχείο διαμόρφωσης έχει δημιουργηθεί. Έχουμε την τάση να αποθηκεύουμε το απόσπασμα που παρέχει έναν τρόπο εφαρμογής και διατήρησης ορισμένων ιδιοτήτων που βοηθούν στην εκτέλεση του κώδικα προγράμματος ή αυτοματισμού. Ομοίως, το Cypress έχει επίσης ένα αρχείο JSON για να αποθηκεύει οποιεσδήποτε τιμές που παρέχουμε ως ιδιότητες διαμόρφωσης.

Ας δούμε μερικά παραδείγματα που μπορούμε να διαμορφώσουμε στο Cypress JSON μας αρχείο.

Το Cypress έχει ήδη εκχωρήσει ορισμένες προεπιλεγμένες τιμές διαμόρφωσης. Υπάρχουν πολλές επιλογές που μπορούμε να προσαρμόσουμε με βάση τις απαιτήσεις μας. Για παράδειγμα, μπορούμε να παρέχουμε το baseURL ιδιοκτησία στο δικό μας cypress.json αρχείο. Έτσι, κάθε φορά που εκτελούμε το σενάριο, το baseURL ρυθμίζεται και ενεργοποιείται.

Επιλογή	Προεπιλεγμένες τιμές	Περιγραφή
baseUrl	μηδέν	Αυτή η επιλογή μπορεί να χρησιμοποιηθεί ως URL πρόθεμα για το cy.request () or cy.visit () εντολές.
WatchForFileChanges	αληθής	Αυτή η επιλογή ορίζεται ως αληθής από προεπιλογή. Παρακολουθεί τα αρχεία για αλλαγές και τα επανεκκινεί όταν γίνουν οποιεσδήποτε τροποποιήσεις.

Παρακάτω είναι το στιγμιότυπο που έχουμε τροποποιήσει τις ιδιότητες baseURL και watchForFileChanges στο δικό μας Cypress.json αρχείο.

Σημείωση: Θα συζητήσουμε αργότερα όλες τις επιλογές στο Cypress Configuration ως ξεχωριστό θέμα.

Παράδειγμα κυπαρίσσι — ***αρχείο cypress.json***

Ανοίξτε το Cypress

Νωρίτερα, είδαμε πώς να δημιουργήσουμε ένα έργο Cypress. Εδώ, θα δούμε πώς να ανοίξουμε και να εκτελέσουμε το Cypress Test runner. Ας βουτήξουμε λοιπόν!

Εάν είχατε εγκαταστήσει το Cypress μέσω npm, τότε έχει εγκατασταθεί στον κατάλογο ./node_modules. Ως εκ τούτου, μπορούμε να ανοίξουμε το δικό μας Cypress test runner περνώντας μια εντολή npm από το ρίζα του καταλόγου του έργου μας.

Μπορούμε να ανοίξουμε το Cypress με έναν από τους παρακάτω τρόπους

1. δίνοντας την εντολή πλήρους διαδρομής

./node_modules/.bin/cypress open

2. χρησιμοποιώντας τη συντόμευση για τον κάδο npm

$(npm bin)/cypress open

3. χρησιμοποιώντας npx

Εδώ το npx υποστηρίζεται μόνο με npm> v5.2, ή μπορούμε να το εγκαταστήσουμε ξεχωριστά.

npx cypress open

4. χρησιμοποιώντας νήματα

yarn run cypress open

Τώρα θα δούμε πώς να ανοίξουμε το Cypress περνώντας την εντολή πλήρους διαδρομής στο τερματικό μας.

1. Πρέπει να δώσετε την εντολή που αναφέρεται παραπάνω στο σημείο 1 και μπορείτε να δείτε τα παρακάτω στο τερματικό

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

***Παραδείγματα αρχείων στο Test Runner***

Τώρα ας επιστρέψουμε στον κώδικα VS. Αρχικά, μπορείτε να δείτε ορισμένες δομές φακέλων που έχουν συμπληρωθεί. Τώρα ας αναλύσουμε κάθε δομή φακέλων και να τις εξετάσουμε λεπτομερώς.

Δομή φακέλων στο Κυπαρίσσι

Όπως βλέπουμε, η Cypress δημιούργησε μια δομή φακέλων στον επεξεργαστή κώδικα. Θα τα συζητήσουμε λεπτομερώς.

Πρότυπα - Ο φάκελος προσάρτησης περιέχει τα δεδομένα που είναι στατικά και μπορούν να επαναχρησιμοποιηθούν σε όλο το έργο. Μια βέλτιστη πρακτική δεν είναι τα σκληρά δεδομένα (όπως διαπιστευτήρια, δοκιμαστικά μηνύματα) στις δοκιμές μας. Αντ 'αυτού, έχουμε πρόσβαση σε αυτά μέσω ενός αρχείου JSON, CSV ή HTML. Πρέπει να δημιουργήσουμε τα αρχεία δεδομένων μας στον φάκελο προσάρτησης. Έχουμε πρόσβαση σε αυτό το αρχείο στη δοκιμή μας χρησιμοποιώντας cy.fxture εντολή.
Ενσωμάτωση - Σε αυτόν τον φάκελο, γράφουμε τις πραγματικές περιπτώσεις δοκιμών που συνήθως ονομάζουμε αρχείο προδιαγραφών. Μέσα στο φάκελο ενοποίησης, μπορούμε να δημιουργήσουμε πολλούς φακέλους και πολλά δοκιμαστικά αρχεία σε κάθε φάκελο με βάση τις απαιτήσεις του έργου μας. Μπορείτε επίσης να δείτε ορισμένα προεπιλεγμένα αρχεία προδιαγραφών που παράγονται με μερικά παραδείγματα.
Πρόσθετα - Ο φάκελος Plugins περιέχει αρχεία που σας επιτρέπουν να πατήσετε, να αποκτήσετε πρόσβαση και να τροποποιήσετε την εσωτερική λειτουργική συμπεριφορά του Cypress. Με τα πρόσθετα, μπορείτε να γράψετε τον προσαρμοσμένο κώδικα που μπορεί να σας βοηθήσει να εκτελέσετε τις δοκιμαστικές εντολές που έχουν άμεση πρόσβαση σε κάθε τμήμα (πριν ή μετά την εκτέλεση) της δομής του κώδικα. Από προεπιλογή, το Cypress δημιουργεί τις προσθήκες σε αυτήν τη διαδρομή cypress/plugin/index.js
ΥΠΟΣΤΗΡΙΞΗ - Κάτω από το φάκελο υποστήριξης, έχουμε τα αρχεία που μας βοηθούν να παρέχουμε τυπικές ή επαναχρησιμοποιούμενες μεθόδους. Πριν από κάθε εκτέλεση προδιαγραφών, το Cypress εκτελεί το φάκελο Support. Επομένως, δεν είναι απαραίτητο να εισαγάγετε το αρχείο υποστήριξης σε κάθε άλλο αρχείο προδιαγραφών. Αυτός ο φάκελος είναι το σωστό μέρος για να προσθέσετε επαναχρησιμοποιήσιμες μεθόδους ή καθολικές λειτουργίες απαραίτητες για χρήση σε όλα τα άλλα αρχεία προδιαγραφών.
Ενότητες κόμβων - Αυτός ο φάκελος περιέχει όλα τα πακέτα npm που εγκαταστήσαμε. Οι ενότητες κόμβων είναι σημαντικές για την εκτέλεση οποιουδήποτε έργου κόμβου. Όλες οι λειτουργίες που υπάρχουν στο έργο Cypress είναι γραμμένες στον φάκελο των κόμβων. Δεν θα τροποποιήσουμε κανένα αρχείο μέσα σε μονάδες κόμβων.
Κυπαρίσσι.json - Μπορούμε να προσθέσουμε πολλές διαμορφώσεις στο δικό μας Κυπαρίσσι.json αρχείο. Για παράδειγμα, μπορούμε να προσθέσουμε μεταβλητές περιβάλλοντος, baseURL, χρονικά όρια ή άλλες επιλογές για να παρακάμψουμε τις προεπιλεγμένες επιλογές στο αρχείο διαμόρφωσης Cypress.

Μεταβλητές και ψευδώνυμα

Θα συζητήσουμε λεπτομερώς τις μεταβλητές και τα ψευδώνυμα στο Cypress.

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

Επιστροφή τιμών στο Cypress

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

const button = cy.get("login-btn");  //this command is to get the element with the button attribute

button.click()

Κλείσιμο

Δεν μπορούμε να αποκτήσουμε πρόσβαση στα χαρακτηριστικά του κουμπιού μέσω της παραπάνω εντολής. Αντ 'αυτού, μπορούμε να αποδώσουμε εντολές Cypress χρησιμοποιώντας .then (). Τα ονομάζουμε κλεισίματα.

.τότε()

.then () σάς βοηθά να αποκτήσετε πρόσβαση στο νήμα που προκύπτει από την προηγούμενη εντολή. Αν έχετε καταλάβει εγγενείς υποσχέσεις, είναι με τον ίδιο τρόπο .then () λειτουργεί με το Cypress. Μπορούμε επίσης να τοποθετούμε διαφορετικές εντολές μέσα .then (). Κάθε ένθετη εντολή μπορεί να έχει πρόσβαση στην προηγούμενη εντολή στο βρόχο. Θα το δούμε με ένα παράδειγμα.

cy.get('login').then(($btn) => {

  // store the button's text
  const buttonText = $btn.text()

  // we are comparing the two buttons' text
  // and ensuring they are different
  cy.get('login').should(($btn2) => {
    expect($btn2.text()).not.to.eq(buttonText)
  })
})

Χρησιμοποιήσαμε Κλείσιμο στο παραπάνω παράδειγμα, επιτρέποντάς μας να διατηρήσουμε την αναφορά της προηγούμενης εντολής στο βρόχο.

Μεταβλητές

Συνήθως, έχουμε την τάση να αντιστοιχίζουμε μια τιμή σε μια μεταβλητή. Αλλά στο Cypress χρησιμοποιούμε μόλις const, varκαι let. Όταν χρησιμοποιούμε κλείσιμο, μπορούμε να έχουμε πρόσβαση στα παραγόμενα αντικείμενα χωρίς να τα αντιστοιχίσουμε σε μια μεταβλητή.

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

<button>increment</button>

You clicked button <span id="num">0</span> times

Εδώ, το εύρος με το πλήθος 0 συνεχίζει να αυξάνεται κάθε φορά που κάνουμε κλικ στο κουμπί. Έτσι, το αντικείμενο του κουμπιού τείνει να αλλάζει την κατάστασή του κάθε φορά.

Τώρα ας δούμε πώς μπορούμε να το αντιστοιχίσουμε σε μια μεταβλητή στον κώδικα Cypress μας.

cy.get('#num').then(($span) => {
  // we are capturing the number by assigning it to a variable
  const num1 = parseFloat($span.text())

  cy.get('button')
    .click()  //we have clicked the button once
    .then(() => {
      // we are capturing the number again by assigning it to another variable
      const num2 = parseFloat($span.text())

      // we are ensuring that num1+1 is equal to num2
      expect(num2).to.eq(num1 + 1)
    })
})

Δεδομένου ότι το span αλλάζει την κατάστασή του κάθε φορά που κάνουμε κλικ στο κουμπί, μπορούμε να το αντιστοιχίσουμε σε μια μεταβλητή για να συγκρίνουμε την παρούσα και την προηγούμενη κατάστασή της. Μόνο στην περίπτωση μεταβλητών αντικειμένων απαιτούμε μεταβλητές και χρήση const είναι μια καλή προσέγγιση.

Ψευδώνυμα

Προηγουμένως, είδαμε ποιες είναι οι μεταβλητές και ο περιορισμός της στο Cypress. Για να ξεπεραστεί αυτός ο περιορισμός, τα ψευδώνυμα έρχονται στην εικόνα. Το Alias είναι μια από τις ισχυρές κατασκευές του Cypress. Θα το εξετάσουμε λεπτομερώς με παραδείγματα.

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

1. Επαναχρησιμοποίηση στοιχείων DOM

Μπορούμε ψευδώνυμα στοιχεία DOM και αργότερα να τα προσπελάσουμε για επαναχρησιμοποίηση. Τα ψευδώνυμα ξεπερνούν επίσης τους περιορισμούς του .τότε() εντολή.

2. Κοινή χρήση πλαισίου

Με απλά λόγια, το πλαίσιο κοινής χρήσης μοιράζεται το αντικείμενο μεταξύ των αγκιστριών και των δοκιμών. Η πρωταρχική περίπτωση χρήσης για κοινή χρήση περιεχομένου ασχολείται cy.fixture - που πρόκειται να φορτώσει ένα σταθερό σύνολο δεδομένων σε ένα αρχείο.

Πώς να αποκτήσετε πρόσβαση σε ψευδώνυμα;

Εδώ, θα δούμε πώς να προσπελάσουμε ψευδώνυμα. Θα χρησιμοποιήσουμε το .as() εντολή για εκχώρηση του στοιχείου για μελλοντική χρήση. Η απαιτούμενη παράμετρος είναι η ψευδώνυμο. Το όνομα του ψευδωνύμου χρησιμοποιείται ως αναφορά μέσα σε ένα cy.get() or cy.wait() χρησιμοποιώντας τα @ πρόθεμα.

Θα εξετάσουμε ένα παράδειγμα για τον τρόπο πρόσβασης στα ψευδώνυμα.

cy.get('#user_login').as('username')
cy.get('@username').type('abc@gmail.com')

Στην πρώτη γραμμή, λαμβάνουμε το αναγνωριστικό του χρήστη_login από το DOM. Στη συνέχεια χρησιμοποιούμε .as() και δήλωση με όνομα χρήστη. Στη δεύτερη γραμμή, έχουμε πρόσβαση στο ψευδώνυμό μας με @ σύμβολο και εκτέλεση του τύπος δράση.

Παράδειγμα δοκιμής κυπαρίσσι

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

Βασικές κατασκευές κυπαρισσιών

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

Περιγράφω() - συνδυάζει όλες τις δοκιμαστικές περιπτώσεις σε ένα και μόνο μεγαλύτερο τεστ και τις ομαδοποιεί. Χρειάζονται δύο παράμετροι - η περιγραφή του τεστ και μια συνάρτηση επανάκλησης.
το() - γράφουμε μεμονωμένες περιπτώσεις δοκιμών στο μπλοκ μας (). Αυτό το μπλοκ παίρνει επίσης δύο παραμέτρους - τι κάνει μια δοκιμή και η δεύτερη παράμετρος είναι η συνάρτηση επανάκλησης.
μετά() - αυτό εκτελείται μετά από όλες τις δοκιμές στο αρχείο προδιαγραφών.
afterEach () - τρέχει μετά από κάθε μεμονωμένη περίπτωση δοκιμής.
πριν() - εκτελείται πριν από όλες τις δοκιμές στο αρχείο προδιαγραφών.
πρινΚάθε () - εκτελείται πριν από κάθε μεμονωμένη περίπτωση δοκιμής.

Πώς να γράψετε μια δοκιμαστική θήκη;

Πριν ξεκινήσουμε, πρέπει να γνωρίζουμε τι είναι μια δοκιμαστική θήκη, να την γράφουμε και ποια είναι τα βήματα για μια βασική δοκιμαστική θήκη.

1. Προαπαιτούμενο - Η κατάσταση της εφαρμογής που πρόκειται να δοκιμάσουμε.

2. Ενέργειες - Εκτελούμε κάποια ενέργεια στην εφαρμογή.

3. Ισχυρισμός - Επιβεβαιώνουμε ή επικυρώνουμε την αλλαγή συμπεριφοράς σχετικά με τις ενέργειές μας.

Θα εξετάσουμε LamdaGeeks αίτηση για τα παραδείγματα δοκιμών μας. Με την ίδια διαδικασία, θα εξετάσουμε το ενδεχόμενο αυτοματοποίησης του ακόλουθου σεναρίου

1. Επισκεφθείτε τον ιστότοπο https://lambdageeks.com/

2. Επικυρώστε αν ο τίτλος είναι Home - Lambda Geeks
Κυπαρίσσι χρησιμοποιεί cy ως τον ορισμό του τύπου. Θα προσθέσουμε το cy εντολή για επίκληση οποιωνδήποτε μεθόδων.
Αρχικά, ας δημιουργήσουμε ένα νέο αρχείο στον επεξεργαστή κώδικα.

1. Δημιουργήστε έναν νέο φάκελο με το όνομα Διαδήλωση κάτω από το φάκελο ενοποίησης.

2. Στο φάκελο Demo, δημιουργήστε ένα νέο αρχείο δείγμα.js. Θα γράψουμε την πρώτη δοκιμαστική μας υπόθεση σε αυτό το αρχείο.

Τώρα ας αρχίσουμε να γράφουμε τις δοκιμαστικές μας περιπτώσεις!

1. 1. Πρώτον, θα επισκεφθούμε τη σελίδα χρησιμοποιώντας το επίσκεψη() μέθοδος στο Cypress. Αυτή η εντολή θα μεταβεί στη διεύθυνση URL που παρέχουμε. Θα τα συμπεριλάβουμε μέσα σε ένα μπλοκ περιγραφής () και ().

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {
        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

2. Μόλις η εφαρμογή είναι ανοιχτή, θα επικυρώσουμε τον τίτλο χρησιμοποιώντας το get() μέθοδος στο Cypress .get() παίρνει όλους τους επιλογείς css από το DOM.

Έχουμε πρόσβαση στον τίτλο χρησιμοποιώντας το title() μέθοδος, και ισχυριζόμαστε ότι χρησιμοποιούμε τη βιβλιοθήκη Chai με την εντολή θα πρέπει να περάσει η πρώτη παράμετρος ως ίση, εν συντομία eq. Η δεύτερη παράμετρος είναι η συμβολοσειρά που περιμένουμε.

 cy.title().should('eq','Home - Lambda Geeks')

Χέρεϊ! Με δύο απλά βήματα, έχουμε γράψει τη θήκη Cypress Test.

Εδώ είναι ο πλήρης κωδικός της δοκιμαστικής μας υπόθεσης

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {

        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

        // validate the title
        cy.title().should('eq','Home - Lambda Geeks')
       
    });
});

***Παράδειγμα κυπαρίσσι***: ***Πρώτη δοκιμαστική θήκη***

Παράδειγμα σύνδεσης Cypress

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

1. Επισκεφτούμε τον ιστότοπο https://demo.applitools.com/ χρησιμοποιώντας cy.visit εντολή.

 cy.visit('https://demo.applitools.com/')

2. Εισαγάγετε το όνομα χρήστη στο πεδίο ονόματος χρήστη χρησιμοποιώντας την εντολή type. Θα περάσουμε το όνομα χρήστη ως συμβολοσειρά στον τύπο ως παράμετρος.

 cy.get('#username').type('test123')

3. Ομοίως, γράφουμε την ίδια εντολή για να εισαγάγετε τον κωδικό πρόσβασης

 cy.get('#password').type('123')

4. Τώρα, κάνουμε κλικ στο κουμπί σύνδεσης χρησιμοποιώντας το click() μέθοδος στο Cypress.

cy.get('#log-in').click();

5. Μετά τη σύνδεση, μεταβαίνουμε στη σελίδα της εφαρμογής. Δηλώνουμε λοιπόν ότι η διεύθυνση URL έχει το /app επέκταση χρησιμοποιώντας το .include() λέξη-κλειδί στο chai. Η πρώτη παράμετρος του θα πρέπει να είναι η λέξη-κλειδί που διεκδικούμε και η δεύτερη παράμετρος είναι το αναμενόμενο αποτέλεσμα.

cy.url().should('include', '/app')

Έχουμε γράψει έναν πλήρη κώδικα για τη λειτουργία σύνδεσης σε πέντε απλά βήματα. Παρακάτω είναι ο πλήρης κωδικός για την αναφορά σας.

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("should login with username and password", function() {

        // visit the lambdageeks page
        cy.visit('https://demo.applitools.com/')

        cy.get('#username').type('test123')

        cy.get('#password').type('123')

        cy.get('#log-in').click();

        cy.url().should('include', '/app')

    });
});

Λύσεις σε κοινά προβλήματα κατά την εκκίνηση του Cypress & FAQ

Μπορεί να υπάρχουν ορισμένα κοινά προβλήματα που θα αντιμετωπίσουμε όταν προσπαθούμε να ξεκινήσουμε το Cypress. Θα συζητήσουμε μερικά από τα κοινά ζητήματα.

1. Δεν είναι δυνατή η εύρεση της εντολής "Cypress" κατά την εντολή Open Cypress

Μόλις εγκατασταθεί, θα πρέπει να περάσουμε την εντολή open cypress από τη ρίζα του καταλόγου έργου. Για παράδειγμα, έχετε δημιουργήσει ένα έργο με το όνομα CypressProject. πρέπει να περάσετε το npm init εντολή μεταβαίνοντας στο φάκελο CypressProject. Μπορείτε να πλοηγηθείτε δίνοντας την παρακάτω εντολή στο τερματικό

cd CypressProject

Μόλις φτάσετε στη ρίζα του έργου, τότε περάστε το npm init εντολή για λήψη των εξαρτήσεων.

Τώρα για να ανοίξετε το Cypress, ορισμένοι προσπαθούν να μεταβούν στο /node_modules φάκελο και ./bin και μετά περάστε την εντολή open cypress. Ωστόσο, δεν λειτουργεί με αυτόν τον τρόπο. Αντ 'αυτού, δώστε ολόκληρη την ανοιχτή εντολή από τη ρίζα του καταλόγου έργου για να ανοίξετε το Cypress.

./node_modules/.bin/cypress open

Επίσης, να είστε προσεκτικοί για την κάθετο/ '. Παρέχετε πάντα αυτό "/ ' για να ανοίξετε το Cypress.

2. Κυπαρίσσι Δεν είναι δυνατή η φόρτωση επειδή είναι απενεργοποιημένη η εκτέλεση σεναρίων σύστημα

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

Set-ExecutionPolicy RemoteSigned

Βήματα για αναπαραγωγή:

Ανοίξτε το PowerShell
Εκτελέστε αυτήν την εντολή Set-ExecutionPolicy RemoteSigned
Τύπος Yes
Τώρα ανοίξτε το Cypress περνώντας ./node_modules/.bin/cypress open. Το Test Runner θα ανοίξει τώρα.

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

1. Ποια είναι τα λειτουργικά συστήματα που υποστηρίζονται από το Cypress;

Υποστηρίζει Cypress παπαρούνα, παράθυρακαι Linux λειτουργικά συστήματα.

2. Το Cypress υποστηρίζει την αυτοματοποίηση σε εγγενείς εφαρμογές για κινητά;

Το Cypress δεν θα μπορεί να εκτελεστεί ποτέ σε μια εγγενή εφαρμογή για κινητά. Αλλά μπορούμε να δοκιμάσουμε εφαρμογές για κινητές συσκευές που είναι γραμμένες σε πρόγραμμα περιήγησης όπως το Iconic Frameworks.

3. Εάν το Cypress υποστηρίζει μόνο εφαρμογές που βασίζονται σε Javascript;

Οχι! Το Cypress μπορεί να αλληλεπιδράσει με οποιοδήποτε πρόγραμμα περιήγησης στο Web γραμμένο σε γλώσσες όπως το Ruby on Rails, Node, PHP, C #. Αλλά θα γράφουμε τις δοκιμές μας σε Javascript. Διαφορετικά, το Cypress μπορεί να αλληλεπιδράσει με οποιοδήποτε front-end, back-end, γλώσσα και πλαίσιο.