Εισαγωγή στη δοκιμή του εμπρόςξεως

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

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

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

• Καλύτερα κομμάτια λογισμικού ελέγχου χρήστη

01. Δοκιμή μονάδας

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

Φανταστείτε ότι έχετε ένα lego που σε ένα σπίτι. Πριν ξεκινήσετε την κατασκευή, θέλετε να βεβαιωθείτε ότι κάθε μεμονωμένο κομμάτι λογιστικοποιείται (πέντε κόκκινα τετράγωνα, τρία κίτρινα ορθογώνια). Η δοκιμή μονάδας διασφαλίζει ότι τα μεμονωμένα σύνολα κώδικα - πράγματα όπως οι επικυρώσεις και οι υπολογισμοί εισόδου - λειτουργούν όπως προβλέπεται πριν από την οικοδόμηση του μεγαλύτερου χαρακτηριστικού.

Βοηθά να σκεφτείτε τις δοκιμές μονάδων σε συνδυασμό με το «ένα πράγμα καλά» mantra. Εάν έχετε ένα κομμάτι κώδικα με μια ενιαία ευθύνη, πιθανότατα θέλετε να γράψετε μια δοκιμή μονάδας για αυτό.

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

 Περιγράψτε ("Λειτουργίες αριθμομηχανών", λειτουργία () {
  ("πρέπει να προσθέσει δύο αριθμούς", λειτουργία () {
    Υπολογιστής.init ();
    RAF REFORS = Calculator.addnumbers (7,3);
    περιμένετε (αποτέλεσμα) .tobe (10);
  });
}) · 

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

Το πρώτο πράγμα που κάνουμε είναι να περιγράψουμε τη σειρά των δοκιμών που πρόκειται να τρέξουμε χρησιμοποιώντας τη Jasmine's περιγράφω . Αυτό δημιουργεί μια δοκιμαστική σουίτα - μια ομαδοποίηση δοκιμών που σχετίζονται με μια συγκεκριμένη περιοχή της εφαρμογής. Για την αριθμομηχανή μας, θα ομαδοποιήσουμε κάθε δοκιμασία υπολογισμού στη δική του σουίτα.

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

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

Στη συνέχεια γράφουμε ο ισχυρισμός δοκιμής μας, η οποία είναι όπου δοκιμάζουμε αν ο κώδικας μας λειτουργεί όπως περιμένουμε. Αρχίζουμε την αριθμομηχανή μας και τρέχουμε μας addnumbers Λειτουργία με τους δύο αριθμούς που θέλουμε να προσθέσουμε. Αποθηκεύουμε τον αριθμό ως αποτέλεσμα και στη συνέχεια να ισχυριστεί ότι αυτό είναι ίσο με τον αριθμό που περιμένουμε (στην περίπτωσή μας, 10).

Αν addnumbers Αποτυγχάνει να επιστρέψει τα σωστά στοιχεία, η δοκιμή μας θα αποτύχει. Θα γράψαμε παρόμοιες δοκιμές για τους άλλους υπολογισμούς μας - αφαίρεση, πολλαπλασιασμό και ούτω καθεξής.

02. Δοκιμές αποδοχής

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

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

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

 Περιγράψτε ("Υπογραφή κράτους αποτυχίας", λειτουργία () {
  ("δεν πρέπει να επιτρέπεται η εγγραφή με μη έγκυρες πληροφορίες", λειτουργία () {
    var σελίδα = επίσκεψη ("/ σπίτι");
    Page.Fill_IN ("Εισαγωγή [όνομα = 'email']", "όχι ένα μήνυμα ηλεκτρονικού ταχυδρομείου");
    Σελίδα.Click (κουμπί [Τύπος = υποβολή] ");
    Σελίδα.Click (κουμπί [Τύπος = υποβολή] ");
    περιμένετε (σελίδα.Find ("# signuperrorror"). Hasclass ("κρυμμένο")). Tobefalsy ();
  });
}) · 

Η δομή μοιάζει πολύ με τη δοκιμή μονάδας μας: Ορίζουμε μια σουίτα με περιγράφω , στη συνέχεια, γράψτε τη δοκιμή μας μέσα στο το Στη συνέχεια, εκτελέστε κάποιο κώδικα και ελέγξτε το αποτέλεσμα.

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

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

Όταν εξετάζετε τι να γράψετε δοκιμές αποδοχής, οι ιστορίες των χρηστών σας είναι ένα εξαιρετικό μέρος για να ξεκινήσετε. Πώς αλληλεπιδρά ο χρήστης σας με τον ιστότοπό σας και ποιο είναι το αναμενόμενο αποτέλεσμα αυτής της αλληλεπίδρασης; Είναι διαφορετικό από τη δοκιμή μονάδων, η οποία αντιστοιχεί καλύτερα σε κάτι όπως οι απαιτήσεις λειτουργίας, όπως οι απαιτήσεις γύρω από ένα επικυρωμένο πεδίο.

03. Δοκιμές οπτικής παλινδρόμησης

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

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

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

 casper.start ("/ σπίτι"). Στη συνέχεια (λειτουργία () {

  // αρχική κατάσταση της μορφής
  phantomcss.screenshot ("# signupform", "Εγγραφή φόρμας").

  // Χτυπήστε το κουμπί εγγραφής (θα πρέπει να ενεργοποιήσετε το σφάλμα)
  casper.Click ("Κουμπί # εγγραφή");

  // πάρτε ένα στιγμιότυπο οθόνης του συστατικού UI
  phantomcss.screenshot ("# signupform", "Εγγραφή σφάλματος φόρμας");

  // Συμπληρώστε τη φόρμα από τα χαρακτηριστικά ονόματος & AMP; υποβάλλουν
  casper.fill ("# signupform", {
    Όνομα: "Alicia sedlock",
    Email: "[email protected]"
  }, αλήθεια).

  // Πάρτε ένα δεύτερο screenshot της πολιτείας επιτυχίας
 phantomcss.screenshot ("# signupform", "Εγγραφείτε στην επιτυχία της φόρμας");
}) · 

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

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

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

04. Προσβασιμότητα και δοκιμές απόδοσης

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

Εάν αντιμετωπίζετε προβλήματα που επιβάλλουν προϋπολογισμούς απόδοσης ή πρότυπα προσβασιμότητας, αυτός είναι ένας τρόπος για να διατηρήσετε αυτές τις απαιτήσεις στην πρώτη γραμμή των μυαλών των ανθρώπων.

Και οι δύο αυτοί έλεγχοι μπορούν είτε να ενσωματωθούν στη ροή εργασίας σας με εργαλεία κατασκευής όπως Grunt και Gulp ή ημι-μηχανώντας στο τερματικό σας. Για τους προϋπολογισμούς απόδοσης, ένα εργαλείο όπως το grunt-perfbudget σας δίνει τη δυνατότητα να εκτελέσετε αυτόματα τον ιστότοπό σας μέσω του ιστότοπου αυτόματα μέσα σε μια συγκεκριμένη εργασία.

Ωστόσο, εάν δεν χρησιμοποιείτε δρομέα εργασιών, μπορείτε επίσης να πιάσετε το perfbudget ως μια αυτόνομη μονάδα NPM και να εκτελέσετε τις δοκιμές χειροκίνητα.

Εδώ είναι αυτό που μοιάζει να το εκτελέσει μέσω του τερματικού σταθμού:

 perfbudget --url http://www.alicoility.com - Key [webpagetest api key] --speedindex 2000 --Render 400

Και ομοίως, τη ρύθμιση του grunt:

perfbudget: {
  Προκαθορισμένο: {
    Επιλογές: {
      URL: 'http://alicoility.com,
      Κλειδί: «Κλειδί API WebpageETEST,
      Προϋπολογισμός: {
        SpeedIndEx: '2000',
        Render: '400'
      }
    }
  }
}

[...]

grunt.registertask ('προεπιλογή', ['jshint', 'perfbudget']). 

Οι ίδιες επιλογές είναι διαθέσιμες για δοκιμές προσβασιμότητας. Έτσι για το PA11Y, μπορείτε είτε να εκτελέσετε το pa11y Εντολή στο πρόγραμμα περιήγησής σας για έξοδο ή δημιουργήστε μια εργασία για την αυτοματοποίηση αυτού του βήματος. Στο τερματικό:

 ALICIORATE PA11Y.com

// ως εντολή JavaScript μετά την εγκατάσταση της NPM

var pa11y = απαιτούν ('pa11y'); // Απαιτείται PA11Y
var test = pa11y (); // πάρτε το PA11Y έτοιμο να το ρυθμίσετε

test.run ('Aliciorioater.com', λειτουργία (σφάλμα, αποτελέσματα) {
  // καταγράψτε την ανάλυση των αποτελεσμάτων σας
}) · 

Τα περισσότερα εργαλεία σε αυτές τις κατηγορίες είναι αρκετά plug-and-play, αλλά και σας δίνουν την επιλογή να προσαρμόσετε τον τρόπο εκτέλεσης των δοκιμών - για παράδειγμα, μπορείτε να τα ορίσετε για να αγνοήσετε ορισμένα πρότυπα WCAG.

Επόμενη Σελίδα: Πώς να εισαγάγετε τη δοκιμή στη ροή εργασίας σας

• 1
• 2

Τρέχουσα σελίδα: Διαφορετικοί τύποι εξεταζόμενων δοκιμών (και πότε πρέπει να τα χρησιμοποιήσετε)