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

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

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

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

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

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

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

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

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

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

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

1. SeleniumΜπορείτε να βρείτε το Selenium Βήματα εγκατάστασης στους παρακάτω συνδέσμους, (https://www.guru99.com/installing-selenium-webdriver.html )
2. Εγκατάσταση NPM (Node.js)NodeJS, πρέπει να εγκαταστήσουμε το NodeJS για να εγκαταστήσουμε το μοιρογνωμόνιο. Μπορείτε να βρείτε αυτά τα βήματα εγκατάστασης στον παρακάτω σύνδεσμο. ( https://www.guru99.com/download-install-node-js.html )

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

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

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

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

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

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

webdriver-manager update

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

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

webdriver-manager start

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

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

Το μοιρογνωμόνιο χρειάζεται δύο αρχεία για να τρέξει, α Spec αρχείο και διαμόρφωση αρχείο.

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

2. Αρχείο προδιαγραφών: Αυτό το Αρχείο περιέχει τη λογική και τους εντοπιστές για την αλληλεπίδραση με την εφαρμογή.

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

Βήμα 2) Στο στάδιο αυτό,

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

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

Κώδικας:

Πρέπει να προετοιμάσουμε το αρχείο ρυθμίσεων (conf.js) και αρχείο προδιαγραφών (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()Η σύνταξη περιγραφής προέρχεται από το πλαίσιο Jasmine. Εδώ το "describe" ('Enter GURU99 Name') ορίζει τυπικά στοιχεία μιας εφαρμογής, τα οποία μπορεί να είναι κλάση ή συνάρτηση κ.λπ. Στη σουίτα κώδικα ονομάζεται "Enter GURU99", είναι απλώς μια συμβολοσειρά και όχι ένας κωδικός.
2. it('θα πρέπει να προσθέσει ένα όνομα ως GURU99', συνάρτηση()
3. browser.get('https://angularjs.org') Όπως και στο Selenium Το Webdriver browser.get θα ανοίξει μια νέα παρουσία προγράμματος περιήγησης με την αναφερόμενη διεύθυνση URL.
4. στοιχείο(by.model('yourname')).αποστολή('GURU99') Εδώ βρίσκουμε το στοιχείο web χρησιμοποιώντας το όνομα μοντέλου ως "yourName", που είναι η τιμή του "ng-model" στην ιστοσελίδα. Ελέγξτε το στιγμιότυπο οθόνης παρακάτω-

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Εδώ βρίσκουμε το στοιχείο web χρησιμοποιώντας XPath και αποθηκεύστε την τιμή του σε μια μεταβλητή "γκουρού".
6. αναμένω(guru.getText()).για Ίσο('Hello GURU99!') Τέλος επαληθεύουμε το κείμενο που έχουμε από την ιστοσελίδα (χρησιμοποιώντας gettext() ) με το αναμενόμενο κείμενο .

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

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

Επεξήγηση κώδικα του conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub'Το αρχείο διαμόρφωσης ενημερώνει το μοιρογνωμόνιο τη θέση του Selenium Διεύθυνση για συνομιλία Selenium WebDriver.
2. specs: ['spec.js']Αυτή η γραμμή λέει στο μοιρογνωμόνιο τη θέση των δοκιμαστικών αρχείων spec.js

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

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

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

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

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

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

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

Επεξήγηση:

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

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

Βήμα 1) Ανοίξτε και αλλάξτε το spec.js που αναμένεται να οδηγήσει σε "'Hello change 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!» να ισούται με το 'Hello change GURU99!'. Επίσης, δείχνει πόσες αστοχίες παρουσιάζονται κατά την εκτέλεση του κώδικα.

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

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

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

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

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

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

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

1. Ανοίξτε τη γραμμή εντολών, εκτελέστε την ακόλουθη εντολή για εγκατάσταση τοπικά

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

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

2. Ανοίξτε τη γραμμή εντολών, εκτελέστε την ακόλουθη εντολή για καθολική εγκατάσταση

npm install –g jasmine-reporters@^2.0.0

Σε αυτό το σεμινάριο, θα εγκαταστήσουμε τα jasmine reporters τοπικά.

Βήμα 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-μοντέλο, ng-click.., κ.λπ.. (Που δεν μπορεί να κάνει το σελήνιο).