ProtracΕκμάθηση Δοκιμών Tor: Πλαίσιο Εργαλείων Αυτοματισμού

⚠️ Ειδοποίηση κατάργησης: Protracο tor είναι έχει καταργηθεί και αρχειοθετηθείΗ υποστήριξη έληξε τον Αύγουστο του 2023 και το Angular CLI εγκατέλειψε το Pro του.tractor builder μετά το Angular 15. Pick Θεατρικός συγγραφέας, Cypress, WebdriverIO ή TestCafe για νέα δοκιμή από άκρο σε άκροΗ παρακάτω αναλυτική περιγραφή παραμένει για τις σουίτες παλαιού τύπου.

Γιατί χρειαζόμαστε επαγγελματίεςtracΠλαίσιο Tor;

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

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

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

Τι ακριβώς είναι λοιπόν μια εφαρμογή AngularJS;

AngularJS Οι εφαρμογές είναι εφαρμογές ιστού που χρησιμοποιούν εκτεταμένη σύνταξη HTML για να εκφράσουν στοιχεία εφαρμογών ιστού. Χρησιμοποιείται κυρίως για δυναμικές εφαρμογές ιστού. Αυτές οι εφαρμογές χρησιμοποιούν λιγότερο και πιο ευέλικτο κώδικα σε σύγκριση με τις κανονικές εφαρμογές ιστού. Σημειώστε ότι η μακροπρόθεσμη υποστήριξη του AngularJS 1.x έληξε στις 31 Δεκεμβρίου 2021, επομένως τέτοιες εφαρμογές είναι παλαιότερες σήμερα.

Γιατί δεν μπορούμε να βρούμε στοιχεία ιστού AngularJS χρησιμοποιώντας το Normal; Selenium WebDriver;

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

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

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

1. Selenium: μπορείτε να βρείτε το Selenium βήματα εγκατάστασης στο Selenium Οδηγός εγκατάστασης WebDriver.
2. NPM (Node.js): Πρέπει να εγκαταστήσουμε το Node.js για να εγκαταστήσουμε το Protractor. Μπορείτε να βρείτε αυτά τα βήματα εγκατάστασης στο Οδηγός λήψης και εγκατάστασης του Node.js.

ProtracΕγκατάσταση Tor

Βήμα 1) Ανοίξτε τη γραμμή εντολών και πληκτρολογήστε «npm install -g pro»tracβραχώδης κορυφή" και πατήστε Enter.

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

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

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

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

webdriver-manager update

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

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

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

webdriver-manager start

Η κονσόλα αναφέρει τη διεύθυνση ακρόασης.

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

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

Με τον διαχειριστή προγραμμάτων οδήγησης σε λειτουργία, ProtracΤο tor χρειάζεται δύο αρχεία για να εκτελεστεί, ένα Spec αρχείο και διαμόρφωση αρχείο.

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

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

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

1. Εισήγαγε το όνομα «Guru99 "
2. Στο κείμενο εξόδου "Γεια" GuruΕμφανίζονται 99″.

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

Code:

Πρέπει να προετοιμάσουμε το αρχείο ρυθμίσεων (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!');
  });
});

Code Επεξήγηση του spec.js:

1. περιγράφουν('Εισαγωγή ονόματος GURU99', function()Η σύνταξη περιγραφής προέρχεται από το Πλαίσιο JasmineΕδώ, η «περιγραφή» ('Εισαγωγή ονόματος GURU99') συνήθως ορίζει τα στοιχεία μιας εφαρμογής, τα οποία μπορεί να είναι μια κλάση ή μια συνάρτηση κ.λπ. Στη σουίτα κώδικα που ονομάζεται «Εισαγωγή GURU99», είναι απλώς μια συμβολοσειρά και όχι ένας κώδικας.
2. it('θα πρέπει να προσθέσει ένα όνομα ως GURU99', συνάρτηση()
3. browser.get('https://angularjs.org') Όπως και στο Selenium Το WebDriver browser.get θα ανοίξει μια νέα παρουσία προγράμματος περιήγησης με την αναφερόμενη URL.
4. στοιχείο(by.model('yourname')).αποστολή('GURU99') Εδώ βρίσκουμε το στοιχείο web χρησιμοποιώντας το όνομα μοντέλου ως "yourName", το οποίο είναι η τιμή του "ng-μοντέλο"στην ιστοσελίδα. Δείτε το στιγμιότυπο οθόνης παρακάτω-

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']
};

Code Επεξήγηση του conf.js

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

Εκτέλεση του Code

Αρχικά, μεταβείτε στον φάκελο όπου βρίσκονται τα αρχεία conf.js και spec.js και, στη συνέχεια, ακολουθήστε τα παρακάτω βήματα..

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

Βήμα 2) Σιγουρευτείτε Selenium Ο WebDriver manager είναι εγκατεστημένος και λειτουργεί. Για αυτό, δώστε την εντολή "webdriver-manager start" και πατήστε Enter..

(Αν Selenium Το WebDriver δεν λειτουργεί, δεν μπορούμε να προχωρήσουμε σε δοκιμή ως ProtracΤο tor δεν μπορεί να βρει το WebDriver για να χειριστεί την εφαρμογή web)

Βήμα 3) Ανοίξτε μια νέα γραμμή εντολών και δώστε την εντολή ως «επαγγελματίας»tractor conf.js” για να εκτελέσετε το αρχείο διαμόρφωσης. Η εκτέλεση ολοκληρώνεται όπως φαίνεται παρακάτω.

Επεξήγηση:

• Εδώ ProtracΤο tor θα εκτελέσει το αρχείο ρυθμίσεων με το δεδομένο αρχείο προδιαγραφών σε αυτό.
• Μπορούμε να δούμε το Selenium διακομιστής που εκτελείται σε "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 και επαναλάβετε τα παραπάνω βήματα της ενότητας «Εκτέλεση του Code" Ενότητα

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

Αποτέλεσμα:

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

Μπορούμε να πετύχουμε το ίδιο με Selenium WebDriver;

Μερικές φορές, τα στοιχεία AngularJS μπορούν να εντοπιστούν με επιλογείς XPath ή CSS από Selenium WebDriver. Ωστόσο, αυτά τα στοιχεία δημιουργούνται και ανακάμπτουν δυναμικά, επομένως το ProtracΤο tor ήταν η ασφαλέστερη επιλογή για τις σουίτες AngularJS.

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

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

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

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

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

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

Η παραπάνω εντολή εγκαθιστά το jasmine-reporters τοπικά, μέσα στον κατάλογο όπου εκτελείται.

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

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) Ανοίξτε τη γραμμή εντολών και εκτελέστε την εντολή γιαtractor conf.js.

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

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

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

Protractor vs Σύγχρονες Εναλλακτικές Λύσεις Αυτοματισμού Δοκιμών

Από το ProtracΤο tor δεν λαμβάνει πλέον ενημερώσεις, οι ομάδες που σχεδιάζουν νέες σουίτες πρέπει να γνωρίζουν πώς συγκρίνεται με τα frameworks στα οποία μετεγκαθίστανται πλέον τα έργα Angular. Ο παρακάτω πίνακας συγκρίνει το Protracμε τις τρεις εναλλακτικές λύσεις που εμφανίζονται συχνότερα στις Συχνές Ερωτήσεις παρακάτω.

Ομάδες με έναν υπάρχοντα επαγγελματίαtracΗ σουίτα tor γενικά κινείται πιο γρήγορα προς WebdriverIO, δεδομένου του στυλ διοίκησης και Selenium-βασισμένη διαχείριση οδηγών, μείνετε κοντά σε αυτό που είναι ProtracΟι δοκιμαστές του tor ήδη γνωρίζουν. Οι ομάδες που ξεκινούν από την αρχή ή χρειάζονται τις πιο γρήγορες δοκιμαστικές εκτελέσεις, επιλέγουν συχνότερα Cypress ή Θεατρικός Συγγραφέας αντ' αυτού.

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