Οδηγός οδηγού Ιστού IO Χρήση ζωντανής ιστοσελίδας και παραδείγματα εργασίας: 8 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:37

Οδηγός οδηγού ιστού IO χρησιμοποιώντας ζωντανό ιστότοπο και παραδείγματα εργασίας

Τελευταία ενημέρωση: 2015-07-26

(Ελέγχετε συχνά καθώς ενημερώνω αυτό το εγχειρίδιο με περισσότερες λεπτομέρειες και παραδείγματα)

Ιστορικό

Πρόσφατα μου παρουσιάστηκε μια ενδιαφέρουσα πρόκληση. Χρειάστηκε να εισαγάγω αυτοματοποιημένους ελέγχους σε ένα τμήμα Q/A με πολύ μικρή τεχνική εμπειρία και χωρίς προγραμματισμό.

Αυτό ήταν πραγματικά δύο (2) ξεχωριστές προκλήσεις. Το πρώτο ήταν να εντοπιστούν οι τεχνολογίες για την εκτέλεση των αυτοματοποιημένων δοκιμών. Το δεύτερο ήταν να εκπαιδεύσει το τμήμα Q/A.

Το άρθρο θα αφορά μόνο τις τεχνολογίες που χρησιμοποιούνται και τι έμαθα στην πορεία.

Οι τεχνολογίες λειτούργησαν καλά, αλλά πραγματικά χρειάστηκε να αναζητήσω πληροφορίες και αφιέρωσα πολλές ώρες για να βρω ζητήματα.

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

Wantedθελα να μοιραστώ αυτές τις πληροφορίες, γι 'αυτό έγραψα αυτό το άρθρο μαζί με παραδείγματα δοκιμαστικών σεναρίων και μια δοκιμαστική ιστοσελίδα για να αντισταθμίσω τα σενάρια.

Όλα τα σενάρια δοκιμής μπορούν να βρεθούν στο github και ο ιστότοπος δοκιμής εργασίας βρίσκεται στο Web Driver IO Tutorial Test Site

Ελπίζω να το βρείτε χρήσιμο. Αν το κάνετε, ενημερώστε με.

ΣτόχοιΧρησιμοποιήστε τεχνολογίες για:

• Δοκιμάστε τη λειτουργικότητα του ιστότοπου
• Δοκιμάστε τη λειτουργικότητα JavaScript
• Μπορεί να τρέξει χειροκίνητα
• Μπορεί να εκτελεστεί αυτόματα

• Εύκολη εκμάθηση γλώσσας για μη προγραμματιστές

  Q/A προσωπικό με βασικές γνώσεις HTML και JavaScript

• Χρησιμοποιήστε μόνο λογισμικό ανοιχτού κώδικα

Τεχνολογίες

Λίστα τεχνολογιών που επιλέγω:

• mocha - test runner - εκτελεί τα σενάρια δοκιμής
• shouldjs - βιβλιοθήκη ισχυρισμών
• webdriverio - συνδέσεις ελέγχου προγράμματος περιήγησης (δεσμεύσεις γλώσσας)
• σελήνιο - εργοστάσιο αφαίρεσης και λειτουργίας προγράμματος περιήγησης

• Προγράμματα περιήγησης/προγράμματα οδήγησης για κινητά + προγράμματα περιήγησης

  • Firefox (μόνο πρόγραμμα περιήγησης)
  • Chrome (πρόγραμμα περιήγησης και πρόγραμμα οδήγησης)
  • IE (πρόγραμμα περιήγησης και πρόγραμμα οδήγησης)
  • Safari (Πρόσθετο προγράμματος περιήγησης και προγράμματος οδήγησης)

Βήμα 1: Εγκατάσταση λογισμικού

Για να ξεκινήσετε πρέπει να έχετε εγκαταστήσει τον αυτόνομο διακομιστή Node JS, Web Driver IO, Mocha, Should και Selenium.

Ακολουθούν οδηγίες εγκατάστασης για τα Windows 7.

(Είμαι χρήστης Mac/Linux αλλά έπρεπε να εγκαταστήσω τα πάντα σε μηχανήματα Windows 7, γι 'αυτό το έχω συμπεριλάβει για αναφορά σας. Η διαδικασία εγκατάστασης σε Mac/Linux είναι παρόμοια. Συμβουλευτείτε τις διαδικτυακές αναφορές για περισσότερα πληροφορίες.)

Από πρόγραμμα περιήγησης:

• Εγκατάσταση κόμβου που περιλαμβάνει NPM (Διαχείριση πακέτων κόμβων)

• μεταβείτε στη διεύθυνση

  • Κάντε κλικ στην εγκατάσταση
  • Αποθήκευση και εκτέλεση αρχείου
  • Ορίστε τη διαδρομή και τη μεταβλητή (NODE_PATH)

  • Μεταβείτε στον Πίνακα Ελέγχου-> Σύστημα και Ασφάλεια-> Σύστημα

    • Προηγμένες ρυθμίσεις συστήματος

    • Ρύθμιση περιβάλλοντος (μεταβλητές χρήστη)

      • Προσθήκη στο PATH

        C: / Users {USERNAME} AppData / Roaming / npm;

      • Προσθέστε το NODE_PATH (Μεταβλητές συστήματος)

        C: / Users {USERNAME} AppData / Roaming / npm / node_modules

Σημείωση: Εγκατέστησα όλο το λογισμικό παρακάτω χρησιμοποιώντας την καθολική επιλογή npm (-g). Αυτό συνήθως δεν συνιστάται, αλλά για αυτήν την εγκατάσταση χρειάστηκε να εγκατασταθεί παγκοσμίως, καθώς θα χρησιμοποιηθεί σε πολλά έργα.

Ανοίξτε τη γραμμή εντολών (cmd):

(τοπικός διαχειριστής χρήστη)

• Εγκατάσταση selenium "web driver IO"

  • npm εγκατάσταση webdriverio -g

    Αυτό θα εγκαταστήσει το πρόγραμμα οδήγησης ιστού σε παγκόσμιο επίπεδο στο μηχάνημά σας

• Εγκαταστήστε το λογισμικό δοκιμής "mocha"

  • npm εγκατάσταση mocha -g

    Αυτό θα εγκαταστήσει mocha παγκοσμίως στο μηχάνημά σας

• Εγκαταστήστε τη βιβλιοθήκη ισχυρισμών "θα πρέπει"

  • npm εγκατάσταση πρέπει -g

    Αυτό θα εγκαταστήσει το "πρέπει" σε παγκόσμιο επίπεδο στο μηχάνημά σας

• Εγκαταστήστε το Selenium Stand Alone Server

  • Μεταβείτε στη διεύθυνση
  • Κατεβάστε το αρχείο jar και μεταβείτε στον κατάλογο "σελήνιο".

• Εγκαταστήστε προγράμματα περιήγησης και προγράμματα οδήγησης προγράμματος περιήγησης για δοκιμή

  • Από την προτροπή cmd:

    • Δημιουργήστε τον κατάλογο "σελήνιο"
    • C: / Users {USERNAME} selenium

    • Εντολές:

      • cd C: / Users {USERNAME}
      • mkdir σελήνιο

    • Firefox

      • Εγκαταστήστε το πρόγραμμα περιήγησης firefox, εάν δεν είναι ήδη εγκατεστημένο.
      • Η διαδρομή πρέπει να ρυθμιστεί για να ξεκινήσει ο Firefox από τη γραμμή εντολών (cmd).

      • Πίνακας Ελέγχου-> Σύστημα και Ασφάλεια-> Σύστημα

        • Προηγμένες ρυθμίσεις συστήματος
        • Ρυθμίσεις περιβάλλοντος
        • Προσθέστε (προσαρτήστε τη χρήση ημι-παχέος εντέρου) στη μεταβλητή διαδρομής
        • C: / Αρχεία προγράμματος (x86) Mozilla Firefox
      • Δεν απαιτείται ειδικό πρόγραμμα οδήγησης ιστού για τον Firefox.

    • Χρώμιο

      • Εγκαταστήστε το πρόγραμμα περιήγησης chrome, εάν δεν είναι ήδη εγκατεστημένο.
      • Η διαδρομή ΜΠΟΡΕΙ να ρυθμιστεί ώστε να ξεκινά το Chrome από τη γραμμή εντολών (cmd).
      • Δοκιμή πρώτα: chrome.exe από τη γραμμή εντολών (cmd)
      • Εάν το chrome δεν ξεκινά τότε:

      • Πίνακας Ελέγχου-> Σύστημα και Ασφάλεια-> Σύστημα

        • Προηγμένες ρυθμίσεις συστήματος
        • Ρυθμίσεις περιβάλλοντος
        • Προσθέστε (προσαρτήστε τη χρήση ημι-παχέος εντέρου) στη μεταβλητή διαδρομής
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Απαιτείται ειδικό πρόγραμμα οδήγησης ιστού για το Chrome.

        Μεταβείτε στο chromium.org και αποσυμπιέστε το πρόγραμμα οδήγησης 32 bit στον κατάλογο "selenium"

    • Internet Explorer (μόνο για Windows - δεν θα λειτουργήσει σε άλλες πλατφόρμες)

      • Απαιτείται ειδικό πρόγραμμα οδήγησης ιστού για IE.

        • Μεταβείτε στη διεύθυνση
        • Κατεβάστε και αποσυμπιέστε το πρόγραμμα οδήγησης 64 bit στον κατάλογο "selenium".

Βήμα 2: Βασικό σενάριο δοκιμής

Ας ξεκινήσουμε με κάποια βασικά.

Εδώ είναι ένα απλό σενάριο mocha που θα ανοίξει μια ιστοσελίδα και θα επαληθεύσει τον τίτλο.

// tutorial1.js

// // Αυτό είναι ένα απλό σενάριο δοκιμής για να ανοίξετε έναν ιστότοπο και // επικυρώσετε τον τίτλο. // απαιτούμενες βιβλιοθήκες var webdriverio = απαιτούν («webdriverio»), πρέπει = απαιτούν («πρέπει») · // ένα μπλοκ δοκιμαστικών σεναρίων ή μια σουίτα περιγράφουν ('Title Test for Web Driver IO - Tutorial Test Page Website', λειτουργία () {// ορίστε το χρονικό όριο σε 10 δευτερόλεπτα this.timeout (10000); var πρόγραμμα οδήγησης = {}; // άγκιστρο για εκτέλεση πριν από τις δοκιμές πριν (λειτουργία (ολοκληρώθηκε) {// φόρτωση του προγράμματος οδήγησης για πρόγραμμα οδήγησης προγράμματος περιήγησης = webdriverio.remote ({επιθυμητές δυνατότητες: {browserName: 'firefox'}}); driver.init (ολοκληρωμένο)}}) // μια δοκιμαστική προδιαγραφή - "προδιαγραφή" αυτό ("θα πρέπει να φορτώσει σωστή σελίδα και τίτλο", λειτουργία () {// φόρτωση σελίδας, κατόπιν κλήση λειτουργίας () επιστροφή προγράμματος οδήγησης.url ("https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // λάβετε τίτλο, μετά περάστε τον τίτλο στη λειτουργία ().getTitle (). στη συνέχεια (λειτουργία (τίτλος) {// επαληθεύστε τον τίτλο (τίτλος).should.be.equal ("Web Driver IO - Tutorial Test Page "); // αποσύνδεση για εντοπισμό σφαλμάτων κονσόλας // console.log (" Τίτλος τρέχουσας σελίδας: " + τίτλος);});}); // ένα" άγκιστρο "για εκτέλεση μετά από όλες τις δοκιμές σε αυτό το μπλοκ μετά (λειτουργία (ολοκληρωθεί) {driver.end (done);});});

Παρατηρήσεις:

• Θα πρέπει πρώτα να παρατηρήσετε ότι το σενάριο δοκιμής είναι γραμμένο σε JAVASCRIPT (τελειώνει σε επέκταση.js).

• Η βασική δομή είναι σχεδόν πανομοιότυπη για όλα τα σενάρια δοκιμής.

  • Σχόλια κεφαλίδας (//)
  • Απαιτούμενες Βιβλιοθήκες
  • Ορισμός επιλογών (προαιρετικά)
  • Γάντζος: Φόρτωση προγράμματος οδήγησης προγράμματος περιήγησης
  • Test Suite (περιγράψτε)
  • Τεχνικές προδιαγραφές (μπορεί να είναι πολλές προδιαγραφές σε μια σουίτα)
  • Γάντζος: Καθαρίστε

• Η δοκιμαστική σουίτα ξεκινά με μια συνάρτηση περιγραφής που λαμβάνει δύο παραμέτρους:

  • String - Περιγραφή της δοκιμαστικής σουίτας

    • «Ελέγξτε τη σελίδα για σωστή φράση»
    • "Επαληθεύστε τις λειτουργίες του κουμπιού επιλογής"

  • λειτουργία - μπλοκ κώδικα για εκτέλεση

    περιγράψτε («Περιγραφή δοκιμαστικής σουίτας», λειτουργία () {})

• Η δοκιμαστική σουίτα θα περιέχει 1 ή περισσότερες προδιαγραφές δοκιμής (προδιαγραφή)

• Οι προδιαγραφές ξεκινούν με τη λειτουργία που λαμβάνει δύο παραμέτρους:

  • String - Περιγραφή των προδιαγραφών δοκιμής

    • "Πρέπει να είναι σωστό κείμενο συνδέσμου και διεύθυνση URL συνδέσμου"
    • "Πρέπει να περιέχει σωστή φράση (αντίγραφο καταστρώματος)
  • λειτουργία - μπλοκ κώδικα για εκτέλεση
  • it («Περιγραφή προδιαγραφών δοκιμής», συνάρτηση () {}) ·
• Μια προδιαγραφή περιέχει μία ή περισσότερες προσδοκίες που ελέγχουν την κατάσταση του κώδικα

• Αυτά ονομάζονται ισχυρισμοί

  Η βιβλιοθήκη «πρέπει» παρέχει τους ισχυρισμούς

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

  • Παραδείγματα:

    • Βρείτε κείμενο σε μια σελίδα και επαληθεύστε το κείμενο
    • Συμπληρώστε μια φόρμα και υποβάλετε
    • Επαλήθευση CSS ενός στοιχείου

Ας ρίξουμε μια πιο προσεκτική ματιά στο παράδειγμα με σχόλια

Φορτώστε τις απαιτούμενες βιβλιοθήκες: ΙΟ προγράμματος οδήγησης ιστού και πρέπει.

// απαιτούμενες βιβλιοθήκες

var webdriverio = απαιτώ («webdriverio»), πρέπει = απαιτεί («πρέπει») ·

Ορίστε τη σουίτα δοκιμής. Αυτή η σουίτα ονομάζεται: "Title Test for Web Driver IO - Tutorial Test Page Website"

// δοκιμαστικό μπλοκ ή σουίτα

περιγράψτε ('Test Title for Web Driver IO - Tutorial Test Page Website', λειτουργία () {…});

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

// ρυθμίστε το χρονικό όριο στα 10 δευτερόλεπτα

this.timeout (10000);

Γάντζο για να φορτώσετε το πρόγραμμα οδήγησης του προγράμματος περιήγησης πριν εκτελέσετε τις προδιαγραφές "specs". Το πρόγραμμα οδήγησης Firefox φορτώνεται σε αυτό το παράδειγμα.

// γάντζο για εκτέλεση πριν από τις δοκιμές

πριν (λειτουργία (ολοκληρώθηκε) {// φορτώστε το πρόγραμμα οδήγησης για πρόγραμμα περιήγησης προγράμματος περιήγησης = webdriverio.remote ({επιθυμητές δυνατότητες: {browserName: 'firefox'}}); driver.init (ολοκληρωμένο);});

Ορίστε τις προδιαγραφές της δοκιμής.

// δοκιμαστική προδιαγραφή - "προδιαγραφή"

it ('θα πρέπει να φορτώσει σωστή σελίδα και τίτλο', συνάρτηση () {…});

Φόρτωση της ιστοσελίδας

.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html')

Λάβετε τίτλο και μετά περάστε τον τίτλο στη λειτουργία ()

.getTitle (). στη συνέχεια (συνάρτηση (τίτλος) {

… });

Επαληθεύστε τον τίτλο χρησιμοποιώντας τη βιβλιοθήκη επιβεβαίωσης θα πρέπει.

(τίτλος).should.be.equal ("Web Driver IO - Tutorial Test Page");

Γάντζος για να τερματίσετε και να καθαρίσετε το πρόγραμμα οδήγησης όταν τελειώσετε.

// ένα "άγκιστρο" για εκτέλεση μετά από όλες τις δοκιμές σε αυτό το μπλοκ

μετά (λειτουργία (ολοκληρώθηκε) {driver.end (done);});

Βήμα 3: Εκτελέστε το Test Script

Τώρα ας δούμε τι κάνει το δοκιμαστικό σενάριο όταν εκτελείται.

Ξεκινήστε πρώτα τον διακομιστή Selenium Stand Alone:

• Για Windows χρησιμοποιήστε τη γραμμή εντολών (cmd):

  • java -jar
  • # java -jar σελήνιο-διακομιστής-αυτόνομος-2.46.0.jar

• Για Mac ή Linux, ανοίξτε τερματικό:

  • java -jar
  • $ java -jar σελήνιο-διακομιστής-αυτόνομος-2.46.0.jar
• Δείτε το στιγμιότυπο οθόνης παραπάνω

Στη συνέχεια εκτελέστε το δοκιμαστικό σενάριο:

• Για Windows χρησιμοποιήστε τη γραμμή εντολών (cmd):

  • μόκα
  • # mocha tutorial1.js

• Για Mac ή Linux, ανοίξτε τερματικό:

  • μόκα
  • $ mocha tutorial.js
• Δείτε το στιγμιότυπο οθόνης παραπάνω

Λοιπόν τι έγινε?

Ο Μόκα επικαλείται το σενάριο "tutorial1.js". Το πρόγραμμα οδήγησης ξεκίνησε το πρόγραμμα περιήγησης (Firefox), φόρτωσε τη σελίδα και επαλήθευσε τον τίτλο.

Βήμα 4: Παράδειγμα ιστοσελίδας

Όλα τα παραδείγματα αντιτίθενται σε αυτόν τον ιστότοπο.

Το παράδειγμα της ιστοσελίδας βρίσκεται στη διεύθυνση: Web Driver IO Tutorial Test Page

Μπορείτε να κατεβάσετε όλα τα σενάρια δοκιμής από το github.

Βήμα 5: Συγκεκριμένα παραδείγματα

Όλος ο κώδικας είναι διαθέσιμος στο github: Web Driver IO Tutorial στο github

• Επαλήθευση συνδέσμου και κειμένου συνδέσμου σε μια λίστα χωρίς ταξινόμηση - "linkTextURL1.js"

  • Η μη ταξινομημένη λίστα έχει ένα και ο σύνδεσμος είναι το 4ο στοιχείο λίστας.
  • Η διεύθυνση URL πρέπει να είναι "https://tlkeith.com/contact.html"

// Επαλήθευση Επικοινωνήστε μαζί μας κείμενο συνδέσμου

it («θα πρέπει να περιέχει κείμενο συνδέσμου Επικοινωνήστε μαζί μας», λειτουργία () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). στη συνέχεια (λειτουργία (σύνδεσμος) {κονσόλα.log ('Ο σύνδεσμος βρέθηκε:' + σύνδεσμος); (σύνδεσμος).should.equal ("Επικοινωνήστε μαζί μας");});}); // Επαλήθευση Επικοινωνήστε μαζί μας URL it ('should include Contact Us URL', function () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").then (λειτουργία (σύνδεσμος) {(σύνδεσμος).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL βρέθηκε:' + link);});});

• Επαλήθευση κειμένου πνευματικής ιδιοκτησίας - "Copyright1.js"

  • Τα πνευματικά δικαιώματα βρίσκονται στο υποσέλιδο Αυτό το παράδειγμα δείχνει 2 διαφορετικούς τρόπους εντοπισμού του κειμένου πνευματικών δικαιωμάτων:

    • από τον ως επιλογέα στοιχείων
    • χρησιμοποιώντας το xpath ως επιλογέα στοιχείων

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

it ("θα πρέπει να περιέχει κείμενο πνευματικών δικαιωμάτων", λειτουργία () {return driver.getText ("#copyright"). έπειτα (λειτουργία (σύνδεσμος) {console.log ("Copyright found:" + link); (link).should. ίσο ("Tony Keith - tlkeith.com @ 2015 - Με επιφύλαξη παντός δικαιώματος.");});}); // Επαλήθευση κειμένου πνευματικών δικαιωμάτων χρησιμοποιώντας το xpath ως επιλογέα στοιχείων («θα πρέπει να περιέχει κείμενο πνευματικών δικαιωμάτων», λειτουργία () {return driver.getText ("// footer/center/p"). Στη συνέχεια (λειτουργία (σύνδεσμος) {console.log ('Πνευματικά δικαιώματα βρέθηκαν:' + σύνδεσμος); (σύνδεσμος).should.equal ("Tony Keith - tlkeith.com @ 2015 - Με επιφύλαξη παντός δικαιώματος.");});});

• Συμπλήρωση πεδίων φόρμας και υποβολή - "formFillSubmit1.js"

  • Συμπληρώστε το όνομα, το επώνυμο και υποβάλετε και περιμένετε για αποτελέσματα.

  • Αυτό το παράδειγμα δείχνει 3 μεθόδους συμπλήρωσης του πεδίου εισαγωγής ονόματος:

    • με αναγνωριστικό
    • με xpath από την είσοδο
    • με xpath από φόρμα-> είσοδο
  • Δείχνει επίσης τον τρόπο εκκαθάρισης ενός πεδίου εισαγωγής

// Ορίστε το πρώτο όνομα χρησιμοποιώντας το id σε: Tony

it ('should set first name to Tony', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Όνομα:" + e);});}); // Διαγράψτε το πρώτο όνομα χρησιμοποιώντας το id it («θα πρέπει να διαγράψετε το πρώτο όνομα», λειτουργία () {return driver.clearElement ("#fname").getValue ("#fname"). Στη συνέχεια (συνάρτηση (ε) {(ε).should.be.equal (""); console.log ("Όνομα:" + e);});}); // Ορίστε το πρώτο όνομα χρησιμοποιώντας το xpath από την είσοδο σε: Tony it ('should set first name to Tony', function () {return driver.setValue ("// input [@name = 'fname']", "Tony").getValue ("// εισαγωγή [@name = 'fname']"). στη συνέχεια (συνάρτηση (ε) {(ε).should.be.equal ("Tony"); console.log ("Όνομα:" + ε);});}); // Διαγράψτε το πρώτο όνομα χρησιμοποιώντας το xpath από την εισαγωγή του ('θα πρέπει να διαγραφεί το όνομα', λειτουργία () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] "). στη συνέχεια (συνάρτηση (e) {(e).should.be.equal (" "); console.log (" Όνομα: " + e);});}); // Ορίστε το πρώτο όνομα χρησιμοποιώντας το xpath από τη φόρμα σε: Tony it ('should set first name to Tony', function () {return driver.setValue ("// form [@id = 'search-form']/input [1] "," Tony ").getValue (" // form [@id = 'search-form']/input [1] "). Then (function (e) {(e).should.be.equal ("Tony"); console.log ("Όνομα:" + e);});}); // Ορίστε το επώνυμο χρησιμοποιώντας το id σε: Keith it («πρέπει να ορίσετε το επώνυμο σε Keith», λειτουργία () {return driver.setValue ("#lname", "Keith").getValue ("#lname") και στη συνέχεια (συνάρτηση (ε) {(ε).should.be.equal ("Keith"); console.log ("Επώνυμο:" + e);});}); // Υποβάλετε φόρμα και περιμένετε για αποτελέσματα αναζήτησης («θα πρέπει να υποβάλετε φόρμα και περιμένετε αποτελέσματα», λειτουργία () {return driver.submitForm ("#search-form"). Στη συνέχεια (λειτουργία (ε) {console.log (' Υποβολή φόρμας αναζήτησης ');}).waitForVisible ("#search-results", 10000).then (function (e) {console.log (' Search Results found ');});});

• Κάντε κλικ στο κουμπί Εμφάνιση/Απόκρυψη και Επαλήθευση κειμένου - "showHideVerify1.js"

  • Το κείμενο βρίσκεται σε στοιχείο εμφάνισης/απόκρυψης. Το κουμπί ελέγχει την κατάσταση.

  • Αυτό το παράδειγμα δείχνει:

    • Κάντε κλικ στο κουμπί για επέκταση
    • Περιμένετε να είναι ορατό το στοιχείο (διευρυμένο)
    • Επαλήθευση κειμένου (αντίγραφο καταστρώματος)

// κάντε κλικ στο κουμπί "Περισσότερες πληροφορίες" και επαληθεύστε το κείμενο σε διευρυμένο στοιχείο

it ("θα πρέπει να κάνετε κλικ στο κουμπί περισσότερων πληροφοριών και να επαληθεύσετε το κείμενο", λειτουργία () {return driver.click ("#moreinfo"). then (function () {console.log ("Clicked More Info button");}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'CollaExample']/div"). στη συνέχεια (λειτουργία (ε) {console.log ('Κείμενο:' + e); (ε).should.be.equal ("Όλα τα καλά πηγαίνουν εδώ!");});});

• Επικύρωση σφαλμάτων πεδίου φόρμας - "formFieldValidation.js"

  • Χρησιμοποιήστε δοκιμαστικά σενάρια για να επαληθεύσετε ότι παράγονται σωστά μηνύματα σφάλματος.

  • Αυτό το παράδειγμα δείχνει:

    Επαληθεύστε τα μηνύματα κειμένου σφάλματος και επαληθεύστε την τοποθεσία (μη ταξινομημένη θέση λίστας)

it ('θα πρέπει να περιέχει 5 σφάλματα: πρώτη/τελευταία/διεύθυνση/πόλη/πολιτεία', συνάρτηση () {

επιστροφή οδηγού.getText ("// ul [@class = 'alert alert-risk']/li [1]"). στη συνέχεια (λειτουργία (ε) {console.log ('Βρέθηκε σφάλμα:' + e); (e).should.be.equal ("Παρακαλώ εισάγετε το πρώτο όνομα");}).getText ("// ul [@class = 'alert alert-risk']/li [2]"). στη συνέχεια (λειτουργία (ε) {console.log ('Σφάλμα βρέθηκε:' + e); (ε).should.be.equal ('Εισαγάγετε το επώνυμο');}).getText ("// ul [@class = 'alert alert-risk ']/li [3] "). στη συνέχεια (συνάρτηση (ε) {console.log (' Βρέθηκε σφάλμα: ' + e); (ε).should.be.equal (' Εισαγάγετε διεύθυνση ');}). getText ("// ul [@class = 'alert alert-risk']/li [4]"). στη συνέχεια (λειτουργία (ε) {console.log ('Βρέθηκε σφάλμα:' + e); (ε). θα πρέπει.be.equal ("Παρακαλώ εισάγετε την πόλη");}).getText ("// ul [@class = 'alert alert-risk']/li [5]"). στη συνέχεια (λειτουργία (ε) {console.log ('Βρέθηκε σφάλμα:' + e); (ε).should.be.equal ('Εισαγάγετε κατάσταση');}); });

• Looping Data to Validate URL Link/Text/Page - "LoopDataExample1.js"

  • Αυτό το παράδειγμα δείχνει: Χρησιμοποιήστε έναν πίνακα δεδομένων JSON για να αποθηκεύσετε τον σύνδεσμο και το όνομα και, στη συνέχεια, επαναλάβετε

    • Επαληθεύστε κάθε κείμενο και σύνδεσμο URL
    • Κάντε κλικ στο σύνδεσμο και φορτώστε τη σελίδα

// Δεδομένα σύνδεσης - σύνδεσμος και κείμενο

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js "," name ":" linkTextURL1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master/copyright1.js "," name ":" copyright1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js "," name ":" formFillSubmit1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js "," name ":" showHideVerify1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js "," name ":" dynamBrowser.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/ blob/master/callbackPromise.js "," name ":" callbackPromise.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js "," name ": "ντεμπού gExample1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "," name ":" formFieldValidation.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js "," name ":" commonLib.js "}, {" link ":" https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js "," name ":" dataLoopExample1.js "}]; … // βρόχος σε κάθε linkArray linkArray.forEach (συνάρτηση (d) {it ('θα πρέπει να περιέχει κείμενο/σύνδεσμο και μετά να πάω στη σελίδα -' + d.name, function () {return driver // βεβαιωθείτε ότι βρίσκεστε στην αρχική σελίδα.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). στη συνέχεια (συνάρτηση (τίτλος) {// επαλήθευση τίτλου (τίτλος).should.be.equal ("Πρόγραμμα οδήγησης Ιστού IO - Εκπαιδευτική δοκιμαστική σελίδα ");}) // βρείτε τη διεύθυνση URL.getAttribute ('a =' + d.name," href "). Στη συνέχεια (συνάρτηση (σύνδεσμος) {(σύνδεσμος). Πρέπει. Equal (d.link); console.log ('URL βρέθηκε:' + d.link);}) // μεταβείτε στη σελίδα URL και επαληθεύστε ότι υπάρχει. κλικ ('a =' + d.name).waitForVisible ("#js-repo-pjax- container ", 10000).then (function () {console.log ('Github Page Found');});});});

• Αναδίπλωση στατικών δεδομένων για συμπλήρωση πεδίων φόρμας - "loopDataExample2.js"

  • Αυτό το παράδειγμα δείχνει: Χρησιμοποιήστε έναν πίνακα δεδομένων JSON για να αποθηκεύσετε το όνομα/επώνυμο

    • Ανακοινώστε τα δεδομένα για να συμπληρώσετε πεδία φόρμας και, στη συνέχεια, υποβάλετε τη φόρμα
    • Περιμένετε για τη σελίδα αποτελεσμάτων
    • Επαληθεύστε το όνομα / επώνυμο στη σελίδα αποτελεσμάτων

// data array - firstName and lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // βρόχος σε κάθε dataArray dataArray.forEach (συνάρτηση (δ) {it ('θα πρέπει να συμπληρώσουν πεδία, σελίδα sumbit', λειτουργία () {πρόγραμμα οδήγησης επιστροφής // βεβαιωθείτε ότι βρίσκεστε στην αρχική σελίδα.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). στη συνέχεια (συνάρτηση (τίτλος) {// επαλήθευση τίτλου (τίτλος).should.be.equal ("Web Driver IO - Tutorial Test Page");}).setValue ("#fname", d.firstName).getValue ("#fname"). στη συνέχεια (συνάρτηση (ε) {(ε). πρέπει. να είναι ισοδύναμη (d.firstName); console.log ("Πρώτη Όνομα: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Στη συνέχεια (συνάρτηση (e) {(e).should.be.equal (d.lastName); console.log ("Επώνυμο:" + e);}).submitForm ("#search-form"). then (function () {console.log ('Submit Search Form');}).waitForVisible ("#search-results", 10000).then (function () {console.log ('Found Result Page');}).getText ("// h1"). then (function (link) {console.log ('Βρέθηκε κείμενο:' + σύνδεσμος); (σύνδεσμος).should.equal ("Welcome" + d.firstName + "" + d.lastName + ".");});});});

• Επικύρωση ιδιοτήτων CSS - "cssValidation1.js"

  • Αυτό το παράδειγμα δείχνει πώς:

    • Επικυρώστε τις ακόλουθες ιδιότητες CSS:

      • χρώμα
      • επένδυση (επάνω, κάτω, δεξιά, αριστερά)
      • χρώμα του φόντου

it ('θα πρέπει να περιέχει το σωστό χρώμα του κειμένου σφάλματος', λειτουργία () {return driver.getCssProperty ("// ul [@class = 'alert alert-risk']/li [1]", "color"). στη συνέχεια (συνάρτηση (αποτέλεσμα) {console.log ("Βρέθηκε χρώμα: ' + result.parsed.hex +" ή " + result.value); (result.parsed.hex).should.be.equal ('#a94442 '); });});

it ('θα πρέπει να περιέχει σωστή τοποθέτηση στο κελί πίνακα', συνάρτηση () {

επιστροφή οδηγού // padding: επάνω δεξιά κάτω αριστερά.getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top"). στη συνέχεια (λειτουργία (αποτέλεσμα) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "). στη συνέχεια (λειτουργία (αποτέλεσμα) {console.log ('padding-bottom found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding- δεξιά "). τότε (συνάρτηση (αποτέλεσμα) {console.log ('padding-right found:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-left"). στη συνέχεια (λειτουργία (αποτέλεσμα) {console.log ('padding-left found: ' + result.value]; (result.value).should.be.equal (' 5px ');}); });

it ('θα πρέπει να περιέχει το σωστό χρώμα φόντου στην κεφαλίδα του πίνακα', λειτουργία () {

return driver.getCssProperty ("// table [@id = 'filelist']/thead", "background-color"). then (function (result) {console.log ('found background background:' + result.parsed hex); (result.parsed.hex).should.be.equal ('#eeeeee');}); });

Βήμα 6: Συμβουλές και κόλπα

• Αποσφαλμάτωση:

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

    • Ορίστε το logLevel στο "verbose"
    • Ορισμός logOutput σε όνομα καταλόγου ('logs')

πρόγραμμα οδήγησης = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {სასურველიCapability: {browserName: 'firefox'}});

• Χρησιμοποιήστε console.log (), εντοπισμός σφαλμάτων (), getText () για εντοπισμό σφαλμάτων.

  • console.log () - Χρησιμοποιήστε την για να εμφανίσετε πληροφορίες για να καθορίσετε την κατάσταση.
  • εντοπισμός σφαλμάτων () - Χρησιμοποιήστε παύση προγράμματος περιήγησης/δέσμης ενεργειών έως ότου πατηθεί enter στη γραμμή εντολών.

  • getText () - Χρησιμοποιήστε το για να επαληθεύσετε ότι αλληλεπιδράτε με το σωστό στοιχείο.

    Ιδιαίτερα χρήσιμο με τις εκφράσεις xpath

// Κάντε κλικ στο στοιχείο Στοιχείο 3 από τη λίστα

it ("θα πρέπει να κάνετε κλικ στο στοιχείο 3 από τη λίστα", συνάρτηση () {// χρησιμοποιήστε το getText () για να επαληθεύσετε ότι το xpath είναι σωστό για το στοιχείο επιστροφής προγράμματος οδήγησης.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Στη συνέχεια (συνάρτηση (σύνδεσμος) {// χρησιμοποιήστε το console.log () για την έξοδο πληροφοριών console.log ('Link found:' + link); (link).should.equal ("Στοιχείο 3");}) // χρησιμοποιήστε τον εντοπισμό σφαλμάτων () για να σταματήσετε την ενέργεια για να δείτε τι συμβαίνει στο πρόγραμμα περιήγησης.debug (). Κλικ ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Linked clicked');}) // περιμένετε να εμφανιστεί η φόρμα αναζήτησης Google.waitForVisible ("#tsf", 20000).then (λειτουργία (ε) {console.log ('Βρέθηκαν αποτελέσματα αναζήτησης');});});

• Χρησιμοποιήστε μεταβλητή περιβάλλοντος για να αλλάξετε δυναμικά το πρόγραμμα περιήγησης:

  • Χρησιμοποιήστε μεταβλητή περιβάλλοντος SELENIUM_BROWSER για να καλέσετε ένα διαφορετικό πρόγραμμα περιήγησης χωρίς να τροποποιείτε το δοκιμαστικό σενάριο κάθε φορά.
  • Απαιτείται μια μικρή αλλαγή κωδικοποίησης για υποστήριξη.

Αλλαγές κώδικα:

// φορτώστε το πρόγραμμα οδήγησης για το πρόγραμμα περιήγησης

πρόγραμμα οδήγησης = webdriverio.remote ({επιθυμητές δυνατότητες: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Υποστηριζόμενα προγράμματα περιήγησης:

• Internet Explorer - IE 8+ (Μόνο για Windows)

  SELENIUM_BROWSER = δηλαδή μόκα

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = μόκα firefox

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = χρώμιο μόκα

• Όπερα 12+

  SELENIUM_BROWSER = Μόκα όπερας

• Σαφάρι

  SELENIUM_BROWSER = μόκα σαφάρι

Δοκιμή:

• Για Windows χρησιμοποιήστε το κέλυφος git bash:

  • SELENIUM_BROWSER = χρώμιο μόκα
  • $ SELENIUM_BROWSER = χρώμιο μόκα DynamicBrowser.js

• Για Mac ή Linux, ανοίξτε τερματικό:

  • SELENIUM_BROWSER = χρώμιο μόκα
  • $ SELENIUM_BROWSER = χρώμιο μόκα DynamicBrowser.js

• Αποκριτική δοκιμή:

  • Καθορίστε σημεία διακοπής βάσει έργου ή πλαισίου (δηλαδή bootstrap).

  • Καθορίστε μεταβλητές περιβάλλοντος για κάθε σημείο διακοπής:

    • DESKTOP - 1200 px
    • ΠΙΝΑΚΑΣ - 992 px
    • ΚΙΝΗΤΟ - 768 px

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

    Δείτε το παράδειγμα παρακάτω

  • Καλέστε την εντολή επαναχρησιμοποίησης στο σενάριο δοκιμής.

// επαναχρησιμοποιήσιμος κώδικας - βιβλιοθήκη // απόσπασμα κώδικα if (bp == "DESKTOP") {obj.width = 1200; obj.height = 600; obj.name = bp; } else if (bp == "ΠΙΝΑΚΑΣ") {obj.width = 992; obj.height = 600; obj.name = bp; } else if (bp == "ΚΙΝΗΤΟ") {obj.width = 768; obj. ύψος = 400; obj.name = bp; }

// Δοκιμαστικό σενάριο

πριν (λειτουργία (ολοκληρώθηκε) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (πρόγραμμα οδήγησης));} // ορίστε το μέγεθος του παραθύρου αυτό ('θα πρέπει να ορίσει το μέγεθος του παραθύρου', συνάρτηση (ολοκληρώθηκε) {// μόνο το πλάτος έχει σημασία driver.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• Επαναχρησιμοποιήσιμες εντολές (Προσαρμοσμένες εντολές):

  • Το Web Driver IO είναι εύκολα επεκτάσιμο.
  • Μου αρέσει να βάζω όλες τις επαναχρησιμοποιήσιμες εντολές σε μια βιβλιοθήκη. (ίσως αυτό είναι παλιό σχολείο αλλά λειτουργεί!)

common/commonLib.js

// verifyLastNameCheckError ()

// // Περιγραφή: // Επαληθεύει το μήνυμα επωνυμίας σφάλματος επικύρωσης // // Εισαγωγή: // αριθμός - δείκτης σφάλματος (1-5) // Έξοδος: // καμία // var verifyLastNameCheckError = λειτουργία () { var idx = επιχειρήματα [0], επανάκληση = επιχειρήματα [arguments.length - 1]; αυτό.getText ("// ul [@class = 'alert alert-risk']/li [" + idx + "]", λειτουργία (λάθος, ε) {console.log ('Βρέθηκε σφάλμα:' + e); (ε).should.be.equal ("Παρακαλώ εισάγετε επώνυμο");}). καλέστε (επανάκληση); }; // εξαγωγή της λειτουργίας module.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Ακολουθούν οι συγκεκριμένες αλλαγές που απαιτούνται για την κλήση μιας επαναχρησιμοποιήσιμης συνάρτησης

Δείτε το formFieldValidation.js για πλήρες παράδειγμα εργασίας

// απαιτούν την επαναχρησιμοποιήσιμη εντολή - CommonLib

common = απαιτούν ('./ Common/CommonLib'); … // δεσμεύει τις εντολές driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (πρόγραμμα οδήγησης)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (πρόγραμμα οδήγησης)); it ('θα πρέπει να περιέχει 2 σφάλματα: όνομα/επώνυμο', συνάρτηση () {// καλέστε το πρόγραμμα επαναχρησιμοποιήσιμης λειτουργίας.verifyFirstNameError (1);.verifyLastNameError (2);});

• Αρχείο έργου/Δομή καταλόγου:

  • Εδώ είναι η τυπική δομή του έργου:

    • "Project" - κύριος κατάλογος έργου

      • README.md - readme για παγκόσμιο έργο

      • "Common" - κατάλογος για καθολικές λειτουργίες κοινό για όλα τα έργα

        • common -lib.js - βιβλιοθήκη καθολικής λειτουργίας
        • README.md - readme για καθολικές λειτουργίες

      • "Product1" - κατάλογος για το προϊόν 1

        • test-script1.js
        • test-script2.js

        • "Κοινός" - κατάλογος για τοπικές λειτουργίες στο έργο 1

          • prod1 -lib.js - βιβλιοθήκη τοπικών λειτουργιών για το έργο 1
          • README.md - readme για τοπικές λειτουργίες στο έργο 1

      • "Product2"-κατάλογος για το προϊόν 2test-script1.jstest-script2.js

        • "Κοινός" - κατάλογος για τοπικές συναρτήσεις στο έργο 2

          • prod2 -lib.js - βιβλιοθήκη τοπικών λειτουργιών για το έργο 2
          • README.md - readme για τοπικές λειτουργίες στο έργο 2

• Διαχωρίστε τα σενάρια δοκιμής σε πολλά αρχεία:

  • Ακολουθεί ένα δείγμα χρήσης πολλαπλών αρχείων:

    • Sanity Check - βασικό σενάριο δοκιμής για να επαληθεύσετε ότι όλα λειτουργούν
    • Επικύρωση στατικού στοιχείου και κειμένου - επαληθεύστε όλα τα στοιχεία και το κείμενο
    • Επικύρωση σφάλματος φόρμας/σελίδας - επικύρωση σφάλματος
    • Αποτελέσματα αναζήτησης - δοκιμάστε δυναμικό περιεχόμενο

• Callbacks VS. Υποσχέσεις:

  • Η έκδοση 3 του Web Driver IO υποστηρίζει τόσο κλήσεις όσο και υποσχέσεις.

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

Ανακλήσεις

// Ορίστε/επαληθεύστε το όνομα/το επώνυμο χρησιμοποιώντας την Επανάκληση

it ('θα πρέπει να ορίσετε/επαληθεύσετε το όνομα/το επώνυμο χρησιμοποιώντας Callbacks', λειτουργία (ολοκληρώθηκε) {driver.setValue ("#fname", "Tony", function (e) {driver.getValue ("#fname", function (err, ε) {(ε).should.be.equal ("Tony"); console.log ("Όνομα:" + e); driver.setValue ("#lname", "Keith", function (e) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Επώνυμο:" + e); done ();});});});})}});

Υποσχέσεις

// Ορίστε/επαληθεύστε το όνομα/το επώνυμο χρησιμοποιώντας τις Υποσχέσεις

it ("θα πρέπει να ορίσετε/επαληθεύσετε το όνομα/το επώνυμο χρησιμοποιώντας τις υποσχέσεις", λειτουργία () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). στη συνέχεια (λειτουργία (ε) {(ε).should.be.equal ("Tony"); console.log ("Όνομα:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). στη συνέχεια (συνάρτηση (ε) {(ε).should.be.equal ("Keith"); console.log ("Επώνυμο:" + e);});});

Βήμα 7: Περισσότεροι πόροι

Ακολουθούν ορισμένοι πρόσθετοι πόροι για την αναφορά σας:

• Ομάδες συζήτησης (Gitter)

  • Ομάδα συζήτησης IO Web Driver IO
  • Ομάδα Συζήτησης Μόκα

• Άλλα ενδιαφέροντα έργα

  • Supertest - Ισχυρισμοί
  • Chai - ισχυρισμοί

Βήμα 8: Συμπέρασμα

Αφιέρωσα λίγο χρόνο στην έρευνα των τεχνολογιών που θα χρησιμοποιούσα για το έργο μου. Αρχικά ξεκίνησα με το Selenium Web Driver αλλά άλλαξα στη χρήση του Web Driver IO. Το Web Driver IO φαινόταν να είναι ευκολότερο στη χρήση και πολύ ευκολότερο να επεκταθεί (τουλάχιστον η τεκμηρίωση για επέκταση - οι επαναχρησιμοποιήσιμες εντολές ήταν καλύτερες).

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

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

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

Ελπίζω ότι αυτό το άρθρο είναι χρήσιμο και τα παραδείγματα είναι σαφή και κατατοπιστικά.

Παρακαλώ ενημερώστε με εάν έχετε οποιεσδήποτε ερωτήσεις ή σχόλια.

Σας ευχαριστώ, Τόνι Κέιθ