Οδηγός δοκιμών GUI: Ένας πλήρης οδηγός δοκιμών διεπαφής χρήστη (UI)

gui testing tutorial

Ένας πλήρης οδηγός για τη δοκιμή GUI: Οδηγός δοκιμών διεπαφής χρήστη

Τι είναι η δοκιμή GUI;

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

πώς να καλέσετε μια συνάρτηση στο κύριο python

Η οπτική δυναμική μιας εφαρμογής Ιστού διαδραματίζει καθοριστικό ρόλο στην αποδοχή μιας εφαρμογής με τον χρήστη.

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

Τι θα μάθετε:

• Δοκιμή διεπαφών χρήστη
• Προσέγγιση δοκιμών UI
• Συχνά εμφανιζόμενα ελαττώματα UI
• Βασικές απαιτήσεις διεπαφής χρήστη και δοκιμής ευχρηστίας
• Μερικά βασικά στοιχεία
• Μερικά προηγμένα στοιχεία
• Καταστάσεις στοιχείων UI
• Εργαλεία δοκιμών GUI
• Δείγμα Θήκες δοκιμής GUI
• συμπέρασμα
• Συνιστώμενη ανάγνωση

Δοκιμή διεπαφών χρήστη

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

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

Η δοκιμή προγράμματος περιήγησης περιλαμβάνει δύο παρακάτω τύπους:

Δοκιμή λειτουργικότητας

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

Δοκιμή UI

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

• Οι περιοχές που καλύπτονται στις δοκιμές διεπαφής χρήστη είναι η ευχρηστία, η εμφάνιση και η αίσθηση, τα στοιχεία ελέγχου πλοήγησης / γραμμές πλοήγησης, οι οδηγίες και το στυλ τεχνικών πληροφοριών, εικόνες, πίνακες, προσβασιμότητα κ.λπ.
• Για δοκιμές προσβασιμότητας, πρέπει να ελέγξουμε με τις οδηγίες προσβασιμότητας περιεχομένου W3C-Web.

Κάντε κλικ εδώ για να λάβετε την οδηγία W3C.

Προσέγγιση δοκιμών UI

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

Το δεύτερο βήμα είναι να τροποποιήσετε αυτές τις περιπτώσεις δοκιμής σύμφωνα με τις απαιτήσεις δοκιμών UI.

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

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

Για παράδειγμα, Το drop-down στο windows-firefox θα είναι διαφορετικό από το mac-firefox. Τέτοια ζητήματα είναι αποδεκτά, καθώς πρόκειται για βοηθητικά προγράμματα λειτουργικού συστήματος και πρέπει να τα αποδεχθούμε ως τέτοια.

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

Συχνά εμφανιζόμενα ελαττώματα UI

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

Βασικές απαιτήσεις διεπαφής χρήστη και δοκιμής ευχρηστίας

Οι βασικές απαιτήσεις δοκιμών διεπαφής χρήστη της εφαρμογής ιστού είναι:

1. Διαθεσιμότητα διαφόρων στοιχείων σε διεπαφή χρήστη
2. Διάφορες καταστάσεις του στοιχείου διεπαφής χρήστη

Συστατικό:

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

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

Μερικά βασικά στοιχεία

Πλαίσιο ελέγχου: Μπορείτε να επιλέξετε μία ή περισσότερες επιλογές από το στοιχείο του πλαισίου ελέγχου

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

Μερικά προηγμένα στοιχεία

1. Ακορντεόν: Πολλά στοιχεία μπορούν να στοιβάζονται κάθετα χρησιμοποιώντας αυτό το στοιχείο. Κάθε στοιχείο μπορεί να επεκταθεί για να δείτε τα περιεχόμενα σε αυτό. Μπορούν επίσης να επεκταθούν περισσότερα από ένα στοιχεία.

2. Ψωμιά: Αυτό είναι ένα πολύ χρήσιμο στοιχείο που βοηθά στην πλοήγηση στον ιστότοπο. Ο χρήστης μπορεί να προσδιορίσει την τρέχουσα τοποθεσία του στον ιστότοπο από αυτό το στοιχείο.

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

Κάντε κλικ εδώ για να λάβετε πιο χρήσιμες πληροφορίες σχετικά με τα στοιχεία διεπαφής χρήστη

Καταστάσεις στοιχείων UI

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

Οι διάφορες καταστάσεις διεπαφής χρήστη για ένα βασικό στοιχείο είναι:

1. Μη συμπληρωμένη κατάσταση
2. Γεμάτη κατάσταση και εστίαση
3. Κανονική κατάσταση και προεπιλεγμένη κατάσταση
4. Hover State
5. Κατάσταση με ειδικές ανάγκες
6. Μάσκα

Μη συμπληρωμένη κατάσταση:

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

Συμπληρωμένη κατάσταση:

Ένα στοιχείο με τιμή που έχει εισαχθεί από το χρήστη είναι κατάσταση πλήρωσης.

Στο Focus State:

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

Κανονική κατάσταση:

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

Προεπιλεγμένη κατάσταση:

Ένα στοιχείο που εμφανίζει αυτόματα συμπληρωμένη τιμή από το διακομιστή / backend. Αυτή η τιμή μπορεί επίσης να επεξεργαστεί από τον χρήστη σε ορισμένα σενάρια.

Hover State:

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

Πριν από το Hover:

Στο Hover:

κατεβάστε το mongodb για windows 10 64 bit

Κατάσταση ατόμων με ειδικές ανάγκες:

Το στοιχείο είναι απενεργοποιημένο και ο χρήστης δεν μπορεί να επεξεργαστεί τα πεδία.

Ενεργοποιημένη κατάσταση

Κατάσταση με ειδικές ανάγκες

Μάσκα:

Ευαίσθητα δεδομένα όπως ο κωδικός πρόσβασης μπορούν να κρυφτούν χρησιμοποιώντας αυτό το στοιχείο.

Οι βασικές απαιτήσεις δοκιμών χρηστικότητας της εφαρμογής ιστού είναι:

1. Οικογένεια γραμματοσειρών
2. Μέγεθος γραμματοσειράς
3. Χρώμα
4. Διάστημα γραμμάτων
5. Υψος γραμμής
6. Επικύρωση ιστορικού
7. Συμπλήρωση / αδιαφάνεια
8. Μετρήσεις των συστατικών όπως μήκος, πλάτος και πλάτος
9. Τοποθεσία / απόσταση μεταξύ των στοιχείων σε μια οθόνη

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

Λεπτομέρειες για διάφορα πρόσθετα προγράμματος περιήγησης

Πλεονεκτήματα των πρόσθετων:

• Κερδίζει χρόνο
• Εύχρηστος
• Είναι οικονομικά αποδοτικό

Περιορισμός πρόσθετων:

• Σφάλμα παράλλαξης κατά τη χρήση της μέτρησης
• Συμβατό σε όλες τις εφαρμογές
• Συμβατό με πολλά προγράμματα περιήγησης

Αναφορές για πρόσθετα:

• Επιθεωρητής Ιστού: Εργαλεία Apple Dev
• Firebug: Firebug Wiki
• Μετρήστε το
• Colorzilla

Εργαλεία δοκιμών GUI

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

• Σελήνιο
• Ενοποιημένος λειτουργικός έλεγχος HP
• Αγγούρι
• Κωδικοποιημένο περιβάλλον χρήστη
• Πράγματι

Μια λεπτομερής λίστα εργαλείων GUI είναι διαθέσιμη στο ίδιο το softwaretestinghelp.com! Παρακαλώ πατήστε εδώ .

Δείγμα Θήκες δοκιμής GUI

1) Επαληθεύστε τη λειτουργία των βελών καρουζέλ και των ανιχνευτών τρόπων
2) Βεβαιωθείτε ότι το πεδίο κωδικού πρόσβασης δέχεται τιμές μόνο σε κατάσταση κάλυψης
3) Βεβαιωθείτε ότι το κουμπί 'αποθήκευση' παραμένει ανενεργό έως ότου εισαχθούν όλα τα απαιτούμενα πεδία
4) Επαληθεύστε ότι επιτρέπεται στον χρήστη να πλοηγηθεί στο πάνω μέρος της σελίδας χρησιμοποιώντας τη γραμμή 'Επάνω'
5) Βεβαιωθείτε ότι το κατάλληλο μήνυμα εμφανίζεται όταν τα εφαρμοσμένα φίλτρα δεν ανακτούν αποτελέσματα
6) Επαληθεύστε την πλοήγηση από συνδέσμους που διατίθενται στις κεφαλίδες και τα υποσέλιδα
7) Βεβαιωθείτε ότι η ευθυγράμμιση των κουμπιών επιλογής είναι ακριβής
8) Βεβαιωθείτε ότι μπορούν να επιλεγούν πολλές επιλογές στα πλαίσια ελέγχου ταυτόχρονα
9) Βεβαιωθείτε ότι ο τίτλος κάθε ενότητας είναι με έντονα γράμματα
10) Επαληθεύστε την αλλαγή χρώματος των υπερσυνδέσμων κάνοντας κλικ

συμπέρασμα

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

Συνιστώμενη ανάγνωση

• Τα καλύτερα εργαλεία δοκιμής λογισμικού 2021 (QA Test Automation Tools)
• Δοκιμή άλφα και δοκιμή beta (Ένας πλήρης οδηγός)
• Testing Primer eBook Λήψη
• Λειτουργική δοκιμή εναντίον μη λειτουργική δοκιμή
• Πλήρης οδηγός δοκιμής επαλήθευσης έκδοσης (BVT Testing)
• Τι είναι το Interface Testing; Μάθετε τους τύπους, τη στρατηγική και τα εργαλεία του
• Οδηγός εξωτερικής ανάθεσης QA: Εταιρείες εξωτερικού ελέγχου δοκιμών λογισμικού
• Τύποι δοκιμών λογισμικού: Διαφορετικοί τύποι δοκιμών με λεπτομέρειες