Οδηγός δοκιμών μοιρογνωμόνων: Πλαίσιο εργαλείων αυτοματισμού

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

Anonim

Τι είναι η δοκιμή μοιρογνωμόνων;

Το PROTRACTOR είναι ένα εργαλείο ελέγχου αυτοματοποίησης και συμπεριφοράς από άκρο σε άκρο που παίζει σημαντικό ρόλο στη δοκιμή εφαρμογών AngularJS και λειτουργεί ως ολοκληρωτής λύσεων που συνδυάζει ισχυρές τεχνολογίες όπως Selenium, Jasmine, πρόγραμμα οδήγησης Web κ.λπ. Ο σκοπός του Protractor Testing δεν είναι μόνο για τη δοκιμή εφαρμογών AngularJS αλλά και για τη σύνταξη αυτοματοποιημένων δοκιμών παλινδρόμησης για κανονικές εφαρμογές Ιστού.

Σε αυτό το σεμινάριο για αρχάριους, θα μάθετε-

  • Γιατί χρειαζόμαστε το μοιρογνωμόνιο πλαίσιο;
  • Εγκατάσταση μοιρογνωμόνων
  • Δείγμα δοκιμής εφαρμογής AngularJS χρησιμοποιώντας το Protractor
  • Εκτέλεση του Κώδικα
  • Δημιουργήστε αναφορές χρησιμοποιώντας Jasmine Reporters

Γιατί χρειαζόμαστε το μοιρογνωμόνιο πλαίσιο;

Το JavaScript χρησιμοποιείται σε όλες σχεδόν τις εφαρμογές ιστού. Καθώς οι εφαρμογές μεγαλώνουν, το JavaScript αυξάνεται επίσης σε μέγεθος και πολυπλοκότητα. Σε αυτήν την περίπτωση, γίνεται δύσκολο για τους υπεύθυνους δοκιμών να δοκιμάσουν την εφαρμογή Ιστού για διάφορα σενάρια.

Μερικές φορές είναι δύσκολο να καταγράψετε τα στοιχεία ιστού σε εφαρμογές AngularJS χρησιμοποιώντας JUnit ή Selenium WebDriver.

Το Protractor είναι ένα πρόγραμμα NodeJS το οποίο είναι γραμμένο σε JavaScript και εκτελείται με το Node για την αναγνώριση των στοιχείων ιστού στις εφαρμογές AngularJS και χρησιμοποιεί επίσης το WebDriver για τον έλεγχο του προγράμματος περιήγησης με ενέργειες χρήστη.

Εντάξει, εντάξει τώρα ας συζητήσουμε τι ακριβώς είναι μια εφαρμογή AngularJS;

Οι εφαρμογές AngularJS είναι Εφαρμογές Ιστού που χρησιμοποιούν σύνταξη εκτεταμένου HTML για την έκφραση στοιχείων εφαρμογών ιστού. Χρησιμοποιείται κυρίως για δυναμικές εφαρμογές Ιστού. Αυτές οι εφαρμογές χρησιμοποιούν λιγότερο και ευέλικτο κώδικα σε σύγκριση με τις κανονικές εφαρμογές Web.

Γιατί δεν μπορούμε να βρούμε στοιχεία web Angular JS χρησιμοποιώντας το πρόγραμμα οδήγησης Normal Selenium Web;

Οι γωνιακές εφαρμογές JS έχουν κάποια επιπλέον χαρακτηριστικά HTML όπως ng-repeater, ng-controller, ng-model…, κλπ. Που δεν περιλαμβάνονται στους εντοπιστές Selenium. Το Selenium δεν είναι σε θέση να αναγνωρίσει αυτά τα στοιχεία ιστού χρησιμοποιώντας τον κωδικό Selenium. Έτσι, το Protractor στην κορυφή του Selenium μπορεί να χειριστεί και να ελέγξει αυτά τα χαρακτηριστικά στις Εφαρμογές Ιστού.

Το μοιρογνωμόνιο είναι ένα ολοκληρωμένο πλαίσιο δοκιμών για εφαρμογές με βάση το Angular JS Ενώ τα περισσότερα πλαίσια επικεντρώνονται στη διεξαγωγή δοκιμών μονάδας για εφαρμογές Angular JS, το Protractor επικεντρώνεται στη δοκιμή της πραγματικής λειτουργικότητας μιας εφαρμογής.

Πριν ξεκινήσουμε το Protractor, πρέπει να εγκαταστήσουμε τα ακόλουθα:

  1. Σελήνιο

    Μπορείτε να βρείτε τα βήματα εγκατάστασης σεληνίου στους ακόλουθους συνδέσμους, (https://www.guru99.com/installing-selenium-webdriver.html)

  2. NPM (Node.js)

    Εγκατάσταση NodeJS, πρέπει να εγκαταστήσουμε το NodeJS για να εγκαταστήσουμε το Protractor. Μπορείτε να βρείτε αυτά τα βήματα εγκατάστασης στον παρακάτω σύνδεσμο. (https://www.guru99.com/download-install-node-js.html)

Εγκατάσταση μοιρογνωμόνων

Βήμα 1) Ανοίξτε τη γραμμή εντολών και πληκτρολογήστε "npm install -g μοιρογνωμόνιο" και πατήστε Enter .

Η παραπάνω εντολή θα κατεβάσει τα απαραίτητα αρχεία και θα εγκαταστήσει το Protractor στο σύστημα πελάτη.

Βήμα 2) Ελέγξτε την εγκατάσταση και την έκδοση χρησιμοποιώντας το " Protractor --version ." Εάν είναι επιτυχής, θα εμφανιστεί η έκδοση όπως στο παρακάτω στιγμιότυπο οθόνης. Εάν όχι, εκτελέστε ξανά το βήμα 1.

(Τα βήματα 3 και 4 είναι προαιρετικά αλλά συνιστώνται για καλύτερη πρακτική)

Βήμα 3) Ενημέρωση του προγράμματος οδήγησης προγράμματος οδήγησης Web. Ο διαχειριστής προγράμματος οδήγησης ιστού χρησιμοποιείται για την εκτέλεση των δοκιμών έναντι της γωνιακής εφαρμογής ιστού σε ένα συγκεκριμένο πρόγραμμα περιήγησης. Μετά την εγκατάσταση του Protractor, ο διαχειριστής προγράμματος οδήγησης ιστού πρέπει να ενημερωθεί στην πιο πρόσφατη έκδοση. Αυτό μπορεί να γίνει εκτελώντας την ακόλουθη εντολή στη γραμμή εντολών.

webdriver-manager update

Βήμα 4) Ξεκινήστε τον διαχειριστή προγράμματος οδήγησης ιστού. Αυτό το βήμα θα εκτελέσει τον διαχειριστή προγράμματος οδήγησης ιστού στο παρασκήνιο και θα ακούσει τυχόν δοκιμές που εκτελούνται μέσω μοιρογνωμόνων.

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

webdriver-manager start

Τώρα, εάν μεταβείτε στην ακόλουθη διεύθυνση URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) στο πρόγραμμα περιήγησής σας, θα δείτε στην πραγματικότητα το πρόγραμμα οδήγησης προγράμματος οδήγησης Web να εκτελείται στο παρασκήνιο.

Δείγμα δοκιμής εφαρμογής AngularJS χρησιμοποιώντας το Protractor

Το Protractor χρειάζεται δύο αρχεία για εκτέλεση, ένα αρχείο προδιαγραφών και ένα αρχείο διαμόρφωσης .

  1. Αρχείο διαμόρφωσης : Αυτό το αρχείο βοηθά το μοιρογνωμόνιο να τοποθετούνται τα δοκιμαστικά αρχεία (specs.js) και να μιλά με τον διακομιστή Selenium (Διεύθυνση Selenium) Το Chrome είναι το προεπιλεγμένο πρόγραμμα περιήγησης για το Protractor.
  1. Αρχείο προδιαγραφών: Αυτό το αρχείο περιέχει τη λογική και τους εντοπιστές που αλληλεπιδρούν με την εφαρμογή .

Βήμα 1) Πρέπει να συνδεθούμε στο https://angularjs.org και να εισαγάγουμε το κείμενο ως "GURU99" στο πλαίσιο κειμένου "Εισαγάγετε ένα όνομα εδώ".

Βήμα 2) Σε αυτό το βήμα,

  1. Εισήχθη το όνομα "Guru99"
  2. Στο κείμενο εξόδου εμφανίζεται το "Hello Guru99".

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

Κώδικας:

Πρέπει να προετοιμάσουμε το αρχείο διαμόρφωσης (conf.js) και το αρχείο spec (spec.js) όπως αναφέρεται παραπάνω.

Λογική του spec.js:

describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello GURU99!');});});

Κωδικός Επεξήγηση του spec.js:

  1. περιγραφή ('Enter GURU99 Name', function ()

    Η σύνταξη περιγραφής προέρχεται από το πλαίσιο γιασεμιού. Εδώ "περιγραφή" ('Enter GURU99 Name') ορίζει συνήθως στοιχεία μιας εφαρμογής, η οποία μπορεί να είναι μια κλάση ή μια συνάρτηση κ.λπ. Στην ομάδα κώδικα που ονομάζεται "Enter GURU99", είναι απλώς μια συμβολοσειρά και όχι ένας κωδικός.

  2. αυτό («πρέπει να προσθέσει ένα όνομα ως GURU99», συνάρτηση ()
  3. browser.get ('https://angularjs.org')

    Όπως και στο Selenium Webdriver browser.get θα ανοίξει μια νέα παρουσία προγράμματος περιήγησης με το αναφερόμενο URL

  4. στοιχείο (by.model ('yourName')). sendKeys («GURU99»)

    Εδώ βρίσκουμε το στοιχείο ιστού χρησιμοποιώντας το όνομα Μοντέλου ως "yourName", το οποίο είναι η αξία του "ng-model" στην ιστοσελίδα. Ελέγξτε την παρακάτω οθόνη-

  1. var guru = στοιχείο (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))

    Εδώ βρίσκουμε το στοιχείο ιστού χρησιμοποιώντας το XPath και αποθηκεύουμε την αξία του σε μια μεταβλητή "γκουρού" .

  2. αναμένω (guru.getText ()). toEqual ("Γεια σας GURU99!")

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

Λογική του conf.js:

exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};

Κωδικός Επεξήγηση του conf.js

  1. selenium Διεύθυνση: 'http: // localhost: 4444 / wd / hub'

    Το αρχείο διαμόρφωσης λέει στο Protractor τη θέση της διεύθυνσης Selenium να μιλήσει με το Selenium WebDriver.

  2. προδιαγραφές: ['spec.js']

    Αυτή η γραμμή αναφέρει στο Protractor τη θέση των δοκιμαστικών αρχείων spec.js

Εκτέλεση του Κώδικα

Εδώ πρώτα, θα αλλάξουμε τη διαδρομή καταλόγου ή θα μεταβούμε στο φάκελο όπου τα confi.js και spec.js τοποθετούνται στο σύστημά μας .

Ακολουθήστε το παρακάτω βήμα.

Βήμα 1) Ανοίξτε τη γραμμή εντολών.

Βήμα 2) Βεβαιωθείτε ότι το πρόγραμμα οδήγησης ιστού σεληνίου είναι σε λειτουργία και λειτουργεί. Για αυτό δώστε την εντολή ως "webdriver-manager start" και πατήστε Enter .

(Εάν το πρόγραμμα οδήγησης σεληνίου δεν λειτουργεί και δεν μπορούμε να προχωρήσουμε σε δοκιμή, καθώς το Protractor δεν μπορεί να βρει το πρόγραμμα οδήγησης ιστού για τη διαχείριση της εφαρμογής ιστού)

Βήμα 3) Ανοίξτε μια νέα γραμμή εντολών και δώστε την εντολή ως "protractor conf.js" για να εκτελέσετε το αρχείο διαμόρφωσης.

Εξήγηση:

  • Εδώ το Protractor θα εκτελέσει το αρχείο διαμόρφωσης με δεδομένο αρχείο προδιαγραφών σε αυτό.
  • Μπορούμε να δούμε τον διακομιστή σεληνίου να εκτελείται στο " http: // localhost: 4444 / wd / hub " που έχουμε δώσει στο αρχείο conf.js.
  • Επίσης, εδώ μπορείτε να δείτε το αποτέλεσμα, πόσα περνούν και αποτυχίες όπως στο παραπάνω στιγμιότυπο οθόνης .

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

Βήμα 1) Άνοιγμα και αλλαγή που αναμένεται να έχει ως αποτέλεσμα spec.js σε "'Γεια σας αλλαγή GURU99" όπως παρακάτω.

Μετά την αλλαγή στο spec.js :

describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello change GURU99!');});});

Βήμα 2) Αποθηκεύστε το αρχείο spec.js και επαναλάβετε τα παραπάνω βήματα της ενότητας "Εκτέλεση του κώδικα"

Τώρα, εκτελέστε τα παραπάνω βήματα.

Αποτέλεσμα:

Μπορούμε να δούμε το αποτέλεσμα ως αποτυχημένο που υποδεικνύεται με "F" στο στιγμιότυπο οθόνης με τον λόγο ως "Αναμενόμενο" Γεια σας GURU99! " για να ισούται με το "Γεια σας αλλαγή GURU99!". Επίσης, δείχνει πόσες αποτυχίες συναντώνται κατά την εκτέλεση κώδικα.

Μπορούμε να επιτύχουμε το ίδιο με το πρόγραμμα οδήγησης ιστού Selenium;

Μερικές φορές μπορούμε να αναγνωρίσουμε τα στοιχεία ιστού των εφαρμογών AngularJS χρησιμοποιώντας τον επιλογέα XPath ή CSS από το πρόγραμμα οδήγησης ιστού Selenium. Αλλά στις εφαρμογές AngularJS, τα στοιχεία θα δημιουργηθούν και θα αλλάξουν δυναμικά. Επομένως, το Protractor είναι η καλύτερη πρακτική να δουλεύετε με εφαρμογές AngularJS.

Δημιουργήστε αναφορές χρησιμοποιώντας Jasmine Reporters

Το Protractor υποστηρίζει τους δημοσιογράφους της Jasmine για τη δημιουργία αναφορών δοκιμών. Σε αυτήν την ενότητα, θα χρησιμοποιήσουμε το JunitXMLReporter για να δημιουργήσουμε αυτόματα αναφορές εκτέλεσης δοκιμής σε μορφή XML.

Ακολουθήστε τα παρακάτω βήματα για να δημιουργήσετε αναφορές σε μορφή XML.

Εγκατάσταση του Jasmine Reporter

Υπάρχουν δύο τρόποι για να το κάνετε αυτό, τοπικά ή παγκοσμίως

  1. Ανοίξτε τη γραμμή εντολών εκτελέστε την ακόλουθη εντολή για τοπική εγκατάσταση
npm install --save-dev jasmine-reporters@^2.0.0

Η παραπάνω εντολή θα εγκαταστήσει αναφορές γιασεμί node-modules τοπικά μέσα από τον κατάλογο όπου εκτελούμε την εντολή στη γραμμή εντολών.

  1. Ανοίξτε τη γραμμή εντολών εκτελέστε την ακόλουθη εντολή για καθολική εγκατάσταση
npm install -g jasmine-reporters@^2.0.0

Σε αυτό το σεμινάριο, θα εγκαταστήσουμε τοπικά τους δημοσιογράφους γιασεμιού .

Βήμα 1) Εκτελέστε την εντολή.

npm install --save-dev jasmine-reporters@^2.0.0

από τη γραμμή εντολών όπως παρακάτω.

Βήμα 2) Ελέγξτε τους φακέλους εγκατάστασης στον κατάλογο . Τα "Node_modules" θα πρέπει να είναι διαθέσιμα εάν εγκατασταθούν επιτυχώς όπως στο παρακάτω στιγμιότυπο.

Βήμα 3) Προσθέστε τον ακόλουθο έγχρωμο κώδικα σε ένα υπάρχον αρχείο conf.js 

exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',capabilities: {'browserName': 'firefox'},specs: ['spec.js'],framework: 'jasmine2' ,onPrepare: function() {var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true));}};

Επεξήγηση κωδικού:

Στον κώδικα, δημιουργούμε την αναφορά " JUnitXmlReporter " και δίνουμε τη διαδρομή όπου θα αποθηκεύεται η αναφορά.

Βήμα 4) Ανοίξτε τη γραμμή εντολών και εκτελέστε το μοιρογνωμόνιο εντολών conf.js.

Βήμα 5) Όταν εκτελείτε τον παραπάνω κώδικα, το junitresults.xml θα δημιουργηθεί στην αναφερόμενη διαδρομή.

Βήμα 6) Ανοίξτε το XML και επαληθεύστε το αποτέλεσμα. Το μήνυμα αποτυχίας εμφανίζεται στο αρχείο αποτελεσμάτων καθώς η δοκιμαστική μας υπόθεση απέτυχε. Η δοκιμαστική περίπτωση απέτυχε επειδή το αναμενόμενο αποτέλεσμα από το "spec.js" δεν ταιριάζει με το πραγματικό αποτέλεσμα από μια ιστοσελίδα

Βήμα 7) Χρησιμοποιήστε το αρχείο junitresult.xml για αποδεικτικά στοιχεία ή αρχεία αποτελεσμάτων.

Περίληψη:

Αν και το Selenium μπορεί να κάνει μερικά από τα πράγματα που κάνει το μοιρογνωμόνιο, το μοιρογνωμόνιο είναι το βιομηχανικό πρότυπο και η βέλτιστη πρακτική για τη δοκιμή εφαρμογών AngularJS. Ένα μοιρογνωμόνιο μπορεί επίσης να διαχειριστεί πολλαπλές δυνατότητες σε αυτό και να χειριστεί τις δυναμικές αλλαγές των στοιχείων ιστού χρησιμοποιώντας ng-model, ng-click…, κλπ… (Ποιο σελήνιο δεν μπορεί να κάνει).

Αυτό το άρθρο συνεισφέρει ο Ranjith Kumar Enishetti