--- title: Tests visuels sur différents navigateurs et appareils. description: Recherchez les bugs visuels dans votre site Web ou votre application mobile avec les tests de régression de l'interface utilisateur visuelle de TestingBot. Prenez et comparez des captures d'écran automatisées sur différents navigateurs et appareils mobiles. Windows, Linux, Mac, Android et iOS. source_url: html: https://fr.testingbot.com/features/screenshot-testing md: https://fr.testingbot.com/features/screenshot-testing.md --- # Tests de régression automatisés de l'interface utilisateur visuelle Recherchez et résolvez dès le début les problèmes visuels de vos pages Web ou de vos applications mobiles. Testez sur de vrais navigateurs et appareils mobiles physiques. Utilisez les tests d'interface utilisateur visuelle sans code de TestingBot pour recevoir des alertes lorsqu'un problème visuel est détecté sur votre site Web. [Commencer](https://fr.testingbot.com/users/sign_up) [Demander une démo](https://testingbot.com/demo) ![Tests de régression automatisés de l'interface utilisateur visuelle](https://fr.testingbot.com/assets/hero/visual-abbead5878a5c7c5d80577279ba1f4c14a31df4ffdb0309dad7f6b7c3b09e63e.svg) Aimé par ces entreprises ![Navigateurs natifs](https://fr.testingbot.com/assets/features/screenshot-command-8a1297c081a302dc4dbc77a4e4461dec802ee7f7cfc8153948e2e06ee30b891e.jpg) ## Tests de régression visuelle sans effort Activez les tests de régression visuels dans votre framework de test existant avec une seule ligne de code. Détectez rapidement les décalages de mise en page, les incohérences de l'interface utilisateur et les régressions visuelles pendant vos tests. Ou saisissez les URL que vous souhaitez surveiller. TestingBot effectuera des captures d'écran à intervalles réguliers et vous avertira en cas de modification. [Commencer](https://fr.testingbot.com/users/sign_up) ## Examiner et approuver les régressions visuelles Vous et votre équipe pouvez inspecter les résultats des tests visuels et approuver ou refuser des modifications visuelles spécifiques. Comparez avec un curseur entre la capture d'écran de base et la nouvelle capture d'écran, ou inspectez une image différente des modifications survenues. ![Navigateurs natifs](https://fr.testingbot.com/assets/features/visual_schedule-8bc03556f3225d26b8fd4e5bdb31c1881ef2abb3257c35093cc441b5b62abbaa.jpg) ## Tests d'interface utilisateur visuelle sans code Commencez à tester votre site Web pour détecter les défauts de l'interface utilisateur en quelques minutes. Entrez simplement votre URL et choisissez les navigateurs sur lesquels vous souhaitez tester. Définissez la fréquence à laquelle le test doit être exécuté et la manière dont vous souhaitez être alerté. Lorsqu'un changement visuel se produit, vous recevrez instantanément une alerte avec une capture d'écran et une image différentielle mettant en évidence ce qui a changé. [Commencer](https://fr.testingbot.com/users/sign_up) ## Optimisé pour la précision Nous avons conçu des tests visuels avec un souci de précision, évitant ainsi les faux positifs pendant le processus de vérification de l'interface utilisateur. ### Geler les animations et les vidéos Les animations et les vidéos sont temporairement figées pendant l'instantané visuel, pour éviter les faux positifs. ### Ignorer les éléments de l'interface utilisateur Nous ignorons certains éléments de l’interface utilisateur qui sont susceptibles de changer et qui ne sont pas pertinents pour la capture d’écran. ### Captures d'écran parfaites au pixel près Prenez des captures d'écran pleine page, au-dessus de la ligne de flottaison ou sans chrome de votre site Web sur des centaines de navigateurs et d'appareils à la fois. ## Cadres d'automatisation des tests Les tests d'interface utilisateur de TestingBot s'intègrent parfaitement à Selenium, Appium, Puppeteer et Playwright. Ajoutez une simple ligne de code pour améliorer vos tests existants grâce à des tests de régression visuels automatisés. [![Selenium Testing](https://fr.testingbot.com/assets/support/selenium-266ecc0599068fc6eca0bcd9174fb46053c95cebe1c66f7a50c480f3f1a52929.svg)](https://testingbot.com/support/visual-testing/automated/selenium) ### [Selenium](https://testingbot.com/support/visual-testing/automated/selenium) Framework d'automatisation de navigateur populaire, utilisant WebDriver, qui prend en charge tous les principaux navigateurs. [![Appium Testing](https://fr.testingbot.com/assets/support/appium-4b35a8bb56bae236bd84c539cee9b8bbb489a55ddf48e32d059c86685d230354.svg)](https://testingbot.com/support/visual-testing/automated/appium) ### [Appium](https://testingbot.com/support/visual-testing/automated/appium) Mobile Automation Framework, utilisant WebDriver, fonctionne sur des appareils physiques et des simulateurs / émulateurs. [![Playwright Testing](https://fr.testingbot.com/assets/support/playwright-2dcb4e75b55ac0d1135cfa47be6137b13f46a2047ce78b96a34f51b0e2cc0d96.svg)](https://testingbot.com/support/visual-testing/automated/playwright) ### [Playwright](https://testingbot.com/support/visual-testing/automated/playwright) Similaire à Puppeteer, construit par Microsoft, avec prise en charge de Chrome et Edge. [![Puppeteer Testing](https://fr.testingbot.com/assets/support/puppeteer-0a8cdd38af69dabd46638afbb3bffc8a372902949aa599663ec379f3e875263c.svg)](https://testingbot.com/support/visual-testing/automated/puppeteer) ### [Puppeteer](https://testingbot.com/support/visual-testing/automated/puppeteer) Framework d'automatisation basé sur Chrome DevTools de Google. Prend en charge les navigateurs Chrome et Edge. ## Foire aux questions ### Comment puis-je l’utiliser pour détecter les défauts visuels ? TestingBot effectue des comparaisons automatisées pixel par pixel entre une image que vous avez marquée comme correcte et une nouvelle capture d'écran qui vient d'être prise. Si le nombre de pixels différents dépasse le seuil, le test est considéré comme échoué. Cela peut se produire lorsque vous déployez une nouvelle version de votre site Web dont le style CSS, le positionnement est incorrect ou qui est absente de la page. Détectez les bugs visuels avant qu’ils ne nuisent à l’UX de vos pages Web. ### Pourquoi les tests fonctionnels ne peuvent-ils pas couvrir les problèmes visuels ? Vous pouvez tester les dimensions, le positionnement et le style grâce à des tests fonctionnels réguliers. L’inconvénient est que cela deviendra bientôt un énorme fardeau de points de contrôle dans votre code. Au lieu d'effectuer des vérifications visuelles dans votre code, il est beaucoup plus efficace de prendre des instantanés et de les comparer. Les résultats visuels sont également beaucoup plus faciles à interpréter par les développeurs et le contrôle qualité. ### Quand dois-je utiliser les tests visuels ? Idéalement, vous effectueriez des vérifications visuelles dans le cadre de votre pipeline CI/CD. Il peut être exécuté après chaque enregistrement du code frontal, afin de garantir que le nouveau code n'a pas d'impact négatif sur votre produit. ### L’IA peut-elle être utilisée pour des tests visuels ? Les algorithmes d’apprentissage automatique peuvent être entraînés pour découvrir les différences visuelles. L'IA dépend de données entraînées, elle peut donc signaler des faux positifs/négatifs. Il ne s’agit pas d’une solution universelle et échoue souvent par rapport à la correspondance exacte des pixels. ### Comment fonctionnent les tests instantanés ? Les tests d'instantanés, dans le contexte des tests visuels de l'interface utilisateur sur les pages Web, capturent des captures d'écran de l'état initial d'une page Web. Il les compare ensuite aux rendus suivants. Les tests sont considérés comme ayant échoué lorsqu’un ou plusieurs changements dans l’apparence visuelle se produisent. Cela permet de garantir que les éléments de l’interface utilisateur restent cohérents. ### Inscrivez-vous pour un essai gratuit Commencez à tester visuellement vos applications et sites Web avec TestingBot. [Essai gratuit](https://fr.testingbot.com/users/sign_up) Des ressources qui pourraient vous plaire [![Visual Regression Testing with Python](https://fr.testingbot.com/assets/resources/articles/20-823a333072d87c93f6d75a502e3073e32bd0bee1d3142540ce0b42da6fa7ccf0.webp)](https://testingbot.com/resources/articles/python-visual-testing) ### [Visual Regression Testing with Python](https://testingbot.com/resources/articles/python-visual-testing) How to add visual regression testing to a Python suite: creating a baseline, comparing against it, and keeping screenshots stable over time. [Apprendre plus: Visual Regression Testing with Python](https://testingbot.com/resources/articles/python-visual-testing) [![Angular UI Testing](https://fr.testingbot.com/assets/resources/articles/21-15af461a46c449ef26dfb952ed9d0fc327c97d9ca815f24f8fe9ee60b9aa64a5.webp)](https://testingbot.com/resources/articles/angular-ui-testing) ### [Angular UI Testing](https://testingbot.com/resources/articles/angular-ui-testing) How to add visual regression testing to an Angular app with Cypress, comparing screenshots against a baseline to catch unintended UI changes. [Apprendre plus: Angular UI Testing](https://testingbot.com/resources/articles/angular-ui-testing) [![Visual Regression Testing](https://fr.testingbot.com/assets/blog/2024/visual-testing.webp)](https://testingbot.com/blog/visual-regression-testing) ### [Visual Regression Testing](https://testingbot.com/blog/visual-regression-testing) Learn about TestingBot's visual testing feature, allowing you to easily compare layouts across browsers and devices. [Apprendre plus: Visual Regression Testing](https://testingbot.com/blog/visual-regression-testing)