Tests d'interface graphique : cas de test et exemples

Pour comprendre les tests d'interface graphique, commençons par comprendre ce qu'est une interface graphique.

Qu'est-ce que l'interface graphique ?

Il existe deux types d'interfaces pour une application informatique. L'interface de ligne de commande est l'endroit où vous tapez du texte et l'ordinateur répond à cette commande. GUI signifie Graphical User Interface où vous interagissez avec l'ordinateur en utilisant des images plutôt que du texte.

Voici les éléments de l'interface graphique qui peuvent être utilisés pour l'interaction entre l'utilisateur et l'application :

Les tests GUI sont une validation des éléments ci-dessus.

Qu’est-ce que le test GUI ?

Test de l'interface graphique est un type de test logiciel qui vérifie l'interface utilisateur graphique du logiciel. Le but des tests d'interface utilisateur graphique (GUI) est de garantir que les fonctionnalités des applications logicielles fonctionnent conformément aux spécifications en vérifiant les écrans et les commandes telles que les menus, les boutons, les icônes, etc.

L'interface graphique (GUI) est ce que l'utilisateur voit. Visitez guru99.com : la page d'accueil qui s'affiche est l'interface graphique du site. Le code source reste caché ; seule l'interface est visible. Les tests d'interface graphique se concentrent donc sur la structure de conception et sur le bon affichage des images.

Dans la capture d'écran ci-dessus, les tests d'interface graphique commencent par vérifier que chaque image est parfaitement visible dans différents navigateurs. Les vérifications suivantes sur cette même page sont :

• Les liens sont disponibles et chaque bouton fonctionne lorsqu'on clique dessus.
• Le redimensionnement de l'écran n'entraîne jamais la réduction, le recadrage ou le chevauchement des images ou du texte.
• Aucun élément de la mise en page ne se désorganise lorsque la fenêtre du navigateur est réduite.

Astuce : Avant de signaler un défaut, affichez la même page aux résolutions 1920×1080, 1366×768 et 375×812. De nombreux rapports de « mise en page défectueuse » correspondent simplement à des points d’arrêt non testés.

Besoin de tests d'interface graphique

Le concept de base des tests d'interface graphique est maintenant clair. Voici quelques questions qui vous viendront sans doute à l'esprit :

• Pourquoi faire des tests GUI ?
• Est-ce vraiment nécessaire ?
• Tester les fonctionnalités et la logique d'une application ne suffit-il pas ? Pourquoi consacrer du temps supplémentaire à l'interface ?

Pour trouver la réponse, mettez-vous à la place de l'utilisateur, et non à celle du testeur. Un utilisateur ignore tout du développement de l'application. C'est l'interface qui détermine s'il continue à l'utiliser ou s'il l'abandonne.

Un utilisateur lambda observe d'abord le design et l'apparence de l'application, ainsi que la facilité de compréhension de l'interface. Si l'interface ne lui convient pas ou si l'application lui paraît complexe, il ne reviendra pas. L'interface graphique est donc un point crucial, et des tests rigoureux doivent être effectués pour garantir son bon fonctionnement.

Types de tests d'interface graphique

Comprendre l'importance de l'interface ne représente que la moitié du problème. Les tests d'interface graphique regroupent cinq types de tests, chacun répondant à une question différente concernant le même écran.

• Tests fonctionnels de l'interface graphique : Confirme que chaque commande remplit sa fonction. Étroitement lié à test fonctionelElle demande si un bouton permet de soumettre une requête, si une liste déroulante permet de filtrer et si un champ accepte des entrées valides.
• Tests d'utilisation: Mesure la facilité avec laquelle une personne réelle accomplit une tâche. Tests d'utilisation examine la profondeur de la navigation, la lisibilité et l'utilité réelle des messages d'erreur.
• Test de compatibilité : Affiche les mêmes écrans sur tous les navigateurs, systèmes d'exploitation et tailles d'appareil. Tests multi-navigateurs Détecte les défauts de rendu qui n'apparaissent que dans un seul moteur.
• Tests d'accessibilité : Vérifie la navigation au clavier, les étiquettes du lecteur d'écran et le contraste des couleurs par rapport aux WCAG. Test d'accessibilité est désormais une obligation de conformité sur de nombreux marchés, et non plus une option.
• Tests visuels et de performance : Compare les captures d'écran rendues à une valeur de référence et mesure la rapidité d'affichage et de réponse de l'interface, ainsi que le chevauchement.ping au Test de performance.

La plupart des équipes utilisent ces cinq fonctionnalités, mais leur attribuent une importance différente : un site web public privilégie la compatibilité et l’accessibilité, un tableau de bord interne les contrôles fonctionnels.

Que vérifie-t-on lors des tests d'interface graphique ?

La liste de contrôle suivante garantira des tests détaillés de l'interface graphique dans les tests logiciels.

• Vérifiez tous les éléments de l'interface graphique pour la taille, la position, la largeur, la longueur et l'acceptation des caractères ou des chiffres. Par exemple, vous devez être en mesure de fournir des entrées dans les champs de saisie.
• Vérifiez que vous pouvez exécuter la fonctionnalité prévue de l'application à l'aide de l'interface graphique.
• Vérifiez que les messages d'erreur s'affichent correctement
• Vérifiez la démarcation claire des différentes sections à l'écran
• Vérifier que la police utilisée dans une application est lisible
• Vérifiez que l'alignement du texte est correct
• Vérifiez que la couleur de la police et des messages d'avertissement est esthétique
• Vérifiez que les images ont une bonne clarté
• Vérifiez que les images sont correctement alignées
• Vérifiez le positionnement des éléments de l'interface graphique pour différentes résolutions d'écran.

Techniques de test de l'interface graphique

Une fois la liste de contrôle établie, la décision suivante consiste à déterminer comment l'exécuter. Techniques de test de l'interface graphique peut être classé en trois parties :

Tests manuels

Dans le cadre de cette approche, les écrans graphiques sont vérifiés manuellement par les testeurs conformément aux exigences énoncées dans le document sur les exigences commerciales.

Enregistrer et rejouer

Les tests d'interface graphique peuvent être réalisés à l'aide d'outils d'automatisation. Le processus se déroule en deux étapes : l'enregistrement, qui capture les étapes de test, et la lecture, qui exécute ces étapes sur l'application testée. Exemples d'outils : QTP.

Tests basés sur des modèles

Un modèle est une représentation graphique du comportement d'un système. Il nous aide à comprendre et à prédire ce comportement. Les modèles facilitent la génération de cas de test efficaces à partir des exigences du système. Le diagramme ci-dessous illustre comment un modèle oriente la génération des tests :

Les éléments suivants doivent être pris en compte pour ce test basé sur un modèle :

• Construisez le modèle
• Déterminer les entrées pour le modèle
• Calculer le résultat attendu pour le modèle
• Exécutez les tests
• Comparez le résultat réel avec le résultat attendu
• Une décision sur d'autres actions sur le modèle

Certaines des techniques de modélisation à partir desquelles des cas de test peuvent être dérivés :

• Graphiques – Représente l’état d’un système et vérifie l’état après quelques entrées.
• Tableaux de décision – Tableaux utilisés pour déterminer les résultats pour chaque entrée appliquée

Les tests basés sur des modèles sont une technique évolutive permettant de générer des cas de test à partir des exigences.. Son principal avantage, par rapport aux deux méthodes ci-dessus, est qu'il peut déterminer les états indésirables que votre interface graphique peut atteindre.

Tests d'interface graphique manuels vs automatisés

Deux de ces trois techniques sont manuelles et une est automatisée, ce qui soulève la question pratique de savoir où chacune a sa place. Test manuel Il place un humain devant l'écran, ce qui permet de repérer les flux de travail maladroits, les formulations maladroites et les animations qui semblent inappropriées — des jugements qu'aucun script ne peut porter.

L'automatisation des tests Ce système permet de rejouer les mêmes interactions des milliers de fois sans fatigue, ce qui en fait la solution idéale pour des tests de régression stables et pour exécuter une même suite de tests sur plusieurs navigateurs. En contrepartie, la maintenance s'avère complexe : les scripts d'interface graphique automatisés cessent de fonctionner dès qu'un localisateur ou une mise en page est modifié. C'est pourquoi la plupart des équipes expérimentées optent pour une approche hybride, automatisant les tâches répétitives et réservant les ressources humaines aux aspects expérimentaux.

Facteur	Tests manuels d'interface graphique	Tests automatisés d'interface graphique
Meilleur pour	Nouveaux écrans, vérifications exploratoires, aspect et convivialité	Suites de régression stables, tests multiplateformes
Vitesse par cycle	Lent, limité par les heures de test	Rapide, fonctionne sans surveillance toute la nuit
Coût initial	Low	Niveau élevé (configuration de scripts et de frameworks)
Entretien	Aucune autre chose que la mise à jour de la liste de contrôle	Important lorsque l'interface change
Saisit les problèmes subjectifs	Oui	Non

Exemples de cas de test de test d'interface graphique

Les tests GUI impliquent essentiellement

1. Tester la taille, la position, la largeur, la hauteur des éléments.
2. Test des messages d'erreur qui s'affichent.
3. Test des différentes sections de l'écran.
4. Test de la police si elle est lisible ou non.
5. Test de l'écran dans différentes résolutions à l'aide de zooms avant et arrière comme 640 x 480, 600×800, etc.
6. Tester l'alignement des textes et d'autres éléments comme les icônes, les boutons, etc. sont au bon endroit ou non.
7. Test des couleurs des polices.
8. Test des couleurs des messages d'erreur, messages d'avertissement.
9. Tester si l'image a une bonne clarté ou non.
10. Test de l'alignement des images.
11. Test de l'orthographe.
12. L'utilisateur ne doit pas être frustré lors de l'utilisation de l'interface système.
13. Vérifier si l'interface est àtractive ou non.
14. Test des barres de défilement en fonction de la taille de la page le cas échéant.
15. Test des champs désactivés le cas échéant.
16. Test de la taille des images.
17. Test des titres pour savoir s'ils sont correctement alignés ou non.
18. Test de la couleur du lien hypertexte.

Démo : Comment faire un test GUI

La liste ci-dessus devient beaucoup plus claire lorsqu'elle est appliquée à un écran réel ; nous utiliserons donc ici quelques exemples de cas de test pour la boîte de dialogue suivante.

Vous trouverez ci-dessous un exemple de cas de test, comprenant des scénarios de tests d'interface utilisateur et d'utilisabilité. Si vous débutez dans la rédaction de cas de test, consultez la documentation. comment écrire des cas de test d'abord.

Cas de test 01 – Vérifiez que la zone de texte portant l'étiquette «Dossier d'origine» est correctement aligné.

Cas de test 02 – Vérifiez que la zone de texte portant l'étiquette «Forfait» est correctement aligné.

Cas de test 03 – Vérifiez que l’étiquette porte le nom «Explorer" est un bouton qui se trouve à la fin du texteBox avec le nom "Dossier d'origine. »

Cas de test 04 – Vérifiez que l’étiquette porte le nom «Explorer" est un bouton qui se trouve à la fin du texteBox avec le nom "Forfait. »

Cas de test 05 – Vérifiez que la zone de texte portant l'étiquette «Nom» est correctement aligné.

Cas de test 06 – Vérifiez que l’étiquette «Modificateurs» se compose de 4 boutons radio portant le nom public, par défaut, privé, protégé.

Cas de test 07 – Vérifiez que l’étiquette «Modificateurs» se compose de 4 boutons radio correctement alignés dans une rangée.

Cas de test 08 – Vérifiez que l’étiquette «Superclasse" sous l'étiquette "Modificateurs» consiste en une liste déroulante qui doit être correctement alignée.

Cas de test 09 – Vérifiez que l’étiquette «Superclasse" se compose d'un bouton avec l'étiquette "Explorer» dessus qui doit être correctement aligné.

Cas de test 10 – Vérifiez que lorsque vous cliquez sur un bouton radio, le pointeur de souris par défaut est remplacé par un pointeur de souris en forme de main.

Cas de test 11 – Vérifiez que l’utilisateur ne doit pas pouvoir saisir de texte dans la liste déroulante de «Superclasse. »

Cas de test 12 – Vérifier qu’une erreur appropriée doit être générée si une option a été sélectionnée par erreur.

Cas de test 13 – Vérifiez que l'erreur doit être générée en ROUGE partout où cela est nécessaire.

Cas de test 14 – Vérifiez que les messages d'erreur comportent des étiquettes appropriées.

Cas de test 15 – Vérifiez que les boutons radio individuels doivent être sélectionnés par défaut à chaque fois.

Cas de test 16 – Vérifiez que la touche TAB fonctionne correctement pendant le saut.ping sur un autre champ, à côté du précédent.

Cas de test 17 – Vérifiez que toutes les pages contiennent le titre approprié.

Cas de test 18 – Vérifiez que le texte de la page est correctement aligné.

Cas de test 19 – Vérifiez qu’après la mise à jour de chaque champ, un message de confirmation approprié s’affiche.

Cas de test 20 – Vérifiez qu’une seule case radio doit être sélectionnée et que plusieurs cases à cocher peuvent être sélectionnées.

Défis des tests d'interface graphique

Rédiger ces cas est simple ; gardezping Les maintenir en vie sur plusieurs versions n'est pas chose aisée. En génie logiciel, le problème le plus courant lors de la réalisation de ces versions est le suivant : Les tests de régression est que l'interface graphique de l'application change fréquemment. Il est très difficile de tester et d’identifier s’il s’agit d’un problème ou d’une amélioration. Le problème se manifeste lorsque vous ne disposez d'aucun document concernant les modifications de l'interface graphique.

⚠️ Attention : Les scripts qui localisent les éléments par leurs coordonnées à l'écran ou par des identifiants générés automatiquement ne fonctionneront plus lors de la prochaine compilation. Intégrez la stratégie de localisation dès la conception, et non comme une simple formalité.

Outils de test d'interface graphique

L'outillage adéquat absorbe une grande partie de ces variations. Voici une liste d'outils populaires Outils de test d'interface graphique :

1. Selenium
2. QTP
3. Cucumber
4. Test de la soie
5. TestComplete
6. Testeur d'interface graphique Squish

Cliquez ici pour apprendre Selenium, QTP & Cucumber.

Vous trouverez ci-dessous des outils open source disponibles pour effectuer des tests d'interface utilisateur automatisés.

Produit	Sous licence
AutoHotkey	GPL
Selenium	Apache
Sikuli	MIT
Cadre de robot	Apache
Eau	BSD
Boîte à outils Dojo	BSD

Sikuli est basé sur l'image, utile lorsqu'une commande ne dispose pas d'un localisateur fiable ; Selenium reste la valeur par défaut pour tests d'applications Web.

FAQ