Tutoriel de test GUI: un guide de test complet de l'interface utilisateur (UI)

gui testing tutorial

Un guide complet de test GUI: Tutoriel de test d'interface utilisateur

Qu'est-ce que le test GUI?

Le test GUI est un processus de test de l’interface utilisateur graphique de l’application pour garantir une fonctionnalité appropriée conformément aux spécifications. Cela implique de vérifier les composants de l'application tels que les boutons, les icônes, les cases à cocher, la couleur, le menu, les fenêtres, etc.

comment lancer un fichier .jar

La dynamique visuelle d'une application web joue un rôle central dans l'acceptation d'une application avec l'utilisateur.

Par conséquent, cette acceptation aboutit à amener un esclavage de longue date des clients avec l'application du client. À l'ère de la numérisation, l'interface utilisateur évolue rapidement et détient une forteresse clé pour attirer la nouvelle foule de clients potentiels.

Ce que vous apprendrez:

• Test de l'interface utilisateur
• Approche pour les tests d'interface utilisateur
• Défauts d'interface utilisateur courants
• Exigences clés des tests d'interface utilisateur et d'utilisabilité
• Quelques composants de base
• Quelques composants avancés
• États des composants de l'interface utilisateur
• Outils de test GUI
• Exemples de cas de test GUI
• Conclusion
• lecture recommandée

Test de l'interface utilisateur

Pour s'assurer que l'esthétique visuelle de l'application Web est bien acceptée, les tests d'interface utilisateur et d'utilisabilité deviennent un aspect clé de la pratique globale d'AQ. Toute application accessible via une URL est une application Web. Dans de telles applications, nous testons principalement le frontal de l'application qui doit être utilisé par l'utilisateur final.

Chaque navigateur affiche les pages Web différemment, il est donc important que les pages aient la même apparence sur différents navigateurs. Si une page Web est affichée déformée et non gérée, cela incitera les utilisateurs à quitter la page Web. Un site Web doit donc subir des tests d'interface utilisateur pour de meilleurs résultats.

Les tests de navigateur comprennent les deux types ci-dessous:

Test de fonctionnalité

Test de différentes fonctions dans toute l'application. Il s'agit de valider toutes les navigations ainsi que toutes les valeurs de champ qui sont présentes dans les pages frontales en utilisant tous les scénarios aussi bien positifs que négatifs.

Test de l'interface utilisateur

Test de l'aspect et de la convivialité de la page Web. Le facteur d'apparence et de convivialité comprend le type d'affichage, la police, l'alignement, le bouton radio, la case à cocher, etc.

• Les domaines couverts par les tests de l'interface utilisateur sont la convivialité, l'apparence et la convivialité, les commandes de navigation / barres de navigation, les instructions et le style d'informations techniques, les images, les tableaux, l'accessibilité, etc.
• Pour tester l'accessibilité, nous devons vérifier les directives d'accessibilité du contenu du W3C-Web.

Cliquez sur Ici pour obtenir la directive W3C.

Approche pour les tests d'interface utilisateur

Nous sélectionnons un sous-ensemble de cas de test à partir de cas de test fonctionnels qui couvre toutes les fonctionnalités de l'application.

La deuxième étape consiste à modifier ces cas de test en fonction des exigences de test de l'interface utilisateur.

La prochaine étape consistera à exécuter ces cas de test; comparer le résultat avec les résultats attendus, et s'il y a une différence, alors soulevez le problème pour le même. Il n'est pas possible de tester dans tous les navigateurs. Normalement, le client décide dans quel navigateur il est nécessaire de tester.

Comme nous savons que chaque navigateur affiche la page Web différemment, nous ne pouvons donc pas nous attendre à ce que tous les navigateurs affichent une page Web exactement similaire.

Par exemple, le menu déroulant dans windows-firefox sera différent de mac-firefox. Ces problèmes sont acceptables, car il s'agit d'utilitaires de système d'exploitation et nous devons les accepter en tant que tels.

Navigateur de base: Normalement, l'application est développée pour cibler un navigateur qui devrait être utilisé principalement par les utilisateurs finaux, elle est appelée navigateur de base.

Défauts d'interface utilisateur courants

• Problèmes d'alignement des boutons
• Espace incohérent entre les étiquettes ou les zones de texte
• Étiquettes cassées, c'est-à-dire que l'étiquette d'une seule ligne s'affiche sur deux lignes
• Mauvais alignement entre les zones de texte, les icônes d'informations, les étiquettes ou les listes déroulantes
• Chevauchement de champs
• Champs incomplets
• Les données de la page sont mal alignées; certains décalés vers le haut ou vers le bas
• Dans n'importe quel navigateur, lors de la sélection d'une action, l'action correspondante ne se produit pas
• Le redimensionnement ne fonctionne pas comme prévu
• Délai d'expiration de la session très court ou très long pour certains navigateurs
• Problèmes spécifiques au navigateur - Peu de champs ne sont pas modifiables après la saisie de données dans un navigateur, mais modifiables dans un autre navigateur

Exigences clés des tests d'interface utilisateur et d'utilisabilité

Les principales exigences de test de l'interface utilisateur de l'application Web sont les suivantes:

1. Disponibilité de divers composants dans une interface utilisateur
2. Différents états du composant UI

Composant:

Un composant est un bloc de construction, qui peut être utilisé avec la combinaison de plusieurs autres composants pour former une application. Les composants peuvent être réutilisés dans toute l'application.

Les exemples d'un composant incluent le bouton, le champ de texte, l'auto-suggestion, la case à cocher, la liste déroulante, etc.

Quelques composants de base

Case à cocher: Une ou plusieurs options peuvent être sélectionnées à partir du composant case à cocher

Boutons radio: Lorsqu'une seule option doit être sélectionnée, les boutons radio sont utiles

Quelques composants avancés

1. Accordéon: Plusieurs éléments peuvent être empilés verticalement à l'aide de ce composant. Chaque élément peut être développé pour afficher son contenu. Plus d'un élément peut également être développé.

2. Fil d'Ariane: C'est un composant très utile qui facilite la navigation sur le site Web. L'utilisateur peut identifier son emplacement actuel sur le site Web à partir de ce composant.

3. Carrousel: Plusieurs ensembles d'éléments d'information peuvent être incorporés dans un composant de carrousel. Les repères de chemin en bas indiquent que plus d'articles sont présents. Les flèches aident à la navigation dans le carrousel. Habituellement, la navigation carrousel est configurée comme une boucle continue.

Cliquez sur Ici pour obtenir des informations plus utiles sur les composants de l'interface utilisateur

États des composants de l'interface utilisateur

La disponibilité des composants est uniquement basée sur les directives des exigences du projet. Cela variera d'un projet à l'autre.

Les différents états de l'interface utilisateur pour un composant de base sont:

1. État non rempli
2. État rempli et mise au point
3. État normal et état par défaut
4. État de survol
5. État désactivé
6. État masqué

État non rempli:

Avant de saisir une valeur dans un composant, on dit qu'il s'agit d'un état non rempli. L'état Non rempli affiche le texte de l'espace réservé, le cas échéant. Le ci-dessous est un composant de champ de texte.

État rempli:

Un composant avec une valeur saisie par l'utilisateur est rempli à l'état.

Sur l'état du focus:

L'utilisateur revisite un composant déjà rempli. Le composant doit afficher le curseur, indiquant que le composant spécifique en cours de mise au point

État normal:

L'affichage d'un composant avec la valeur déjà entrée par l'utilisateur dans l'écran est décrit l'état normal.

État par défaut:

Un composant qui affiche une valeur remplie automatiquement à partir du serveur / backend. Cette valeur peut également être modifiée par l'utilisateur dans certains scénarios.

État du survol:

Le survol de la souris sur le composant met en évidence le composant indiquant l'action de survol.

Avant le survol:

En vol stationnaire:

exemples de scénarios de test de bout en bout

État désactivé:

Le composant est désactivé et l'utilisateur ne peut pas modifier les champs.

État activé

État désactivé

État masqué:

Les données sensibles telles que le mot de passe peuvent être masquées à l'aide de ce composant.

Les principales exigences de test d'UTILISATION de l'application Web sont les suivantes:

1. Famille de polices
2. Taille de police
3. Couleur
4. L'espacement des lettres
5. Hauteur de la ligne
6. Validation en arrière-plan
7. Remplissage / Opacité
8. Mesures des composants comme la longueur, la largeur et la largeur
9. Emplacement / espacement entre les composants dans un écran

Les fonctionnalités d'utilisabilité ci-dessus peuvent être testées dans le code ou à l'aide de l'élément inspect dans l'application. Un autre moyen plus simple consiste à utiliser des modules complémentaires. Les modules complémentaires peuvent varier en fonction du navigateur dans lequel l'application doit être testée.

Détails de divers modules complémentaires de navigateur

Avantages des modules complémentaires:

• Gain de temps
• Facile à utiliser
• C'est rentable

Limitation des modules complémentaires:

• Erreur de parallaxe lors de l'utilisation de la mesure
• Compatible avec toutes les applications
• Compatible avec plusieurs navigateurs

Références pour les modules complémentaires:

• Inspecteur Web: Outils de développement Apple
• Pyromane: Wiki Firebug
• Mesure le
• Colorzilla

Outils de test GUI

Plusieurs outils sont disponibles dans le monde de la technologie qui aideraient les testeurs à tester l'interface utilisateur.

• Sélénium
• Test fonctionnel unifié HP
• Concombre
• Interface utilisateur codée
• Réellement

Une liste détaillée des outils GUI est disponible dans softwaretestinghelp.com lui-même! Cliquez s'il vous plait Ici .

Exemples de cas de test GUI

1) Vérifiez le fonctionnement des flèches du carrousel et des localisateurs de chemin
2) Vérifiez que le champ du mot de passe n'accepte les valeurs que dans un état masqué
3) Vérifiez que le bouton «enregistrer» reste inactif jusqu'à ce que tous les champs obligatoires soient saisis
4) Vérifiez que l'utilisateur est autorisé à naviguer vers le haut de la page à l'aide de la barre 'Haut'
5) Vérifiez que le message approprié s'affiche lorsque les filtres appliqués ne récupèrent aucun résultat
6) Vérifiez la navigation à partir des liens disponibles dans les en-têtes et pieds de page
7) Vérifiez que l'alignement des boutons radio est précis
8) Vérifiez que plusieurs options dans les cases à cocher peuvent être sélectionnées à la fois
9) Vérifiez que le titre de chaque section est en caractères gras
dix) Vérifiez le changement de couleur des hyperliens en cliquant

Conclusion

Un site Web est l'âme de nombreuses entreprises. Il est très nécessaire de s'assurer qu'il a l'air bien et qu'il fonctionne de la même manière sur différents navigateurs et plates-formes. Ainsi, les tests d'interface utilisateur sont très importants et garantissent une large base de clients et une valeur ajoutée pour l'entreprise.

lecture recommandée

• Meilleurs outils de test de logiciels 2021 (Outils d'automatisation des tests QA)
• Test alpha et test bêta (un guide complet)
• Téléchargement de l'e-book 'Testing Primer'
• Test fonctionnel vs test non fonctionnel
• Build Verification Testing (BVT Testing) Guide complet
• Qu'est-ce que le test d'interface? Connaître ses types, sa stratégie et ses outils
• Guide d'externalisation de l'assurance qualité: sociétés d'externalisation de tests de logiciels
• Types de tests logiciels: différents types de tests avec des détails