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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Μοντέλο αντικειμένου σελίδας

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

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

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

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

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

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

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

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

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

2 βήμα: Δημιουργήστε ένα αρχείο με όνομα LoginPage.js σύμφωνα με το PageObject ντοσιέ. Στο 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(username) {
        cy.get('[id=Email]').clear()
        cy.get('[id=Email]').type(username);
        return this
    }

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

  enterEmail(username) {
        cy.get('[id=Email]')
            .clear()
            .type(username);
        return this
    }

μέθοδος enterEmail

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

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

enterPassword(pswd) {
    cy.get('[id=Password]')
        .clear()
        .type(pswd)
    return this
}
μέθοδος enterPassword

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

 submit() {
        cy.get('[type=submit]').click()
    }

μέθοδος υποβολής

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

export default LoginPage

εντολή εξαγωγής

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

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

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

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

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

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

import LoginPage from "../integration/PageObject/LoginPage"

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

describe("Cypress POM Test Suite", function () {
})

Περιγράψτε το μπλοκ

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

it("Login with valid credentials", function () {
       
    })

μπλοκάρει

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

                                               const login = new LoginPage();
Παρουσία μιας τάξης

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

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

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
    });
});

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

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('admin@yourstore.com');
    })
})

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

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('admin@yourstore.com');
        login.enterPassword('admin');
    })
})

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

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('admin@yourstore.com');
        login.enterPassword('admin');
        login.submit();
    })
})

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

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", 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

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

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", 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/')
    });
});

Παράδειγμα αρχείου Spec

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

Αποτέλεσμα δοκιμασίας

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

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

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

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

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

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

Δημιουργία αρχείου JSON

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

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {

    before(function () {
        cy.fixture('credentials').then(function (testdata) {
            this.testdata = testdata
        })
    })
    it("Login with valid credentials", function () {
        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, χρησιμοποιούμε φωτιστικά για να το χρησιμοποιήσετε στο αρχείο προδιαγραφών μας.

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

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

Lambda Geeks