Le Test Visuel

27 Juillet 2023

par Abdelkarim AJEKAL

Share

Qu'est-ce que le Test Visuel?

Le test visual est une méthode de test des applications qui vérifie leur apparence et leur comportement dans l'interface utilisateur (IU) ou l'interface utilisateur graphique. L'objectif est de s'assurer que tous les éléments visuels tels que les couleurs, les images, les polices de caractères et les mises en page apparaissent correctement et restent cohérentes sur différents appareils, systèmes d'exploitation et navigateurs.

test-visuel
Détection de changement

Pourquoi effectuer un Test Visuel?

Les tests visuels garantissent que l'interface utilisateur du produit développé apparaît telle qu'elle est prévue pour les utilisateurs. Il permet d'atteindre cet objectif grâce à plusieurs avantages clés, notamment :

L'identification des défauts ou des problèmes dans l'interface utilisateur

Détecter les variations de l'interface utilisateur qui ne correspondent pas aux instantanés de base

Détecter les variations de l'interface utilisateur qui ne correspondent pas aux instantanés de base

Détecter les variations de l'interface utilisateur qui ne correspondent pas aux instantanés de base

En outre, les tests visuels constituent une méthode efficace pour tester les applications, permettant aux testeurs d'identifier les défauts visuels et les incohérences qui peuvent avoir un impact négatif sur l'expérience de l'utilisateur et la facilité d'utilisation de l'application.

Comment faire un Test Visuel?

Les tests visuels génèrent, analysent et comparent des instantanés de navigateur(snapshots) afin de détecter si des pixels ont été modifiés. Ces différences de pixels sont appelées "Visual diffs" (parfois appelés diffs perceptuels, pdiffs, diffs CSS, diffs UI).

test-visuel
une illustration d’un diff visuel

Pour effectuer un test visuel, vous devez suivre les étapes suivantes :

1. Utiliser un Test Runner pour écrire et exécuter des tests.

2. Utiliser un navigateur d'automatisation pour reproduire les actions de l'utilisateur sur l'application ou le site web.

3. Réaliser des captures d'écran initiales des éléments de l'interface utilisateur de l'application afin de créer une base de comparaison.

4. Exécuter le code de test en arrière-plan pour simuler les interactions de l'utilisateur et faire des captures d'écran lorsque des changements sont identifiés.

5. Comparer les captures d'écran capturées aux images de référence afin de détecter toute différence visuelle.

6. Comparer les captures d'écran capturées aux images de référence afin de détecter toute différence visuelle.

Test Visuel par rapport à Test Fonctionnel

Les tests visuels et fonctionnels sont deux types différents de tests logiciels. Les deux types de tests sont importants pour la qualité globale d’une application logicielle.

test-visuel
Comparaison entre le test visuel et fonctionnel

Tests visuels manuels

Les tests visuels manuels font référence au processus d'inspection et de vérification manuelles des aspects visuels d'une application logicielle ou d'un site web, afin de s'assurer qu'ils répondent à la conception souhaitée et aux exigences fonctionnelles. Ce type de test est généralement effectué par des testeurs humains qui utilisent leurs yeux pour évaluer l'apparence, la présentation et le comportement de l'application ou du site web.

Étapes du test manuel :

1. Parcourez l'application et faites des captures d'écran de la version de base connue.

2. Faites une autre série de captures d'écran de la dernière version de l'application.

3. Comparez manuellement ces captures d'écran (de base par rapport à la version actuelle) pour identifier les bogues visuels.

Tests visuels automatisés

Les tests visuels automatisés consistent à utiliser des outils logiciels spécialisés pour vérifier automatiquement l'aspect visuel et le comportement d'une application logicielle ou d'un site web. Contrairement aux tests visuels manuels, qui sont effectués par des testeurs humains, les tests visuels automatisés sont réalisés à l’aide d'outils de test capables de simuler les actions d'un utilisateur humain et d'évaluer les éléments visuels d’un site web.

Voici quelques-uns des outils permettant de réaliser des tests visuels automatisés :

1. Applitools

test-visuel

Cet outil est connu pour ses tests visuels utilisant l'intelligence artificielle et ses capacités de tests intermédiaires entièrement automatisés. Il peut analyser les applications web et mobiles et identifier toute modification des éléments visuels.

2. Percy

test-visuel

Cet outil est idéal pour les tests d'applications web ou de bureau. Il offre des capacités de test visuel et s'intègre à d'autres frameworks de test.

3. Galen Framework

test-visuel

C’est un outil de test visuel qui offre un large éventail de fonctionnalités et d'intégrations pour aider les testeurs à automatiser leur processus de test. Il permet aux utilisateurs de tester la mise en page des applications web à l'aide d'une syntaxe simple.

4. VisualEyes

test-visuel

VisualEyes is a visual testing tool that offers automated visual testing and review for web applications. It uses machine learning to detect even the slightest visual changes in web pages with heat maps.

5. Happo.io

test-visuel

Happo.io est un service de test de capture d’écran multi-navigateur qui aide à prévenir les régressions visuelles et vous permet de visualiser les changements dans votre interface utilisateur (UI), Il vous permet de comparer l’apparence visuelle des composants de l’interface utilisateur avant et après les changements.

Ressources

https://www.browserstack.com/guide/visual-testing-beginners-guidehttps://www.geeksforgeeks.org/software-testing-visual-testinghttps://saucelabs.com/resources/blog/what-is-visual-testinghttps://www.youtube.com/watch?v=MXfZeE9RQDw&t=939shttps://docs.percy.io/v1/docshttps://smartbear.com/blog/what-is-visual-testing
user

Abdelkarim AJEKAL

Consultant en test et automatisation

Alee Conseil-mobile

Rue Al Borj, Résidence Zineb, Appt12, Rabat 10020, Maroc

Copyright © 2023 Alee Conseil

Tous droits réservés