extension ExtPose

Test Visuel - UI Testing Inspector

CRX id

begcddgpiamjkanbgdcihlbfdmogcloo-

Description from extension meta

Comparez les changements visuels avant et après la mise à jour des pages web avec des rapports détaillés et une analyse DOM.

Image from store Test Visuel - UI Testing Inspector
Description from store Fatigué de vérifier manuellement les bugs visuels après chaque modification de code ? UI Testing Inspector est votre vérificateur de différences visuelles fiable avec analyse du DOM. Pourquoi l'utiliser ? ⚡️ 100% Local & Privé : toutes les captures d'écran et les données de comparaison restent sur votre ordinateur. Pas de services cloud, pas de partage de données ⚡️ Boucle de Retour Instantanée : installez l'extension, prenez une référence, apportez vos modifications de code et voyez les différences instantanément. Parfait pour des tests de régression rapides ⚡️ Détection Pixel-Parfait : détectez même les plus petits changements visuels que l'œil humain pourrait manquer Fonctionnalités Clés : 🔸 Référence en Un Clic : capturez l'état "avant" de n'importe quelle page web en un seul clic 🔸 Diff Visuel Pixel-Parfait : obtenez un rapport clair montrant la référence, l'état actuel et une image mettant en évidence les différences exactes 🔸 Inspecter l'Élément : allez au-delà de l'inspecteur de base. Voyez non seulement le code, mais aussi ce qui a changé dans le DOM et le CSS 🔸 Capture de Page Complète & de Vue : choisissez entre capturer la zone visible ou l'ensemble de la page défilable 🔸 Historique des Rapports : enregistrez et consultez jusqu'à 15 rapports de comparaison précédents 🔸 Thèmes Clair & Sombre : pour une visualisation confortable, de jour comme de nuit Dans le Rapport Détaillé 🔍 Après chaque comparaison, vous obtenez un rapport complet qui vous donne une vue d'ensemble : ✔️ Résumé : le pourcentage de différences visuelles et un compte des éléments ajoutés, supprimés et modifiés ✔️ Vue Côté à Côté : comparez les captures d'écran "Avant" et "Après" juste à côté de l'image "Différences" mise en évidence ✔️ Liste des Changements DOM & CSS : identifiez les éléments exacts qui ont changé. Plus de suppositions sur pourquoi un pixel a bougé - voyez les changements au niveau du code comme la couleur, la taille de police ou la marge ✔️ Détails Techniques : analyse complète des changements de mise en page, modifications de contenu et mises à jour structurelles Ce que Vous Allez Détecter : ➤ Déplacements de mise en page et désalignements ➤ Changements de couleur et de style ➤ Éléments manquants ou déplacés ➤ Modifications de police et de texte ➤ Différences d'images Comment Ça Fonctionne : 1️⃣ Définir une Référence Visuelle : naviguez vers la page que vous souhaitez tester et cliquez sur "Définir la Référence" dans la fenêtre contextuelle de l'extension. C'est votre source de vérité. 2️⃣ Codez en Confiance : apportez des modifications à votre CSS, mettez à jour le contenu ou refactorisez des composants. 3️⃣ Vérifiez Instantanément les Changements : cliquez sur "Comparer avec la Référence". Un nouvel onglet s'ouvrira avec un rapport visuel détaillé. 4️⃣ Analysez les Différences : utilisez la vue côte à côte et la liste des changements détectés pour repérer chaque problème. 5️⃣ Mettez à Jour la Référence : satisfait de la nouvelle version ? Cliquez simplement à nouveau sur "Définir la Référence" pour enregistrer le nouveau look comme votre référence. Conseils Pro ✨ Attendez que les pages se chargent complètement avant de capturer les références ✨ Utilisez la capture de page complète pour des tests complets ✨ Prenez des captures d'écran dans la même taille de fenêtre de navigateur pour des comparaisons précises ✨ Capturez les références lorsque le contenu est stable ✨ Testez un changement à la fois pour des résultats de diff plus clairs ✨ Enregistrez des références importantes avant des refactorisations majeures de code ✨ Comparez des états de page similaires (même statut de connexion utilisateur, données chargées) Cas d'Utilisation ✅ Tests de Régression Visuelle : le cas d'utilisation principal. Après avoir apporté des modifications, effectuez une comparaison pour détecter tout bug visuel non intentionnel. ✅ Vérification UI/Design : assurez-vous d'une mise en œuvre pixel-parfaite et d'une cohérence de marque par rapport aux maquettes de design. ✅ Refactorisation CSS : refactorisez sans crainte le CSS hérité. Un test de diff visuel rapide vous dira immédiatement si vos modifications ont eu des effets secondaires inattendus. ✅ Tests Frontend : un outil essentiel pour tout flux de travail de test frontend, fournissant un retour visuel immédiat. Pour Qui Est-il Conçu ? ➡️ Développeurs Frontend : détectez les problèmes de mise en page avant de valider votre code ➡️ Ingénieurs QA : améliorez vos tests manuels d'UI avec une étape de vérification visuelle fiable ➡️ Designers UI/UX : assurez-vous rapidement que la mise en œuvre en direct correspond à vos designs ➡️ Freelancers & Petites Équipes : un outil de test visuel sans le prix d'entreprise Pourquoi Il Se Démarque 🖼️ Mieux Que des Captures d'Écran Manuelles : arrêtez de jongler avec des images avant et après dans vos dossiers de bureau 📝 Aucune Courbe d'Apprentissage : si vous pouvez naviguer, vous pouvez utiliser cet outil FAQ ❓Comment détecte-t-il les changements ? 💬 Il utilise une approche à double méthode : une comparaison pixel par pixel pour le diff visuel et un scan structurel pour la liste des changements DOM/CSS. ❓Mes données sont-elles sécurisées ? 💬 Oui. Tout est traité et stocké 100% localement dans votre navigateur. ❓ Puis-je l'utiliser sur localhost ? 💬 Absolument ! Il fonctionne parfaitement pendant le développement local ❓ Qu'en est-il du contenu dynamique ? 💬 L'outil est conçu pour comparer des états statiques. Pour de meilleurs résultats, capturez vos captures d'écran lorsque les animations sont terminées et que les publicités sont stables.

Latest reviews

  • (2025-07-09) Дарья Петрова: Creates a full and detailed report of differences between two versions of web pages. Waiting for Visual comparison of whole page, not just viewport visible parts.

Statistics

Installs
25 history
Category
Rating
5.0 (1 votes)
Last update / version
2025-07-04 / 1.0.0
Listing languages

Links