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

Οι δοκιμές φυλλομετρητών έχουν αξία όταν είναι επαναλήψιμες και οδηγούν σε απόφαση. Το να ανοίξουμε μια ιστοσελίδα σε Chrome, Firefox, Safari και Edge και να «ρίξουμε μια ματιά» δεν δημιουργεί αξιόπιστη εικόνα ποιότητας. Χρειαζόμαστε σταθερό πίνακας κάλυψης, συγκεκριμένες διαδρομές, κανόνα για τη σοβαρότητα των ευρημάτων και επανέλεγχο μετά τη διόρθωση. Έτσι το δοκιμές φυλλομετρητών γίνεται διαδικασία μέτρησης και όχι συλλογή στιγμιότυπα οθόνης με μικρές διαφορές που κανείς δεν ξέρει αν είναι σημαντικές.

Ορίζουμε πρώτα το φυλλομετρητής και συσκευών πίνακας κάλυψης

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

Μέτρηση πλαίσιο: πέντε πράγματα που καταγράφουμε

1. Κάλυψη: πόσες κρίσιμες διαδρομές εκτελέστηκαν σε κάθε φυλλομετρητής του πίνακας κάλυψης.
2. Σοβαρότητα: αν το εύρημα μπλοκάρει ενέργεια, δυσκολεύει χρήση ή είναι μόνο οπτική απόκλιση.
3. Επαναληψιμότητα: αν το πρόβλημα εμφανίζεται σταθερά με συγκεκριμένα βήματα.
4. Διόρθωση: ποια αλλαγή έγινε και ποια άλλα σημεία μπορεί να επηρεάσει.
5. Επανέλεγχος: αν το αρχικό πρόβλημα λύθηκε χωρίς να δημιουργηθεί παλινδρόμηση στην ίδια ή σε άλλη κρίσιμη διαδρομή.

Κρίσιμες διαδρομές αντί για τυχαία περιήγηση

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

Λειτουργικό πρόβλημα και οπτική διαφορά δεν είναι το ίδιο

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

Βαρύτητα με βάση επίπτωση και συχνότητα

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

Συνδεσιμότητα και φυλλομετρητής μπορούν να μπερδευτούν

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

Επανέλεγχος μετά τη διόρθωση

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

Δείκτες που βοηθούν χωρίς να δημιουργούν ψεύτικη ακρίβεια

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

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

Πότε σταματάμε να κυνηγάμε μικρές διαφορές

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

Η μέτρηση ολοκληρώνεται με επόμενη ενέργεια

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

Εικόνα αναφοράς στιγμιότυπα οθόνης όπου προσφέρουν πραγματική αξία

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

Τάσεις επανέλεγχο ανά έκδοση

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

Το πλαίσιο πρέπει να παραμένει ελαφρύ

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

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

Βοήθημα κινδύνου πριν κλείσει ο κύκλος

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