Τι είναι το Front End Testing;

Τι είναι το Front End Testing;

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

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

Εκτός από αυτό, διεξάγονται δοκιμές front-end για:

• Δοκιμή παλινδρόμησης CSS: μικρές αλλαγές στο CSS που διαταράσσουν τη διάταξη του front-end.
• JavaΑλλαγές σεναρίου που καθιστούν το μπροστινό μέρος μη λειτουργικό.
• Έλεγχοι απόδοσης σχετικά με το πόσο γρήγορα η διεπαφή γίνεται εύχρηστη.

Πώς να δημιουργήσετε ένα πρόγραμμα δοκιμής ιστότοπου Frontend;

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

Βήμα 1) Ανακαλύψτε εργαλεία για τη διαχείριση του σχεδίου δοκιμών σας.

Βήμα 2) Αποφασίστε τον προϋπολογισμό για τις δοκιμές front-end.

Βήμα 3) Ορίστε το χρονοδιάγραμμα για ολόκληρη τη διαδικασία.

Βήμα 4) Αποφασίστε το εύρος του έργου. Το εύρος περιλαμβάνει:

• Operaσυστήματα ting και προγράμματα περιήγησης που χρησιμοποιούνται από τους χρήστες σας
• Δημοφιλείς συσκευές που χρησιμοποιούνται από το κοινό
• Τεχνική επάρκεια του κοινού
• Ταχύτητα σύνδεσης στο διαδίκτυο για το κοινό

Γιατί να δημιουργήσετε ένα σχέδιο δοκιμών Front-End;

Το παρακάτω διάγραμμα δείχνει τις δύο διαστάσεις που πρέπει να προσδιορίσει ένα σχέδιο.

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

Το σχέδιο προσφέρει δύο σαφή πλεονεκτήματα:

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

Συμβουλές για καλύτερες δοκιμές Front-End

Συμβουλές για τη δημιουργία ενός καλύτερου σχεδίου δοκιμών front-end:

• Προετοιμάστε τον προϋπολογισμό, τους πόρους και τον χρόνο σας με σύνεση.
• Χρησιμοποιήστε ένα πρόγραμμα περιήγησης χωρίς κεφαλίδα, ώστε οι δοκιμές να εκτελούνται πιο γρήγορα.
• Μειώστε την ποσότητα απόδοσης DOM σε δοκιμές για ταχύτερη εκτέλεση.
• Απομονώστε τις περιπτώσεις δοκιμών, ώστε να εντοπιστεί γρήγορα η βασική αιτία ενός σφάλματος και ο κύκλος επιδιόρθωσης να παραμείνει σύντομος.
• Κάντε τα σενάρια δοκιμών σας επαναχρησιμοποιήσιμα για ταχύτερη χρήση κύκλοι παλινδρόμησης.
• Χρησιμοποιήστε μια συνεπή σύμβαση ονοματοδοσίας για τα σενάρια δοκιμών σας.
• Δέστε το καθένα περίπτωση δοκιμής σε μία ορατή συμπεριφορά.

Εργαλεία δοκιμών Front-End

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

Εργαλείο δοκιμών JS: Jasmine

Γιασεμί είναι ένα πλαίσιο ανάπτυξης που βασίζεται στη συμπεριφορά για δοκιμές JavaΓραφή κώδικα. Εστιάζει στην επιχειρηματική αξία παρά στις τεχνικές λεπτομέρειες, έχει καθαρή σύνταξη και δεν εξαρτάται από κανένα άλλο πλαίσιο. Βασίστηκε σε πλαίσια δοκιμών μονάδων όπως τα JSSpec, ScrewUnit, JSpec και RSpec. Τα Jest και Vitest είναι οι ευρέως χρησιμοποιούμενες εναλλακτικές λύσεις σήμερα.

Λειτουργικό εργαλείο δοκιμής: Selenium

Selenium εκτελεί δοκιμές από άκρο σε άκρο σε προγράμματα περιήγησης και πλατφόρμες όπως Windows, macOS και Linux, και σας επιτρέπει να γράφετε δοκιμές σε Java, Python, C# και άλλες γλώσσες. Selenium IDE προσθέτει εγγραφή και αναπαραγωγή, επομένως ένα πρώτο σενάριο δεν χρειάζεται κώδικα. Cypress και ο Θεατρικός Συγγραφέας καλύπτουν το ίδιο πεδίο με ενσωματωμένη αναμονή και tracING.

CSS και οπτικά εργαλεία: CSSLint και BackstopJS

CSSLint είναι ένα linter ανοιχτού κώδικα γραμμένο σε JavaΣκριπτ που εκτελείται στο πρόγραμμα περιήγησης και από μια γραμμή εντολών. Δεν συντηρείται πλέον ενεργά, επομένως οι ομάδες πλέον συνδυάζουν φύλλα στυλ lint με την υποστήριξη CSS του Styrelint ή του ESLint.

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

Δύο προκλήσεις ισχύουν για οποιοδήποτε εργαλείο δοκιμών front-end:

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

Front-End Performance Optimization

Οι δοκιμές απόδοσης front-end απαντούν σε ένα ερώτημα: πόσο γρήγορα φορτώνει η σελίδα και γίνεται εύχρηστη; Η ρύθμισή της για έναν μόνο χρήστη είναι καλή πρακτική πριν η εφαρμογή αντιμετωπίσει υψηλό φόρτο εργασίας. δοκιμή απόδοσης.

Γιατί είναι σημαντική η βελτιστοποίηση απόδοσης στο Front-End;

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

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

Ποιο είναι το πλεονέκτημα της βελτιστοποίησης απόδοσης στο Front-End;

• Τα προβλήματα στην πλευρά του πελάτη βλάπτουν την εμπειρία του χρήστη τόσο άμεσα όσο και τα σημεία συμφόρησης του διακομιστή, επομένως και τα δύο αξίζουν προσοχής.
• Μεγάλο μέρος της αναμονής ενός επισκέπτη συμβαίνει μετά την απόκριση του διακομιστή — λήψη, ανάλυση και απόδοση — επομένως η εργασία στο front-end συχνά επιστρέφει το μεγαλύτερο ορατό κέρδος.
• Διορθώσεις όπως η συμπίεση εικόνων, η αναβολή σεναρίων και η δέσμευση χώρου για μέσα είναι φθηνότερες από την αναδιάρθρωση του back end.
• Core Web Vitals — Μεγαλύτερη Ζωγραφική Περιεχομένου, Αλληλεπίδραση με την Επόμενη Ζωγραφική και Αθροιστική Διάταξη Shift — να δώσουν στα αποτελέσματα έναν κοινό πίνακα βαθμολογίας.

Εργαλεία δοκιμής απόδοσης διεπαφής

1. PageSpeed ​​Insights

PageSpeed ​​Insights is GoogleΗ δωρεάν υπηρεσία ανάλυσης σελίδων του. Εκτελεί έλεγχο Lighthouse, αναφέρει τα Core Web Vitals και παραθέτει προτάσεις για τη μείωση του χρόνου φόρτωσης. Το Lighthouse διατίθεται επίσης μέσα στο Chrome DevTools.

2. Pingdom

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

Χαρακτηριστικά:

• Εξετάζει όλα τα μέρη μιας ιστοσελίδας
• Παρέχει μια επισκόπηση απόδοσης
• Tracτο ιστορικό απόδοσής σας
• Σας επιτρέπει να κάνετε δοκιμές από πολλές τοποθεσίες

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