guide visual regression testing with visual testing tools
Αυτός ο περιεκτικός οδηγός εξηγεί τα πάντα σχετικά με τη δοκιμή οπτικής παλινδρόμησης. Περιλαμβάνει επίσης την αναθεώρηση των δωρεάν και εμπορικών εργαλείων οπτικής δοκιμής, όπως Applitools, Percy, Screener, κλπ:
Ο έλεγχος οπτικής παλινδρόμησης ή ο οπτικός έλεγχος σε λογισμικό είναι μια δραστηριότητα διασφάλισης ποιότητας για την επαλήθευση εάν οι οπτικές πτυχές της διεπαφής χρήστη της εφαρμογής φαίνονται κατάλληλες για τον χρήστη. Είναι επίσης γνωστό ως Visual Validation Testing.
Στόχος του είναι να επαληθεύσει εάν εμφανίζονται τα σωστά δεδομένα και το περιεχόμενο στη διεπαφή της εφαρμογής. Επιπλέον, επικυρώνει επίσης τη διάταξη και την εμφάνιση κάθε οπτικού στοιχείου που υπάρχει στο περιβάλλον χρήστη και σε ολόκληρο το ίδιο το περιβάλλον χρήστη.
Τι θα μάθετε:
Δοκιμή οπτικής παλινδρόμησης
Όταν μιλάμε για την ορθότητα της διάταξης, αυτό σημαίνει ότι η τοποθέτηση, το σχήμα και το μέγεθος κάθε στοιχείου στην οθόνη είναι σωστά. Τα στοιχεία δεν πρέπει να αλληλεπικαλύπτονται μεταξύ τους, πρέπει να είναι ορατά και όχι κρυμμένα.
Το οπτικό στοιχείο εδώ μπορεί να αναφέρεται σε εικόνα, σελίδα, μέρος σελίδας ή τμήμα εικόνας.
Η επικύρωση της εμφάνισης σημαίνει ότι η γραμματοσειρά, το χρώμα, η φωτεινότητα, η αντίθεση, η πυκνότητα, η υφή, το οπτικό βάρος, τα γραφικά κ.λπ. των οπτικών στοιχείων πρέπει να φαίνονται κατάλληλα.
Τι είναι ο έλεγχος οπτικής παλινδρόμησης;
Ο έλεγχος παλινδρόμησης διασφαλίζει ότι οποιαδήποτε αλλαγή που εισάγεται στο λογισμικό δεν σπάει τίποτα που προηγουμένως τα πήγαινε καλά.
Όταν πρόκειται για οπτική δοκιμή, ο έλεγχος οπτικής παλινδρόμησης διασφαλίζει ότι δεν θα εμφανιστούν προβλήματα στο στυλ, όταν γίνονται αλλαγές στο λογισμικό. Η εφαρμογή θα πρέπει να συνεχίσει να φαίνεται τόσο καλή όσο ήταν.
Ένα εργαλείο ελέγχου οπτικής παλινδρόμησης καταγράφει στιγμιότυπα οθόνης του τρέχοντος περιβάλλοντος χρήστη και τα συγκρίνει με τα αρχικά στιγμιότυπα οθόνης. Έτσι, ο έλεγχος οπτικής παλινδρόμησης εξετάζει τις ιστορικές διαφορές. Επιβεβαιώνει ότι η ιστοσελίδα εξακολουθεί να αποδίδεται όπως αναμένεται σε διάφορα προγράμματα περιήγησης ακόμα και μετά από τροποποιήσεις στον κώδικα.
Παρακάτω δίνεται μια εκτύπωση οθόνης μιας δοκιμής οπτικής παλινδρόμησης που λαμβάνεται μέσω ενός αυτοματοποιημένου εργαλείου:
(εικόνα πηγή )
Στις σημερινές πρακτικές συνεχούς ενοποίησης, ο έλεγχος οπτικής παλινδρόμησης καθίσταται πολύ σημαντικός για να διασφαλιστεί ότι οι νέες αλλαγές δεν προκαλούν κανένα χάος στη διάταξη καθώς η εφαρμογή αναπτύσσεται από έκδοση σε έκδοση και προχωρά σε προγράμματα περιήγησης.
Πολλοί οργανισμοί χρησιμοποιούν δοκιμές οπτικής παλινδρόμησης για να καταγράψουν εκδόσεις συγκεκριμένων ιστοσελίδων για να τεκμηριώσουν πώς αλλάζει από τη μία επανάληψη στην άλλη.
Σημασία της δοκιμής οπτικής επικύρωσης
Ανεξάρτητα από το πόσο σωστά λειτουργεί η λειτουργικότητα της εφαρμογής σας, δεν θα είναι χρήσιμη για τον πελάτη, εκτός εάν μπορεί να προσφέρει μια καλή διεπαφή χρήστη και εμπειρία χρήστη.
Αυτές τις μέρες, δεν μιλάμε μόνο για UI (User Interface), αλλά εστιάζουμε επίσης πολύ στο UX (εμπειρία χρήστη). Όταν στοχεύουμε να προσφέρουμε καλύτερη εμπειρία χρήστη, τότε η οπτική δοκιμή καθίσταται πολύ σημαντική επειδή ο πιο ελκυστικός οπτικός σχεδιασμός μπορεί να γίνει αντιληπτός ως πιο χρήσιμος για τον χρήστη.
Ας δούμε το παρακάτω παράδειγμα από τον ιστότοπο του Amazon:
(εικόνα πηγή )
Στην παραπάνω εικόνα, μπορείτε να παρατηρήσετε ότι το κείμενο και οι εικόνες αλληλεπικαλύπτονται και δεν είναι σωστά ευθυγραμμισμένα. Αυτό είναι ένα παράδειγμα ενός οπτικού σφάλματος που μπορεί να δημιουργήσει μια κακή εμπειρία χρήστη καθώς ο πελάτης δεν θα μπορεί να ολοκληρώσει την προβλεπόμενη ενέργεια στον ιστότοπο.
Ο οπτικός σχεδιασμός διαμορφώνει την εμπειρία του χρήστη με πολλούς τρόπους.
Για παράδειγμα,
- Τα υπέροχα οπτικά σχέδια βοηθούν στην οικοδόμηση εμπιστοσύνης και αξιοπιστίας.
- Ενισχύει την εικόνα της επωνυμίας.
- Επηρεάζει την αναγνωσιμότητα.
- Σχηματίζει μια οπτική ισορροπία στην οθόνη.
- Καθοδηγεί τους χρήστες προς ενέργειες.
- Πείθει το μάτι να στρέψει την προσοχή του σε συγκεκριμένα στοιχεία σελίδας.
Επίσης, στις μέρες μας έχουμε μια τεράστια ποικιλία λειτουργικών συστημάτων, προγραμμάτων περιήγησης ιστού, αναλύσεων οθόνης και συσκευών, επομένως καθίσταται απαραίτητο να διασφαλίσουμε ότι το περιβάλλον χρήστη εμφανίζεται σωστό σε καθέναν από τους πιθανούς συνδυασμούς αυτών.
Ακόμη και μια μικρή παραμόρφωση στη διεπαφή χρήστη μπορεί να οδηγήσει σε απώλεια επιχείρησης. Τα οπτικά σφάλματα μπορεί να είναι ενοχλητικά και δυσάρεστα για τους χρήστες και να δημιουργούν ενόχληση για αυτούς.
Ας υποθέσουμε ότι είστε στην τραπεζική επιχείρηση και προσφέρετε μια διαδικτυακή εφαρμογή τραπεζικής για κινητές συσκευές στους πελάτες σας.
Λαμβάνετε παράπονα από ορισμένους πελάτες σας ότι όταν θέλουν να μεταφέρουν χρήματα στον λογαριασμό κάποιου και αφού συμπληρώσουν όλες τις απαιτούμενες πληροφορίες, δεν μπορούν να βρουν το 'Υποβάλλουν' κουμπί στην οθόνη και αυτό είναι μια ενοχλητική εμπειρία για αυτούς.
Όταν ερευνάτε το ζήτημα, διαπιστώνετε ότι το κουμπί υποβολής αποκρύπτεται σε μια συγκεκριμένη ανάλυση οθόνης για κινητά Android και γι 'αυτό όλοι οι πελάτες με τηλέφωνα Android αυτού του συγκεκριμένου μεγέθους οθόνης δεν μπόρεσαν να δουν το κουμπί υποβολής.
Έτσι, η λειτουργικότητα της εφαρμογής λειτούργησε καλά σε αυτήν την περίπτωση, αλλά λόγω του οπτικού σφάλματος, οι χρήστες δεν μπόρεσαν να ολοκληρώσουν τις προβλεπόμενες ενέργειές τους στην εφαρμογή. Αυτό το παράδειγμα δείχνει πόσο σημαντικό είναι να δοκιμάσετε τις οπτικές πτυχές της εφαρμογής σε κάθε πιθανή διαμόρφωση προτού παραδώσετε την εφαρμογή στους πελάτες.
Ορισμένες περιοχές όπου συνιστάται η δοκιμή οπτικής επικύρωσης (επειδή θα επηρεάσει άμεσα την επωνυμία σας):
- Εφαρμογές για κινητά
- Mobile Web / Responsive Web
- Ιστοσελίδες μάρκετινγκ
- Συστήματα διαχείρισης περιεχομένου
- Συστήματα καταναλωτών όπως αεροπορικές εταιρείες, ταξίδια, τραπεζικές συναλλαγές κ.λπ.
Δεδομένης της σημασίας του, οι εταιρείες θα πρέπει να ξοδέψουν σημαντική προσπάθεια και χρήματα για οπτικές δοκιμές. Εάν χρησιμοποιηθεί σε συνδυασμό με τις υπάρχουσες δοκιμές προγραμματιστή, θα σας βοηθήσει να εντοπίσετε τα οπτικά ζητήματα στα πρώτα στάδια του κύκλου ζωής ανάπτυξης.
Μέθοδοι και διαδικασίες οπτικής δοκιμής
Ως προγραμματιστές ή δοκιμαστές, εργαζόμαστε συχνά για τον έλεγχο της λειτουργικότητας των εφαρμογών. Είτε μέσω χειροκίνητου είτε κάποιου αυτοματοποιημένου εργαλείου, ελέγξουμε εάν η εφαρμογή λειτουργεί όπως αναμένεται. Τέτοιες δοκιμές λειτουργικότητας είναι πολύ σημαντικές για να διασφαλιστεί η ομαλή λειτουργία της εφαρμογής.
Ωστόσο, εάν προσθέσουμε οπτικές δοκιμές σε αυτό, τότε θα βελτιώσει σημαντικά τη συνολική δοκιμή. Έτσι, αυτή η δοκιμή γίνεται συχνά σε συνδυασμό με λειτουργικές δοκιμές.
Υπάρχουν αρκετές μέθοδοι και διαδικασίες δοκιμής για την αντιμετώπιση των προκλήσεων της οπτικής δοκιμής εφαρμογών σε μεγάλες διαμορφώσεις. Υπάρχουν επίσης πολλά διαθέσιμα εργαλεία για την υποστήριξη δοκιμών οπτικής επικύρωσης.
Γενικά, ακολουθούνται δύο βασικές προσεγγίσεις για δοκιμή οπτικής επικύρωσης, δηλαδή με βάση κώδικα και με βάση τη διαμόρφωση. Τα οπτικά εργαλεία δοκιμών κατηγοριοποιούνται επίσης με βάση αυτές τις δύο προσεγγίσεις.
Μπορεί να γίνει χειροκίνητα ή με αυτοματοποιημένο τρόπο. Λόγω συγκεκριμένων προκλήσεων, δεν μπορεί να είναι πλήρως χειροκίνητο ή πλήρως αυτοματοποιημένο. Γενικά, προτιμάται ένας συνδυασμός χειροκίνητης και αυτοματοποιημένης προσέγγισης.
Παρακάτω δίνονται οι 3 διαφορετικές μέθοδοι οπτικής δοκιμής που ακολουθούνται γενικά.
Οι ομάδες μπορούν να επιλέξουν οποιαδήποτε από αυτές τις επιλογές ανάλογα με τις ανάγκες τους:
# 1) Δημιουργία αποκλειστικών οπτικών δοκιμών : Αυτή είναι η πιο συνιστώμενη μέθοδος καθώς σας παρέχει πλήρη έλεγχο της οπτικής επικύρωσης. Επίσης, χρησιμοποιώντας αυτήν την προσέγγιση, μπορείτε να γράψετε δοκιμές με μέτριες προσπάθειες. Αλλά ναι, θα πρέπει να γράψετε τις δοκιμές από το μηδέν και θα χρειαστεί αρκετός χρόνος.
# 2) Εισαγωγή οπτικών σημείων ελέγχου σε υπάρχουσες λειτουργικές δοκιμές: Σε αυτήν τη μέθοδο, έχετε ήδη τις δοκιμές για την επικύρωση της λειτουργικότητας της εφαρμογής και προσθέτετε μόνο οπτικούς ελέγχους μεταξύ αυτών των δοκιμών για την επικύρωση των σελίδων.
Φυσικά, αυτή η μέθοδος περιορίζει την κάλυψη των δοκιμών σας, αλλά είναι ένας γρήγορος τρόπος εισαγωγής οπτικών δοκιμών και επωφεληθείτε από τον υπάρχοντα λειτουργικό κώδικα δοκιμών.
# 3) Εισαγωγή έμμεσης οπτικής επικύρωσης στο υπάρχον πλαίσιο δοκιμών: Αυτή η μέθοδος είναι πολύ εύκολη στην εφαρμογή καθώς απαιτεί μόνο λίγες γραμμές κώδικα. Ωστόσο, υποφέρει από τον περιορισμό ότι μπορείτε επίσης να κάνετε γενική επικύρωση σε αυτήν την περίπτωση. Δεν μπορείτε να επικυρώσετε συγκεκριμένα στοιχεία στο πλαίσιο.
Καθώς προχωράμε, θα συζητήσουμε χειροκίνητες και αυτοματοποιημένες οπτικές δοκιμές. Θα ελέγξουμε επίσης λεπτομερώς τα οπτικά εργαλεία δοκιμής και τα πλαίσια.
Μη αυτόματη οπτική δοκιμή
Οι εταιρείες λογισμικού αντιμετωπίζουν δύο επιλογές για την πραγματοποίηση οπτικών δοκιμών, δηλαδή χειροκίνητη δοκιμή ή αυτοματοποιημένη δοκιμή. Ας δούμε λεπτομερώς τη μη αυτόματη οπτική δοκιμή.
Παρόλο που η μη αυτόματη δοκιμή μπορεί να είναι αργή, ακριβή και επιρρεπής σε σφάλματα, λόγω της υποκειμενικής φύσης του σχεδιασμού της διεπαφής, συχνά δεν είναι δυνατή η πραγματοποίηση αυτοματοποιημένης δοκιμής για την καταγραφή της ορθότητας κάθε σεναρίου. Έτσι, κατά καιρούς πρέπει να επιλέξουμε μια ισορροπία μεταξύ δοκιμών χειροκίνητου και αυτοματισμού.
Επίσης, ένα από τα σημαντικότερα πλεονεκτήματα της μη αυτόματης δοκιμής από έναν άνθρωπο μπορεί να κοιτάξει έξω από το πεδίο της δοκιμής. Μια δοκιμή αυτοματισμού μπορεί να καταγράψει μόνο το ζήτημα που εμπίπτει στο πεδίο εφαρμογής του, αλλά σε μια μη αυτόματη δοκιμή, ένας άνθρωπος δοκιμής μπορεί επίσης να εντοπίσει άλλα σφάλματα καλλυντικών και άλλα πράγματα που φαίνονται λανθασμένα στο περιβάλλον χρήστη.
Δεδομένου ότι οι μη αυτόματες δοκιμές είναι πιο κοντά στις πραγματικές ενέργειες των χρηστών, μπορούν να συλλάβουν σφάλματα διάταξης και ζητήματα σχεδιασμού που γενικά αποκαλύπτονται όταν ένας πραγματικός χρήστης αλληλεπιδρά με την εφαρμογή.
Μπορείτε να προχωρήσετε σε μη αυτόματες δοκιμές στα πρώτα στάδια της ανάπτυξης εφαρμογών όταν το περιβάλλον χρήστη σας είναι ασταθές. Είναι επίσης χρήσιμο για δοκιμές ad-hoc όταν πρέπει να έχετε γρήγορους επιτόπιους ελέγχους.
Στη χειροκίνητη δοκιμή οπτικής επικύρωσης, ο ελεγκτής πρέπει να ελέγξει χειροκίνητα την εμφάνιση και τη διάταξη των οπτικών στοιχείων. Αυτό μπορεί να περιλαμβάνει τη λήψη τρεχόντων στιγμιότυπων οθόνης και, στη συνέχεια, τη μη αυτόματη σύγκριση με τα βασικά στιγμιότυπα οθόνης για τον εντοπισμό τυχόν κενών.
Ένας άλλος αποτελεσματικός τρόπος για να κάνετε χειροκίνητες δοκιμές είναι να χρησιμοποιήσετε έναν εξερευνητή στοιχείων. Σε αυτό, ορίζετε τις καταστάσεις δοκιμής, χρησιμοποιήστε τον εξερευνητή για να επιλέξετε μια κατάσταση και ένα στοιχείο και να το ελέγξετε στην οθόνη. Ένα τέτοιο εργαλείο είναι το React Storybook όπου μπορείτε να αναπτύξετε στοιχεία UI μεμονωμένα.
Μέσω αυτής της μεθόδου, ένας δοκιμαστής μπορεί να εκτελέσει μια χειροκίνητη δοκιμή ενός στοιχείου, να ελέγξει τον τρόπο απόδοσης και να δει εάν λειτουργεί καλά ή όχι.
Βήματα μη αυτόματης δοκιμής:
- Περιηγηθείτε στην εφαρμογή και τραβήξτε τα γνωστά καλά στιγμιότυπα οθόνης βάσης.
- Αργότερα, τραβήξτε ένα άλλο σύνολο στιγμιότυπων οθόνης από την τελευταία έκδοση της εφαρμογής.
- Τώρα, συγκρίνετε χειροκίνητα αυτά τα στιγμιότυπα οθόνης (βασική γραμμή έναντι τρέχοντος) για να μάθετε τα οπτικά σφάλματα.
Αυτοματοποιημένη οπτική δοκιμή
Η αυτοματοποιημένη οπτική δοκιμή είναι ένας τρόπος αυτόματης επαλήθευσης εάν μια διεπαφή χρήστη εμφανίζεται οπτικά όπως προορίζεται.
Τα οφέλη της αυτοματοποίησης οπτικών δοκιμών είναι ότι προσφέρουν μακροπρόθεσμη αποδοτικότητα κόστους, είναι ταχύτερα από τις μη αυτόματες δοκιμές, πιο ακριβή καθώς μπορούν να αποκλείσουν τα ανθρώπινα λάθη και να προσφέρουν τέλειες οπτικές δοκιμές pixel, είναι επαναχρησιμοποιήσιμες & διαφανείς καθώς προσφέρουν αυτόματες αναφορές που είναι εύκολα και εύκολα προσβάσιμο από οποιονδήποτε στην ομάδα.
Μερικοί από τους περιορισμούς των αυτοματοποιημένων οπτικών δοκιμών είναι ότι μπορεί να υπάρξουν μεγάλα έξοδα εκ των προτέρων και θα χρειαστεί να καταβάλλετε σημαντικές προσπάθειες στη συντήρηση των δοκιμών για να αντιμετωπίσετε κάθε αλλαγή.
Στις δοκιμές αυτοματισμού, το πεδίο εφαρμογής είναι πιο περιορισμένο, εκτός εάν υπάρχει δοκιμή στιγμιότυπου οθόνης. Επίσης, υπάρχει μια απότομη καμπύλη μάθησης, καθώς οι οργανισμοί χρειάζονται χρόνο για να μάθουν για τα εργαλεία δοκιμών αυτοματισμού.
Το να ακολουθήσετε τον αυτοματισμό θα ήταν καλή επιλογή εάν απαιτείται να κάνετε οπτικό έλεγχο παλινδρόμησης για να αντιμετωπίσετε συχνές αλλαγές που συμβαίνουν σε ένα σταθερό περιβάλλον εργασίας χρήστη. Οι αυτοματοποιημένες δοκιμές βοηθούν επίσης σε μια εξαιρετική οπτική σύγκριση οθόνης.
Η αυτοματοποιημένη σύγκριση στιγμιότυπου οθόνης προσφέρει μεγάλο βαθμό ακρίβειας στις οπτικές δοκιμές και αυξάνει την απόδοση επένδυσης. Η αυτοματοποιημένη σύγκριση στιγμιότυπου οθόνης μπορεί να συλλάβει αυτά τα σφάλματα που είναι αδύνατο να εντοπιστούν με ανθρώπινα μάτια και χειροκίνητη σύγκριση. Είναι επίσης χρήσιμο να δοκιμάζουμε από τέλος σε τέλος δοκιμές περίπλοκων ιστοριών χρηστών.
Υπάρχει μια ευρεία ποικιλία ανοιχτών πηγών και εμπορικών εργαλείων για αυτόματες δοκιμές.
Η παρακάτω εικόνα δείχνει πώς μπορεί να αυτοματοποιηθεί η οπτική επικύρωση χρησιμοποιώντας οποιαδήποτε γλώσσα προγραμματισμού:
(εικόνα πηγή )
Παρακάτω δίνεται η γενική ροή εργασίας του Visual Test Automation:
(εικόνα πηγή )
Όπως φαίνεται στο παραπάνω διάγραμμα ροής εργασίας, υπάρχουν 4 βήματα που εμπλέκονται στην αυτόματη οπτική δοκιμή:
εισαγωγή κωδικού ταξινόμησης c ++
Βήμα 1 : Σε αυτό το βήμα, πρέπει να οδηγήσουμε την εφαρμογή και τη δοκιμή και να τραβήξουμε στιγμιότυπα οθόνης.
Βήμα 2 : Σε αυτό το βήμα, το εργαλείο αυτοματισμού συγκρίνει αυτά τα στιγμιότυπα οθόνης με τα βασικά στιγμιότυπα οθόνης. Τα βασικά στιγμιότυπα οθόνης είναι γενικά οι εικόνες που λήφθηκαν στις προηγούμενες δοκιμές και αποδείχθηκαν από έναν δοκιμαστή.
Βήμα 3: Μόλις το εργαλείο λάβει τα αποτελέσματα των συγκρίσεων εικόνας, δημιουργεί μια αναφορά που επισημαίνει όλες τις διαφορές που βρέθηκαν.
Για παράδειγμα,Η παρακάτω εικόνα δείχνει ένα από τα εργαλεία αυτοματισμού δοκιμής που επισημαίνει τις διαφορές σε μια γωνιακή εφαρμογή:
Βήμα 4 : Στο τελευταίο βήμα, ο υπεύθυνος δοκιμών ελέγχει την αναφορά και ελέγχει για κάθε διαφορά ως προς το αν είναι σφάλμα ή μια έγκυρη αλλαγή (ψευδώς θετικά). Με βάση αυτό, οι βασικές εικόνες ενημερώνονται.
Για την πρώτη δοκιμαστική εκτέλεση, δεν έχετε βασικές εικόνες. Έτσι, οι εικόνες που λαμβάνονται κατά την πρώτη εκτέλεση θεωρούνται γενικά ως βασικές εικόνες. Από την επόμενη εκτέλεση και μετά, συγκρίνονται με τα στιγμιότυπα οθόνης.
Βέλτιστες πρακτικές για αυτοματοποιημένες οπτικές δοκιμές
- Επιλέξτε ένα εργαλείο που είναι αρκετά έξυπνο για να αγνοήσετε τα ψευδώς θετικά. Το εργαλείο θα πρέπει να είναι σε θέση να χειριστεί anti-aliasing, pixel offsets κ.λπ. και δεν αποτυγχάνει στις δοκιμές σας για αυτούς τους λόγους.
- Ο αυτοματοποιημένος έλεγχος πρέπει να μπορεί να χειρίζεται δυναμικό και κινούμενο περιεχόμενο.
- Μην βασίζεστε σε αναλογίες σφαλμάτων ή στη διαμόρφωση των ορίων. Το μόνο που πρέπει να έχει σημασία είναι αν ένας άνθρωπος μπορεί να δει αυτή τη διαφορά και αυτό θα επηρεάσει την εμπειρία του χρήστη;
- Ο αλγόριθμος αυτοματισμού πρέπει να είναι σε θέση να αναλύει τη δομή της σελίδας και να μπορεί να κάνει συγκρίσεις διάταξης.
- Προτιμήστε την επικύρωση πλήρους σελίδας διεπαφής χρήστη αντί για μεμονωμένα στοιχεία. Αυτό θα παρέχει περισσότερη και καλύτερη κάλυψη. Σε περίπτωση επικύρωσης μόνο συγκεκριμένων στοιχείων, μπορείτε να χάσετε απροσδόκητα σφάλματα.
Αυτοματοποιημένα εργαλεία δοκιμών και οπτικά πλαίσια δοκιμών
Σήμερα, υπάρχει μια μεγάλη ποικιλία (σχεδόν 30 συν) εργαλείων που διατίθενται στην αγορά για αυτοματοποιημένες οπτικές δοκιμές. Μερικά από αυτά τα εργαλεία είναι ανοιχτού κώδικα, ενώ μερικά είναι εμπορικά. Τα περισσότερα από αυτά τα εργαλεία λειτουργούν με τον ίδιο τρόπο, αλλά ακολουθούν διαφορετική ροή εργασίας σύμφωνα με το κοινό-στόχο.
Για προγραμματιστές front-end, υπάρχουν δύο τύποι πλαισίων που εμπλέκονται στην οπτική δοκιμή. Πρώτον, χρειάζεστε έναν δοκιμαστικό δρομέα που σας επιτρέπει να γράφετε και να εκτελείτε τις δοκιμές. Δεύτερον, χρειάζεστε ένα πλαίσιο αυτοματοποίησης προγράμματος περιήγησης για να αναπαραγάγετε τις αλληλεπιδράσεις των χρηστών. Αυτά τα δύο πλαίσια καλούνται από κοινού ως Visual test code.
Με τη βοήθεια αυτών των δοκιμαστικών πλαισίων, οι προγραμματιστές δημιουργούν τον κώδικα που μιμείται πραγματικές ενέργειες χρήστη, όπως πληκτρολόγηση κειμένου ή κλικ σε κουμπιά. Ο κωδικός δοκιμής έχει εντολές για λήψη στιγμιότυπων οθόνης σε σχετικά σημεία. Όταν η δοκιμή εκτελείται για πρώτη φορά, λαμβάνεται ένα αρχικό σύνολο στιγμιότυπων οθόνης.
Αυτά τα στιγμιότυπα οθόνης λειτουργούν ως βάση για σύγκριση όταν πραγματοποιούνται τυχόν αλλαγές στην εφαρμογή. Μόλις δημιουργηθεί η γραμμή βάσης, ο προγραμματιστής εκτελεί τον κώδικα στο παρασκήνιο. Όταν βρεθεί μια αλλαγή, καταγράφεται το στιγμιότυπο οθόνης της αλλαγής.
Ο δοκιμαστικός δρομέας συγκρίνει αυτό το στιγμιότυπο οθόνης με το στιγμιότυπο οθόνης βάσης για αυτήν την περιοχή κώδικα. Εάν εντοπιστούν διαφορές μεταξύ των εικόνων, τότε το τεστ θεωρείται αποτυχία και αναφέρεται το οπτικό σφάλμα.
Όταν εκτελείται ολόκληρος ο κωδικός δοκιμής, δημιουργείται αυτόματα μια αναφορά. Αυτή η αναφορά ελέγχεται χειροκίνητα από έναν ανθρώπινο ελεγκτή για να ελέγξει όλες τις εικόνες στιγμιότυπου οθόνης που είναι διαφορετικές από τις βασικές εικόνες. Ορισμένα εργαλεία δημιουργούν μια διαφορετική εικόνα για να επισημάνουν τη διαφορά μεταξύ του πραγματικού και του αναμενόμενου στιγμιότυπου οθόνης.
Εάν η διαφορά προκαλείται από ένα ζήτημα στον κώδικα, τότε ο προγραμματιστής μπορεί να διορθώσει αυτό το ζήτημα και να εκτελέσει ξανά τον κώδικα. Εάν η διαφορά προκαλείται από μια απαιτούμενη αλλαγή στο περιβάλλον χρήστη της εφαρμογής, τότε ο προγραμματιστής ελέγχει αυτό το στιγμιότυπο οθόνης και ενημερώνει το στιγμιότυπο οθόνης βάσης, ώστε να μπορούν να περάσουν οι μελλοντικές δοκιμές.
Το Visual Testing περιλαμβάνει δωρεάν και επί πληρωμή εργαλεία. Ας συζητήσουμε λεπτομερώς τα εργαλεία.
Λίστα των κορυφαίων εργαλείων οπτικών δοκιμών
Open-source & Free Tools βάσει κώδικα / σεναρίων
Παρατίθεται παρακάτω η λίστα των εργαλείων οπτικής επικύρωσης βάσει κώδικα που είναι ανοιχτού κώδικα και διατίθενται δωρεάν.
- PhantomCSS (UJs CapserJs)
- FBSnapshotTestCase (Χρησιμοποιεί XCTest)
- Δίδυμοι (Χρησιμοποιεί JS DSL)
- Βελόνα (Χρησιμοποιεί Python)
- Παλινδρόμηση σελίδας Rspec (Χρησιμοποιεί Capibara)
- Pix-Diff (Χρησιμοποιεί JS και μοιρογνωμόνιο)
- Selenium Visual Diff (Χρησιμοποιεί Java και WD)
- Βιζρέγκερς (Χρησιμοποιεί .NET και WD)
- VisualCeption (Χρησιμοποιεί PHP και CodeCeption)
- Φάντασμα (Χρησιμοποιεί JS DSL)
Open Tools και δωρεάν εργαλεία βάσει διαμόρφωσης
Τα εργαλεία οπτικής επικύρωσης βάσει διαμόρφωσης που είναι ανοιχτού κώδικα και διατίθενται δωρεάν, αναφέρονται παρακάτω για την αναφορά σας:
- BaskstopJS
- dpxdtMake - Απεικονίζεται
- CSSCritic
- Γκριντ Photobox
- VIFF
- Φρέσκο κρεμμυδάκι
- καλλικάτζαρος
- Οπτική δοκιμή CSS
- Τραβήξτε και συγκρίνετε
- Γκριντ-Βίγκο
- Πλαίσιο Galen
- Αυτοκίνητο
Δεν θα πάμε βαθιά σε κάθε ένα από τα παραπάνω εργαλεία, ωστόσο, ας συζητήσουμε εν συντομία για τα καλύτερα.
Phantom CSS είναι ένα από τα πολύ δημοφιλή εργαλεία ανοιχτού κώδικα για οπτική επικύρωση. Έχει 4.768 αστέρια GitHub. Σας βοηθά με αυτόματο έλεγχο οπτικής παλινδρόμησης. Χρησιμοποιεί το CasperJS για να τραβήξει τα στιγμιότυπα οθόνης και να τα συγκρίνει με τα βασικά στιγμιότυπα οθόνης χρησιμοποιώντας το Resemble.js.
(εικόνα πηγή )
Δημιουργεί τις διαφορές εικόνας με βάση τις διαφορές pixel RGB. Αυτό το εργαλείο είναι χρήσιμο μόνο όταν η διεπαφή χρήστη είναι προβλέψιμη.
FBSnapshotTestCase είναι επίσης ένα άλλο δημοφιλές εργαλείο σε αυτήν την κατηγορία. Έχει 880 αστέρια GitHub.
Καταγράφει ένα διαμορφωμένο UIView ή CALayer και χρησιμοποιεί μια μέθοδο που ονομάζεται render InContext: για να αποκτήσει ένα στιγμιότυπο εικόνας των περιεχομένων του. Ταιριάζει με αυτήν την εικόνα με μια 'εικόνα αναφοράς' που βρίσκεται στο αποθετήριο πηγαίου κώδικα και αποτυγχάνει στη δοκιμή σε περίπτωση που τα δύο στιγμιότυπα δεν ταιριάζουν.
BackstopJS είναι ένα κορυφαίο εργαλείο στην κατηγορία εργαλείων που βασίζονται στη διαμόρφωση. Παίρνει το CSS Curveballs. Πρόκειται για ένα εργαλείο αυτοματισμού για δοκιμές οπτικής παλινδρόμησης που μπορεί να δοκιμάσει το UI Web που ανταποκρίνεται, ταιριάζοντας τα στιγμιότυπα οθόνης DOM με την πάροδο του χρόνου.
Είναι ένα εύκολο στη χρήση εργαλείο με μερικές εξαιρετικές δυνατότητες, όπως διεπαφή χρήστη αναφοράς στο πρόγραμμα περιήγησης, ενσωματωμένη απόδοση σύνδεσης, αναφορές JUnit, αναφορές CLI κ.λπ.
Το πλαίσιο Galen είναι επίσης ένα από τα διάσημα πλαίσια ανοιχτού κώδικα για δοκιμές οπτικής επικύρωσης. Χρησιμοποιώντας αυτό το εργαλείο μπορείτε να δοκιμάσετε τη διάταξη και την απόκριση του σχεδιασμού εφαρμογών ιστού με αυτοματοποιημένο τρόπο.
(εικόνα πηγή )
Αυτό το πλαίσιο λειτουργεί καλά στο πλέγμα σεληνίου.
Ας συζητήσουμε τώρα ορισμένα εμπορικά εργαλεία και πλαίσια που είναι διαθέσιμα για τον αυτοματισμό οπτικών δοκιμών!
Εμπορικά εργαλεία
# 1) Applitools
Είναι ένα από τα πολύ δημοφιλή εμπορικά πλαίσια για αυτοματοποιημένη οπτική δοκιμή και οπτική παλινδρόμηση. Αυτό το εργαλείο παρέχει ένα γνωστικό όραμα που λειτουργεί με AI. Χρησιμοποιεί τεχνητή νοημοσύνη για να σας βοηθήσει με οπτική δοκιμή και παρακολούθηση.
Με τα Applitools, μπορείτε να δοκιμάσετε αυτόματα εκατοντάδες στοιχεία UI σε όλες τις πλατφόρμες και τις διαμορφώσεις χωρίς να γράψετε κώδικα ή με πολύ ελάχιστο κώδικα. Έχει υποστήριξη για περισσότερα από 40 πλαίσια δοκιμών και γλώσσες.
Υποστηρίζει επίσης τη διαδικασία DevOps όπου μπορείτε εύκολα να ενσωματώσετε τις οπτικές σας δοκιμαστικές θήκες στον αγωγό CI / CD. Αυτό το εργαλείο σάς επιτρέπει επίσης να δημιουργείτε προσαρμοσμένες οπτικές αναφορές.
Αυτό το πλαίσιο χρησιμοποιείται από ορισμένες κορυφαίες εταιρείες, συμπεριλαμβανομένων των Sony, SAP, MasterCard και PayPal. Έχει επίσης πολύ θετικές κριτικές πελατών.
Ο προμηθευτής προσφέρει τρεις εκδόσεις αυτού του πλαισίου, δηλαδή Starter, Enterprise Public Cloud και Enterprise Dedicated Cloud. Θα πρέπει να επικοινωνήσετε με τον προμηθευτή για την τιμολόγηση.
Δικτυακός τόπος: Εφαρμογές
# 2) Οπτική δοκιμή Crossbrowsertesting
Το Crossbrowsertesting είναι μια διαδικτυακή πλατφόρμα δοκιμών που αναπτύχθηκε από την SmartBear για ολόκληρη τη διαδικασία δοκιμών. Αυτό το εργαλείο καλύπτει οπτικές δοκιμές καθώς και δοκιμές οπτικής παλινδρόμησης.
Η λειτουργία δοκιμής στιγμιότυπου οθόνης που παρέχεται από αυτό το εργαλείο συλλαμβάνει στιγμιότυπα οθόνης πλήρους σελίδας και βοηθά γρήγορα στην εύρεση οπτικών σφαλμάτων και στην παρακολούθηση οπτικών ασυνεπειών. Για να ξεκινήσετε μια δοκιμή στιγμιότυπου οθόνης, πρέπει να δώσετε τη διεύθυνση URL και να επιλέξετε ορισμένα προγράμματα περιήγησης.
Οι δοκιμές στιγμιότυπου οθόνης είναι διαθέσιμες για τις περισσότερες από τις επιτραπέζιες συσκευές και τις δημοφιλείς κινητές συσκευές. Μπορείτε να συνδυάσετε και να αντιστοιχίσετε την ανάλυση του προγράμματος περιήγησής σας για δυναμικές αποκριτικές δοκιμές σε προγράμματα περιήγησης επιτραπέζιων υπολογιστών και προσανατολισμούς για κινητά. Η δοκιμή του στιγμιότυπου οθόνης θα καταγράψει τρεις προβολές κάθε διαμόρφωσης, δηλαδή Window, Full-page και Full-page χωρίς χρώμα.
Μπορείτε να φιλτράρετε γρήγορα τα αποτελέσματα των δοκιμών σας και να δείτε τα οπτικά σφάλματα. Μπορείτε επίσης να μεταβείτε σε ζωντανή δοκιμή και να εντοπίσετε σφάλματα ή να διορθώσετε τα οπτικά ελαττώματα. Μπορείτε να δοκιμάσετε τοπικά και αναπτυξιακά περιβάλλοντα μέσω ενός τοπικού εργαλείου σύνδεσης που παρέχεται από αυτό το λογισμικό.
Για δοκιμές οπτικής παλινδρόμησης, αφού ολοκληρώσετε επιτυχώς μια δοκιμή στιγμιότυπου οθόνης, μπορείτε απλώς να το προγραμματίσετε σε καθημερινή, εβδομαδιαία ή μηνιαία βάση. Το εργαλείο θα στείλει επίσης τις ειδοποιήσεις αποτελεσμάτων δοκιμής.
Αυτό το εργαλείο διαθέτει μια μηχανή αυτόματης σύγκρισης για τη λήψη αυτοματοποιημένων στιγμιότυπων οθόνης της ίδιας σελίδας σε διάφορες διαμορφώσεις. Από εδώ, μπορείτε να επιλέξετε ένα πρόγραμμα περιήγησης βάσης και, στη συνέχεια, να αξιολογήσετε τις επισημασμένες διαφορές διάταξης.
Προσφέρει επίσης ορισμένες προηγμένες επιλογές για να κάνει τη δοκιμή σας πιο ισχυρή. Αυτές οι επιλογές περιλαμβάνουν βασικό έλεγχο ταυτότητας, προφίλ σύνδεσης, σενάριο Selenium, καθυστέρηση στιγμιότυπου οθόνης, αποστολή email, απόκρυψη σταθερών στοιχείων κ.λπ.
Διαβάστε επίσης = >> Πώς να τραβήξετε στιγμιότυπο οθόνης στο Σελήνιο
Αυτό είναι ένα εργαλείο με τιμές. Ωστόσο, διατίθεται επίσης δωρεάν δοκιμή. Η ζωντανή δοκιμαστική έκδοση αυτού του εργαλείου θα σας κοστίσει 29 $ / μήνα, οι αυτοματοποιημένες δοκιμές κοστίζουν 60 $ / μήνα και οι απεριόριστες δοκιμές κοστίζουν 100 $ / μήνα.
Δικτυακός τόπος: Διασταυρούμενη δοκιμή
# 3) Οπτικός έλεγχος Percy
Το Percy είναι ένα από τα ισχυρά εργαλεία για αυτοματοποιημένες οπτικές δοκιμές. Σας επιτρέπει να ενσωματώσετε, να εκτελέσετε και να ελέγξετε τις οπτικές δοκιμές. Η ενοποίηση μπορεί να γίνει μέσω δοκιμαστικών αυτοματοποιημένων πλαισίων, υπηρεσιών CI / CD ή απευθείας μέσω της εφαρμογής σας.
Μετά την ολοκλήρωση, μπορούμε να ξεκινήσουμε την εκτέλεση των οπτικών δοκιμών που απαιτούνται στις εφαρμογές και τα στοιχεία. Όταν ξεκινά μια οπτική δοκιμή, το εργαλείο Percy εξάγει στιγμιότυπα οθόνης UI σε διάφορα προγράμματα περιήγησης και πλάτος απόκρισης. Στη συνέχεια πραγματοποιεί σύγκριση βασικής γραμμής pixel με pixel και προσδιορίζει τυχόν σχετικές οπτικές αλλαγές στη διεπαφή χρήστη.
Μόλις εμφανιστούν τα στιγμιότυπα οθόνης, μπορείτε να τα ελέγξετε για τυχόν οπτικά προβλήματα.
Οι διαφορές pixel by pixel και αποκρίσεις αποκρίσεων που παρέχονται από αυτό το εργαλείο παρέχουν μεγάλη οπτική κάλυψη. Επίσης, η δυνατότητα σταθεροποίησης στιγμιότυπου ελαχιστοποιεί τα ψευδώς θετικά.
Αυτό είναι ένα πληρωμένο εργαλείο. Ωστόσο, προσφέρει επίσης μια δωρεάν δοκιμαστική έκδοση. Οι πληρωμένες εκδόσεις έχουν τρεις γεύσεις, δηλαδή Essential, Business και Enterprise. Η έκδοση Essential διατίθεται στα 29 $ / μήνα, η έκδοση Business διατίθεται στα 849 $ / μήνα και η έκδοση Enterprise δημιουργείται κατά παραγγελία ανάλογα με τις ανάγκες σας, επομένως η τιμή της θα ποικίλει ανάλογα.
Δικτυακός τόπος: Οπτικός έλεγχος Percy
# 4) Screener.io
Αυτό είναι ένα αυτοματοποιημένο εργαλείο δοκιμών που σας επιτρέπει να καταγράφετε και να εκτελείτε τις δοκιμές σε πραγματικό χρόνο στο cloud. Οι ροές δοκιμής μπορούν να αυτοματοποιηθούν εύκολα χωρίς να απαιτείται κωδικοποίηση. Εντοπίζει αυτόματα τις ασυνέπειες της διεπαφής χρήστη σε διαφορετικές πλατφόρμες. Υποστηρίζει επίσης τη δοκιμή των στοιχείων του βιβλίου.
Σας επιτρέπει να κάνετε οπτικές δοκιμές σε συνδυασμό με λειτουργικές δοκιμές στην ίδια δοκιμαστική λειτουργία που αυξάνει έτσι τη συνολική κάλυψη δοκιμών. Οι εταιρείες που χρησιμοποιούν το screener.io περιλαμβάνουν Yammer, Microsoft, uber κ.λπ.
Το πακέτο Starter αυτού του εργαλείου θα σας κοστίσει περίπου 249 $ / μήνα, το πακέτο Perform κοστίζει 499 $ / μήνα και το πακέτο Enterprise έχει προσαρμοσμένη τιμολόγηση ανάλογα με τις απαιτήσεις σας.
Δικτυακός τόπος: Screener.io
# 5) τελική δοκιμή
Το endtest είναι μια πλατφόρμα δοκιμών UI που υποστηρίζει δοκιμές αυτοματοποίησης χωρίς κωδικό με τη βοήθεια της μηχανικής μάθησης. Σας επιτρέπει να δημιουργείτε γρήγορα τις αυτοματοποιημένες δοκιμές, να τις αποθηκεύετε και να τις εκτελείτε απευθείας στο cloud. Έχουν επίσης μια επέκταση χρωμίου μέσω της οποίας μπορείτε να καταγράψετε τις δοκιμές.
Αυτό το εργαλείο διαθέτει πολλές δυνατότητες, όπως δημιουργία τυχαίων δεδομένων δοκιμών, προηγμένος ισχυρισμός, αυτόματη δημιουργία αντιγράφων ασφαλείας, γεωγραφική τοποθεσία, ζωντανά βίντεο, σύγκριση στιγμιότυπου οθόνης κ.λπ.
Δικτυακός τόπος: δοκιμή
συμπέρασμα
Σε αυτό το σεμινάριο, συζητήσαμε πόσο σημαντική είναι η δοκιμή οπτικής επικύρωσης στο σημερινό σενάριο όπου η εφαρμογή λογισμικού απαιτείται να λειτουργεί καλά σε πολλαπλές διαμορφώσεις μεγεθών οθόνης, κινητών συσκευών, λειτουργικών συστημάτων, αναλύσεων οθόνης κ.λπ.
Εάν θέλετε μια καλή εμπειρία χρήστη, τότε η δοκιμή οπτικής επικύρωσης είναι εξίσου σημαντική με τη λειτουργική δοκιμή. Οπτικές δοκιμές και λειτουργικές δοκιμές, όταν συνδυάζονται μπορούν να παρέχουν ευρεία κάλυψη δοκιμών.
Υπάρχει μια μεγάλη ποικιλία ανοιχτών πηγών και εμπορικών εργαλείων και πλαισίων για δοκιμή οπτικής επικύρωσης. Συζητήσαμε μερικά από τα καλύτερα εργαλεία σε αυτό το σεμινάριο. Αυτά τα εργαλεία μπορούν πράγματι να σας βοηθήσουν με τον αυτοματοποιημένο οπτικό έλεγχο και τον έλεγχο οπτικής παλινδρόμησης.
Καλή ανάγνωση!
Συνιστώμενη ανάγνωση
- Τα καλύτερα εργαλεία δοκιμής λογισμικού 2021 (QA Test Automation Tools)
- Δοκιμή άλφα και δοκιμή beta (ένας πλήρης οδηγός)
- Τελευταίος οδηγός δοκιμής επικύρωσης
- 11 καλύτερα εργαλεία αυτοματισμού για τη δοκιμή εφαρμογών Android (Εργαλεία δοκιμών εφαρμογών Android)
- Δοκιμή ασφάλειας δικτύου και καλύτερα εργαλεία ασφάλειας δικτύου
- Λειτουργική δοκιμή Vs Μη λειτουργική δοκιμή
- Testing Primer eBook Λήψη
- Οι διαφορές μεταξύ δοκιμών μονάδας, δοκιμής ολοκλήρωσης και δοκιμής λειτουργίας