Μοντέλο αντικειμένου σελίδας, Κοινώς γνωστό ως POM, είναι ένα δημοφιλές μοτίβο σε οποιοδήποτε πλαίσιο αυτοματισμού. Το Page Object Model μπορεί να εφαρμοστεί και στο Cypress. Το μοντέλο αντικειμένου σελίδας έχει πολλά πλεονεκτήματα στη δημιουργία ενός πλαισίου για αυτοματοποίηση δοκιμών, όπως η μείωση της αντιγραφής κώδικα και η αύξηση της δυνατότητας συντήρησης και αναγνωσιμότητας. Το Cypress μας παρέχει την ευελιξία να ενσωματώσουμε το μοντέλο αντικειμένου σελίδας στο δοκιμαστικό σενάριο. Σε αυτό το άρθρο, θα εξετάσουμε τη δημιουργία ενός μοντέλου αντικειμένου σελίδας Βήμα κυπαρισσιού βήμα με παραδείγματα.

Περιεχόμενα:

Τι είναι το Model Object Model;
Αρχιτεκτονική πλαισίου μοντέλου αντικειμένου σελίδας
Πλεονεκτήματα της χρήσης μοντέλου αντικειμένου σελίδας στο Cypress
Βήμα προς βήμα Σελίδα Αντικείμενο Μοντέλο Κυπαρίσσι με Παράδειγμα
Πρόσβαση στα Αντικείμενα σελίδας στο αρχείο Spec
Πώς να χρησιμοποιήσετε τα Fixtures ως δοκιμαστική πηγή δεδομένων στο Page Object Model στο Cypress;
Πρόσβαση στις τιμές από το αρχείο JSON στο αρχείο δοκιμής
Συχνές Ερωτήσεις

μοντέλο αντικειμένου σελίδας κυπαρισσιού — ***Μοντέλο αντικειμένου σελίδας κυπαρισσιού***

Τι είναι το Model Object Model;

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

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

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

Υπάρχουν τρεις περιπτώσεις δοκιμών, συγκεκριμένα TC1, TC2 και TC3.

Το TC1 περιέχει τις περιπτώσεις δοκιμής σύνδεσης.
Το TC2 περιέχει περιπτώσεις δοκιμής σύνδεσης και εγγραφής
Το TC3 περιέχει περιπτώσεις σύνδεσης, εγγραφής και κράτησης πτήσεων

Τώρα, η σελίδα σύνδεσης αλληλεπιδρά με το TC1.

Η σελίδα εγγραφής πρέπει να αλληλεπιδρά με τα TC1 και TC2 και

Η σελίδα κράτησης πτήσης πρέπει να αλληλεπιδρά με τα TC1, TC2 και TC3

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

Μία από τις καλύτερες πρακτικές στην κωδικοποίηση είναι μια έννοια που ονομάζεται DRY. Σημαίνει Μην επαναλαμβάνετε τον εαυτό σαςΤο Όπως λέει και η πλήρης φόρμα, δεν πρέπει να επαναλαμβάνουμε τις γραμμές του κώδικα ξανά και ξανά. Για να ξεπεραστεί αυτό, Μοντέλο αντικειμένου σελίδας παίζει σημαντικό ρόλο στις βέλτιστες πρακτικές κωδικοποίησης.

Αρχιτεκτονική πλαισίου μοντέλου αντικειμένου σελίδας

Η καλύτερη πλαίσιο μοντέλου αντικειμένου σελίδας Η αρχιτεκτονική είναι μια δοκιμασμένη αρχιτεκτονική που μπορεί να προσαρμοστεί με απλές μεθόδους. Σήμερα, σχεδόν όλες οι εταιρείες ακολουθούν ευέλικτες μεθοδολογίες, οι οποίες περιλαμβάνουν συνεχή ενοποίηση, ανάπτυξη και δοκιμές. Οι ελεγκτές αυτοματισμού διατηρούν το πλαίσιο δοκιμής για να λειτουργούν παράλληλα με τη διαδικασία ανάπτυξης με το Μοντέλο αντικειμένου σελίδας. Είναι ένα σημαντικό σχέδιο σχεδίασης για τη διατήρηση του πλαισίου δοκιμής αυτοματισμού καθώς ο κώδικας μεγαλώνει με νέες δυνατότητες.

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

Πλεονεκτήματα της χρήσης μοντέλου αντικειμένου σελίδας στο Cypress

Οι μέθοδοι είναι επαναχρησιμοποιήσιμη σε όλο το έργο και εύκολο στη συντήρηση όταν το έργο μεγαλώνει. Οι γραμμές κώδικα γίνονται μείον αναγνώσιμος και βελτιστοποιημένο.
Το Page Object Pattern προτείνει να διαχωρίσουμε το λειτουργίες και ροή από την οποία εκτελούμε στο περιβάλλον χρήστη από επαλήθευση βήματα. Όταν ακολουθούμε το μοτίβο POM, έχουμε την τάση να γράφουμε καθαρός και εύκολα κατανοητός κώδικας.
Με το μοντέλο αντικειμένου σελίδας, αντικειμένων και περιπτώσεις δοκιμής είναι ανεξάρτητα το ένα από το άλλο. Μπορούμε να καλέσουμε τα αντικείμενα οπουδήποτε στο έργο. Με αυτόν τον τρόπο, εάν χρησιμοποιούμε διαφορετικά εργαλεία όπως το TestNG/JUnit για λειτουργικές δοκιμές ή το αγγούρι για δοκιμές αποδοχής, τότε είναι εύκολο προσιτός.

Βήμα προς βήμα Σελίδα Αντικείμενο Μοντέλο Κυπαρίσσι με Παράδειγμα

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

Ας συζητήσουμε το σενάριο στο οποίο θα γράψουμε τις συναρτήσεις σε αυτό το παράδειγμα.

Πλοηγηθείτε στο https://admin-demo.nopcommerce.com/
Εισαγάγετε έγκυρο όνομα χρήστη και κωδικό πρόσβασης
Κάντε κλικ στο κουμπί Σύνδεση
Επικυρώστε τη διεύθυνση URL αν είναι προσαρτημένη /admin μετά τη σύνδεση

Θα δημιουργήσουμε δύο αρχεία - ένα αρχείο PageObject και ένα αρχείο προδιαγραφών για αυτό το παράδειγμα. Ας αρχίσουμε!

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

***Νέος φάκελος με το όνομα PageObject***

2 βήμα: Δημιουργήστε ένα αρχείο με όνομα LoginPage.js σύμφωνα με το Αντικείμενο σελίδας ντοσιέ. Στο LoginPage.js, θα γράψουμε τις μεθόδους που περιλαμβάνουν τις λειτουργίες σύνδεσης.

***Δημιουργία LoginPage.js στο φάκελο PageObject***

3 βήμα: Ας αρχίσουμε να γράφουμε την πρώτη μας μέθοδο δοκιμής στο το LoginPage.js αρχείο. Πρέπει πρώτα να δημιουργήσουμε μια κλάση που θα εξάγουμε στο αρχείο προδιαγραφών μας. Θα ονομάσουμε την τάξη μας ως Σελίδα σύνδεσης

class LoginPage { }

Με βάση τον ψευδοκώδικα, το πρώτο μας βήμα είναι να μεταβούμε στη διεύθυνση URL. Θα ονομάσουμε τη μέθοδό μας ως navigate()Το Μέσα στη μέθοδο πλοήγησης, θα προσθέσουμε το cy.visit() λειτουργία από Cypress.

 navigate() { cy.visit('https://admin-demo.nopcommerce.com/') }

4 βήμα: Τώρα, θα πρέπει να εισάγουμε το όνομα χρήστη στο πεδίο email μας. Θα ονομάσουμε τη μέθοδό μας ως εισάγετε ηλεκτρονική διεύθυνση()Το Πρώτον, θα πρέπει να λάβουμε τον εντοπιστή του πεδίου email και να έχουμε πρόσβαση σε αυτά μέσω cy.get() εντολή. Στη συνέχεια, θα καθαρίσουμε το πεδίο χρησιμοποιώντας το clear() εντολή και προσθέστε το όνομα χρήστη χρησιμοποιώντας το type() εντολή. Στη μέθοδό μας, περνάμε μια παράμετρο όνομα χρήστη για να περάσετε την τιμή στο αρχείο προδιαγραφών. Με αυτόν τον τρόπο, διατηρούμε τη γενική πρόσβαση σε αυτήν τη μέθοδο εάν απαιτείται διαφορετικό αναγνωριστικό ηλεκτρονικού ταχυδρομείου.

enterEmail(όνομα χρήστη) { cy.get('[id=Email]').clear() cy.get('[id=Email]').type(όνομα χρήστη); επιστρέψτε αυτό}

Αντί να γράψετε το cy.get() εντολή δύο φορές στον παραπάνω κώδικα, μπορούμε απλά να τους βρόχο με το κουκκίδα χειριστής.

  enterEmail(όνομα χρήστη) { cy.get('[id=Email]') .clear() .type(username); επιστρέψτε αυτό}

Mightσως έχετε παρατηρήσει return this στη γραμμή 9. αυτό δείχνει ότι το εισάγετε ηλεκτρονική διεύθυνση η μέθοδος ανήκει στο συγκεκριμένο Σελίδα σύνδεσης τάξη. Βασικα, αυτό αντιπροσωπεύει την τάξη.

5 βήμα: Πρέπει να δημιουργήσουμε μια μέθοδο για κωδικούς πρόσβασης παρόμοιους με τη μέθοδο enterEmail. Θα καλέσουμε τη μέθοδο κωδικού πρόσβασής μας ως enterPassword()Το Αρχικά, θα λάβουμε τον εντοπιστή για τον κωδικό πρόσβασης, θα καθαρίσουμε το πεδίο και θα πληκτρολογήσουμε την τιμή εισαγωγής. Θα περάσουμε μια παράμετρο στη μέθοδό μας που ονομάζεται pswd και πρόσβαση στο type() εντολή.

enterPassword(pswd) { cy.get('[id=Password]') .clear() .type(pswd) return this }

6 βήμα: Η τελευταία μας μέθοδος θα ήταν να κάνουμε κλικ στο κουμπί σύνδεσης. Θα ονομάσουμε τη μέθοδό μας ως submit()Το Θα πάρουμε τον εντοπιστή και θα κάνουμε κλικ στο κουμπί χρησιμοποιώντας το click() μέθοδος από το Cypress.

 submit() { cy.get('[type=submit]').κλικ() }

Βήμα 7: Τώρα, πρέπει να εξάγουμε αυτήν την κλάση για να τη χρησιμοποιήσουμε στο αρχείο προδιαγραφών μας. Για αυτό, προσθέτουμε μόνο μία γραμμή εκτός της τάξης μας και μπορούμε εύκολα να την προσπελάσουμε στο αρχείο προδιαγραφών μας.

εξαγωγή προεπιλεγμένης σελίδας σύνδεσης

Χουράι! Δημιουργήσαμε ένα αρχείο αντικειμένου σελίδας για το έργο μας. Prettyταν αρκετά απλό και εύκολο!

Πρόσβαση στα Αντικείμενα σελίδας στο αρχείο Spec

Τώρα ας προχωρήσουμε στη δοκιμαστική μας υπόθεση. Πρέπει να δημιουργήσουμε ένα αρχείο προδιαγραφών στο φάκελο ενσωμάτωσης. Θα καλέσουμε το αρχείο προδιαγραφών μας POMDemo.spec.js.

***Δημιουργία αρχείου POMDemo.spec.js***

1 βήμα: Για να αποκτήσουμε πρόσβαση στις μεθόδους μας στο αρχείο LoginPage.js, πρέπει εισαγωγή στο αρχείο προδιαγραφών μας. Εισάγουμε χρησιμοποιώντας τη δήλωση εισαγωγής. Θα πρέπει να μεταβείτε στο αρχείο LoginPage.js χρησιμοποιώντας ../

Στην περίπτωσή μας, το μονοπάτι είναι ../integration/PageObject/LoginPageΤο Έτσι, η δήλωση εισαγωγής θα μοιάζει με την παρακάτω.

εισαγωγή της Σελίδας εισόδου από το "../integration/PageObject/LoginPage"

2 βήμα: Δεδομένου ότι χρησιμοποιούμε Mocha, θα γράψουμε τη δοκιμαστική μας θήκη μέσα describe() και it() ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. περιγράψτε () αντιπροσωπεύει α δοκιμαστική σουίτα, και () αντιπροσωπεύει ένα περίπτωση δοκιμήςΤο Και τα δύο μπλοκ είναι μια συνάρτηση και δέχονται μια παράμετρο συμβολοσειράς που περιλαμβάνει το περιγραφή της δοκιμής.

describe("Cypress POM Test Suite", συνάρτηση () { })

Μέσα στο μπλοκ περιγραφής, θα γράψουμε το δικό μας it() προσθέτοντας την περιγραφή ως σύνδεση με έγκυρα διαπιστευτήρια.

it ("Σύνδεση με έγκυρα διαπιστευτήρια", συνάρτηση () { })

3 βήμα: Για να αποκτήσουμε πρόσβαση στις μεθόδους μας από το αρχείο αντικειμένου Σελίδας, θα πρέπει να δημιουργήσουμε ένα παράδειγμα για την κλάση σύνδεσης. Για να δημιουργήσουμε ένα παράδειγμα για την κλάση σύνδεσης, πρέπει να δηλώσουμε μια μεταβλητή και να την εκχωρήσουμε στο αρχείο της τάξης μας χρησιμοποιώντας το νέος λέξη -κλειδί. Με τη μεταβλητή που δηλώνεται, μπορούμε εύκολα να έχουμε πρόσβαση στις μεθόδους από το αρχείο αντικειμένου Σελίδας.

                                               const login = new LoginPage();

Note: Με τη μεταβλητή login, μπορούμε να έχουμε πρόσβαση στις μεθόδους από την κλάση αντικειμένου σελίδας. Όταν αρχίσουμε να πληκτρολογούμε loginΤο , το vscode θα αναφέρει τις προτάσεις όλων των μεθόδων που είναι διαθέσιμες στο αρχείο LoginPage.js. Αυτό μας βοηθά να επαληθεύσουμε ότι έχουμε εξάγει και εισάγει σωστά την τάξη μας!

4 βήμα: Ας καλέσουμε το δικό μας navigate() μέθοδος για να επισκεφθείτε τη διεύθυνση URL. Αυτή είναι η πρώτη ενέργεια στη δοκιμαστική μας περίπτωση.

/// εισαγωγή Σελίδα εισόδου από "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Σύνδεση με έγκυρα διαπιστευτήρια", function () { const login = new LoginPage(); login.navigate(); }); });

5 βήμα: Θα πρέπει να εισαγάγετε το όνομα χρήστη στο πεδίο email. Έχουμε πρόσβαση στο enterEmail() με Σύνδεση αντικείμενο. enterEmail() η μέθοδος δέχεται μια παράμετρο όνομα χρήστηΤο Θα πρέπει λοιπόν να περάσουμε την τιμή για το όνομα χρήστη ως a κορδόνι στο αρχείο προδιαγραφών μας

/// εισαγωγή Σελίδα εισόδου από "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Σύνδεση με έγκυρα διαπιστευτήρια", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); }) })

6 βήμα: Παρόμοια με το βήμα 5, θα πρέπει να καλέσουμε το δικό μας enterPassword() μέθοδο περνώντας τον κωδικό πρόσβασης ως παράμετρο στη συμβολοσειρά.

/// εισαγωγή Σελίδα εισόδου από "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Σύνδεση με έγκυρα διαπιστευτήρια", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); }) })

7 βήμα: Στη συνέχεια, πρέπει να κάνουμε κλικ στο κουμπί σύνδεσης. Θα καλέσουμε τη μέθοδο submit() από το αρχείο αντικειμένου της σελίδας μας.

/// εισαγωγή Σελίδα εισόδου από "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Σύνδεση με έγκυρα διαπιστευτήρια", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); login.submit(); }) })

8 βήμα: Μετά τη σύνδεση, πρέπει να επιβεβαιώσουμε τη διεύθυνση URL. Θα επαληθεύσουμε αν η διεύθυνση URL είναι ίσος στη διεύθυνση URL μετά τη σύνδεση. Για ισχυρισμό, θα χρησιμοποιήσουμε το Τσάι βιβλιοθήκη ισχυρισμών, η οποία είναι ενσωματωμένη με Κυπαρίσσι.

/// εισαγωγή Σελίδα εισόδου από "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Σύνδεση με έγκυρα διαπιστευτήρια", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); login.submit(); cy.url().should('be.equal', 'https://admin-demo .nopcommerce.com/admin/') }) })

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

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

Χουράι! Έχουμε γράψει με επιτυχία μια δοκιμαστική περίπτωση που χρησιμοποιεί το Page Object Model στο Cypress. Μπορούμε να ενσωματώσουμε αυτό το μοτίβο σε έργα σε πραγματικό χρόνο. Υπάρχουν πολλοί τρόποι με τους οποίους μπορούμε να γράψουμε τις μεθόδους σε ένα αρχείο αντικειμένου σελίδας. Σας έδειξα ένα παράδειγμα που είναι τυπικό και λειτουργεί για οποιοδήποτε έργο. Μπορείτε επίσης να γράψετε μόνο το συνάρτηση επιστροφής στο αρχείο αντικειμένου σελίδας και, στη συνέχεια, κάντε κλικ και τύπος απευθείας στο αρχείο προδιαγραφών μας.

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

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

Αντικείμενο σελίδας - LoginPage.js

class LoginPage { navigate() { cy.visit('https://admin-demo.nopcommerce.com/') } enterEmail() { return cy.get('[id=Email]') } enterPassword() { return cy.get('[id=Password]') } submit() { return cy.get('[type=submit]') } } export default LoginPage

Όπως είδαμε παραπάνω, γράφουμε μόνο τον εντοπιστή μέσα στη λειτουργία μας και τους επιστρέφουμε. Η απόδοση αντιπροσωπεύει ότι η συγκεκριμένη μέθοδος ανήκει στο κλάση LoginPage.jsΤο Δεν προσθέτουμε καμία ενέργεια στις μεθόδους μας.

***Παράδειγμα αρχείου αντικειμένου σελίδας***

Αρχείο προδιαγραφών - POMDemo.spec.js

Θα εξετάσουμε το παράδειγμα πρόσβασης στις μεθόδους στο αρχείο προδιαγραφών.

/// εισαγωγή Σελίδα εισόδου από "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Σύνδεση με έγκυρα διαπιστευτήρια", function () { const login = new LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().type('admin@yourstore.com'); login.enterPassword().clear() login.enterPassword().type('admin'); login. submit().click(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Εδώ, καλούμε τη μέθοδο από το αρχείο PageObject και εκτελούμε τις δοκιμαστικές ενέργειες. Έτσι, πρώτα, καλούμε μεταβλητή αναφοράς Σύνδεση και στη συνέχεια να το προσθέσετε με τη μέθοδο enterEmail() και τέλος προσθήκη της δράσης τύπος. Στο δικό μας type(), περνάμε το όνομα χρήστη αξία.

Όπως μπορείτε να δείτε, όλες οι εντολές έχουν εκτελεστεί και η δοκιμαστική περίπτωση έχει περάσει!

Μπορείτε να επιλέξετε όποιο μοντέλο αντικειμένου σελίδας ταιριάζει στο έργο σας και τη γνώμη σας. Δεν υπάρχει κανένας ειδικός κανόνας να τηρούμε μόνο μία διαδικασία.

Πώς να χρησιμοποιήσετε τα Fixtures ως δοκιμαστική πηγή δεδομένων στο Page Object Model στο Cypress;

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

Όπως συζητήθηκε νωρίτερα, Το Fixture βοηθά στην αποθήκευση δεδομένων σε αρχείο JSON ή αρχείο excel ή σε εξωτερική βιβλιοθήκη όπως το Apache POIΤο Θα χρησιμοποιήσουμε αυτά τα δεδομένα δημιουργώντας μια μεταβλητή και θα έχουμε πρόσβαση σε αυτά στο αρχείο προδιαγραφών μας. Ας το καταλάβουμε με ένα παράδειγμα.

Το Cypress παρέχει ένα φάκελο που ονομάζεται "φωτιστικά.. " Θα δημιουργήσουμε ένα JSON αρχείο που ονομάζεται Διαπιστευτήρια.json κάτω από το φάκελο "Fixtures".

Ας δηλώσουμε το όνομα χρήστη, τον κωδικό πρόσβασης και τις τιμές URL που πρέπει να επικυρώσουμε σε μορφή JSON στο διαπιστευτήρια.json αρχείο.

{ "username" : "admin@yourstore.com", "password" : "admin", "adminUrl" : "https://admin-demo.nopcommerce.com/admin/" }

***Διαβίβαση τιμών στο αρχείο credentials.json***

Πρόσβαση στις τιμές από το αρχείο JSON στο αρχείο δοκιμής

Καθώς ορίσαμε τις τιμές στο αρχείο JSON, θα τις προσπελάσουμε στο αρχείο δοκιμαστικής περίπτωσης χρησιμοποιώντας Πρότυπα από Κυπαρίσσι. Θα έχουμε πρόσβαση στην τιμή JSON με αυτό λέξη -κλειδί. Ας τυλίξουμε τη λειτουργία προσαρτήματος σε α πριν() ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ.

describe("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) })

cy.fixture ('διαπιστευτήρια'). στη συνέχεια (συνάρτηση (testdata) {this.testdata = testdata}) - αυτή η γραμμή αντιπροσωπεύει ότι περνάμε το διαπιστευτήρια.json αρχείο ως παράμετρος για το δικό μας cy.fixture () εντολή. Εδώ, δεν απαιτείται να περάσουμε αν πρόκειται για αρχείο JSON. Απλώς περάστε μόνο το όνομα του αρχείου. Αργότερα, περνάμε δεδομένα δοκιμής ως παράμετρο στη συνάρτηση και πρόσβαση στο δεδομένα δοκιμής μεταβλητή χρήση αυτό.

/// εισαγωγή Σελίδα εισόδου από "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) }) it("Σύνδεση με έγκυρα διαπιστευτήρια", συνάρτηση () { const login = new LoginPage(); login.navigate(); login.enterEmail(this.testdata.username) login.enterPassword(this.testdata.password ) login.submit(); cy.url().should('be.equal', this.testdata.adminUrl) }); });

login.enterEmail (this.testdata.username) - Αυτό θα ανακτήσει την τιμή ονόματος χρήστη από το αρχείο credentials.json και θα το συμπληρώσει στο πεδίο email.

login.enterPassword (this.testdata.password) - Αυτό θα ανακτήσει την τιμή κωδικού πρόσβασης από το αρχείο credentials.json και θα την συμπληρώσει στο πεδίο κωδικού πρόσβασης

cy.url (). should ('be.equal', this.testdata.adminUrl) - Αυτό θα πάρει το adminUrl από το αρχείο credentials.json και θα επικυρωθεί στον ισχυρισμό

***Μεταφορά δεδομένων από αρχείο JSON σε αρχείο προδιαγραφών***

Τώρα, ας εκτελέσουμε τη δοκιμαστική θήκη για το αποτέλεσμα.

Όπως βλέπουμε, οι δοκιμαστικές περιπτώσεις έχουν εκτελεστεί και έχουν περάσει. Αυτό το παράδειγμα θα σας βοηθήσει να γράψετε μια βασική δοκιμαστική υπόθεση με βάση τα δεδομένα. Μπορείτε να το ενσωματώσετε στο έργο σας χρησιμοποιώντας αυτήν τη μέθοδο. Μπορείτε να δημιουργήσετε νέα αρχεία JSON κάτω από το φάκελο Fixture, να προσθέσετε τιμές που σχετίζονται με τα δεδομένα δοκιμής και να έχετε πρόσβαση σε αυτό σε οποιοδήποτε αρχείο δοκιμής.

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

Υποστηρίζει το Cypress το Page Object Model;

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

Ποιο μοντέλο αντικειμένου σελίδας πρέπει να χρησιμοποιήσω από τα παραπάνω παραδείγματα;

Δεν υπάρχει κανένας ιδιαίτερος κανόνας που να τηρεί μόνο έναν τρόπο Μοντέλου Αντικειμένου Σελίδας. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε μοντέλο που συζητήθηκε παραπάνω. Είστε ελεύθεροι να προσαρμόσετε το μοντέλο σύμφωνα με το έργο σας.

Γιατί πρέπει να χρησιμοποιήσω φωτιστικά στο Page Object Model in Cypress;

Το Fixture βοηθά στην αποθήκευση ευαίσθητων δεδομένων, όπως όνομα χρήστη, κωδικό πρόσβασης και διευθύνσεις URL σε ξεχωριστό αρχείο όπως το JSON ή το excel. Αυτό διασφαλίζει την ασφάλεια της εφαρμογής και την εύκολη πρόσβαση σε αυτά σε οποιοδήποτε αρχείο στο έργο. Για πρόσβαση στο αρχείο JSON, χρησιμοποιούμε φωτιστικά για να το χρησιμοποιήσετε στο αρχείο προδιαγραφών μας.