Tutoriel de Test d’Interface graphique: Un Guide de Test d’Interface Utilisateur (UI) Complet

Un Guide Complet de Test d’Interface Graphique: Tutoriel de Test d’Interface Utilisateur

Qu’est-ce que le Test d’Interface graphique?

Le test de l’interface graphique est un processus de test de l’interface utilisateur graphique de l’application pour assurer 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.

La dynamique visuelle d’une application web joue un rôle central dans l’acceptation d’une application auprès de l’utilisateur.

Par conséquent, cette acceptation entraîne une servitude de longue durée des clients avec l’application du client. En cette ère de numérisation, l’interface utilisateur change rapidement et constitue une forteresse clé pour attirer la nouvelle foule de clients possibles.

Test d’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 de l’assurance qualité. 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 la page soit identique sur différents navigateurs. Si une page Web est affichée déformée et non gérée, cela conduira les téléspectateurs à quitter la page Web. Ainsi, un site Web devrait subir des tests d’interface utilisateur pour de meilleurs résultats.

Le test du navigateur comprend les deux types suivants :

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 champs présentes dans les pages frontales en utilisant tous les scénarios positifs et négatifs.

Test de l’interface utilisateur

Test du facteur d’apparence de la page Web. Le facteur d’apparence comprend le type d’affichage, la police, l’alignement, le bouton radio, la case à cocher, etc.

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

Cliquez ici pour obtenir les directives du W3C.

Approche pour les tests d’interface utilisateur

Nous sélectionnons un sous-ensemble de cas de test parmi les 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.

L’étape suivante consistera à exécuter ces cas de test; comparer le résultat avec les résultats attendus, et s’il y a une différence, soulever 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 une page Web différemment, nous ne pouvons donc pas nous attendre à ce que tous les navigateurs affichent une page Web exactement similaire.

Par exemple, la liste déroulante dans Windows-firefox sera différente de celle de mac-firefox. De tels problèmes sont acceptables, car il s’agit d’utilitaires du système d’exploitation et nous devons les accepter en tant que tels.

Navigateur de base: Normalement, l’application est développée en ciblant un navigateur qui devrait être utilisé principalement par les utilisateurs finaux, il est appelé le navigateur de base.

Défauts courants de l’interface utilisateur

• Problèmes d’alignement des boutons
• Espace incohérent entre les étiquettes ou les zones de texte
• Étiquettes brisées, c’est-à-dire une étiquette d’une seule ligne affichée en deux lignes
• Désalignement entre les zones de texte, les icônes d’informations, les étiquettes ou les listes déroulantes
• Chevauchement des champs
• Champs incomplets
• Les données de la page sont mal alignées; un certain temps – décalé 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 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 des données dans un navigateur mais modifiables dans un autre navigateur

Clé Exigences de test d’interface utilisateur et d’utilisabilité

Les exigences clés de test d’interface utilisateur de l’application Web sont les suivantes:

1. Disponibilité de divers composants dans une interface utilisateur
2. Divers états du composant d’interface utilisateur

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.

Des exemples d’un composant incluent un Bouton, un champ de texte, un Test automatique, une case à cocher, une 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 étendu.

2. Chapelure: 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’informations peuvent être incorporés dans un composant de carrousel. Les détecteurs de chemin en bas indiquent que d’autres éléments sont présents. Les flèches aident à la navigation dans le carrousel. Habituellement, la navigation dans le carrousel est configurée comme une boucle continue.

Cliquez ici pour obtenir plus d’informations 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 relatives aux 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. Ce qui suit est un composant de champ de texte.

État rempli :

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

État de mise au point :

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à saisie par l’utilisateur à 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 de survol :

Le survol du composant par la souris met en évidence le composant indiquant l’action de survol.

Avant de survoler:

En survol:

État désactivé :

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

État activé

État désactivé

État masqué:

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

Les principales exigences de test d’UTILISABILITÉ de l’application Web sont:

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

Les fonctionnalités d’utilisation 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 des différents modules complémentaires du navigateur

Avantages des modules complémentaires:

• Gain de temps
• Facile à utiliser
• Il est rentable

Limitation des add-Ons:

• Erreur de parallaxe lors de l’utilisation de la mesure
• Compatible entre applications
• Compatible avec plusieurs navigateurs

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

• Inspecteur Web: Outils de développement Apple
• Firebug: Wiki Firebug
• Mesurez-le
• Colorzilla

Outils de test GUI

Plusieurs outils sont disponibles dans le monde de la technologie pour aider les testeurs à tester l’interface utilisateur.

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

Une liste détaillée des outils d’interface graphique est disponible dans softwaretestinghelp.com lui-même! Veuillez cliquer ici.

Exemples de cas de test de l’interface graphique

1) Vérifiez le fonctionnement des flèches du carrousel et des détecteurs de chemin
2) Vérifiez que le champ de mot de passe accepte des valeurs uniquement dans un état masqué
3) Vérifiez que le bouton « Enregistrer » reste inactif jusqu’à ce que tous les champs requis soient entrés
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é est affiché 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 les 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
10) Vérifiez le changement de couleur des hyperliens en cliquant sur

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 fonctionne de la même manière sur différentes plates-formes de navigateurs &. Ainsi, les tests d’interface utilisateur sont très importants et garantiront une large base de clients et une valeur ajoutée pour l’entreprise.