• DÉTECTÉ
  • VÉRIFIÉ
  • HUMAIN
  • ENREGISTRÉ

Automatiser vos tests de régression visuelle avec l'IA

Connectez ScreenshotOne à votre client IA pour transformer votre agent en spécialiste de l'assurance qualité visuelle. Il s'occupe de la capture des états du site pour que vous puissiez vous concentrer sur les corrections.

Demandez à l'IA à propos de cette page

Réponse rapide

Comment automatiser la régression visuelle avec l'IA ?

Votre IA utilise ScreenshotOne pour prendre des clichés d'éléments spécifiques ou de pages entières, puis les compare à une référence pour trouver des écarts visuels. Cette configuration détecte les erreurs de mise en page et de CSS sans aucune intervention manuelle. Vous obtenez un rapport précis sur les défauts de l'interface.

Le suivi de chaque anomalie.

Résultats des tests visuels

L'IA traite les données visuelles et organise les résultats selon ces catégories.

DÉTECTÉ

Rapports de bugs visuels

L'IA identifie les décalages de mise en page ou les changements de couleurs en comparant les nouvelles captures à l'état de référence. Elle signale ces écarts précis.

VÉRIFIÉ

Tests UI réussis

Lorsque la mise en page correspond parfaitement à la référence, l'IA confirme que le composant est stable. Cela valide votre prochain déploiement.

HUMAIN

Révision manuelle requise

Si l'IA détecte un changement qui semble intentionnel, elle marque l'élément pour votre examen. C'est à vous de décider s'il s'agit d'un bug ou d'une mise à jour.

ENREGISTRÉ

Historique des régressions

L'IA suit l'évolution visuelle au fil du temps. Vous pouvez lui demander de comparer l'état actuel avec des versions plus anciennes pour voir comment l'interface a évolué.

Le flux

Ce que fait votre IA lors de la requête.

Votre agent sert de pont entre vos instructions de test et le site web en direct.

  1. Capturer l'interface

    L'IA cible une URL spécifique ou un composant unique pour obtenir une image fraîche de l'état actuel.

    take_element_screenshottake_full_page_screenshot

  2. Analyser les changements

    L'agent examine l'image capturée pour repérer des décalages inattendus dans le padding, la police ou le positionnement.

    take_screenshot

  3. Comparer les états

    Elle compare la nouvelle image à votre référence pour identifier précisément ce qui a changé.

    take_screenshot

  4. Rapporter les résultats

    L'IA résume les différences visuelles et les présente directement dans votre interface de chat.

    take_element_screenshot

Essayez

Copiez ces exemples pour commencer.

Utilisez ces prompts pour lancer votre premier test visuel.

Points de départ

Remplacez les URLs et les sélecteurs CSS par les données de votre projet.

ScreenshotOne Connector

Tout est prêt. Choisissez votre client MCP et suivez les instructions de configuration.

Lien du connecteurhttps://edge.vinkius.com/vk_preview_JUwwYa83yWRRMbOnbxUmQsFRB6tFeXnZOYxfQrXu/mcp

Claude Desktop

Suivez les étapes ci-dessous pour vous connecter en quelques secondes.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — ScreenshotOne capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopier
{
  "mcpServers": {
    "screenshotone-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_JUwwYa83yWRRMbOnbxUmQsFRB6tFeXnZOYxfQrXu/mcp"
    }
  }
}
Copiez dans le chat04

  • Prends une capture d'écran plein écran de https://example.com et vérifie s'il y a des décalages de mise en page.

  • Capture l'élément avec le sélecteur '.navbar' sur https://myapp.com et compare-le à la référence.

  • Lance un test de régression visuelle sur la page d'accueil de https://site.io et dis-moi si la section hero a changé.

  • Prends une capture d'écran du bouton de connexion sur https://auth.com et vérifie que sa couleur n'a pas changé.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Commencez ici

Connectez ScreenshotOne une seule fois, puis demandez.

Une seule liaison connecte le MCP à votre client. Vos identifiants restent chiffrés et privés. Vous trouverez la liste complète des capacités sur la page du Connector.

Connecter ScreenshotOne à votre IA

FAQ

Fonctionnement de la tâche

  • 01

    L'IA peut-elle corriger les bugs CSS qu'elle trouve ?

    Non. L'IA peut seulement voir et signaler les différences visuelles. Vous devez modifier votre code manuellement pour corriger les bugs.

  • 02

    L'IA met-elle automatiquement à jour mes images de référence ?

    Non. L'IA identifie les différences par rapport à la référence existante. Vous devez indiquer à l'IA quand un changement est intentionnel pour qu'elle puisse mettre à jour sa base.

  • 03

    Puis-je tester des éléments cachés derrière une connexion ?

    Oui, si vous fournissez les données de session nécessaires ou si la page est accessible via les outils fournis.

  • 04

    L'IA peut-elle exécuter des tests sur un serveur de développement local ?

    L'IA ne peut capturer des captures d'écran que pour des URLs accessibles publiquement ou via votre réseau.

  • 05

    L'IA va-t-elle supprimer des fichiers de mon site ?

    Non. Ce MCP possède uniquement des outils de capture de données visuelles. Il ne peut ni modifier, ni supprimer, ni uploader de fichiers sur votre serveur.

  • D'autres questions sur ScreenshotOne ? La page du Connector y répond. Voir toutes les capacités du Connector ScreenshotOne

Connectez ScreenshotOne à Claude, Cursor, ChatGPT et d'autres