• ANALYSE
  • TRI
  • DÉCISION
  • HISTORIQUE

Analyser les régressions UI avec votre IA et Percy

Connectez Percy à votre agent pour transformer vos captures visuelles en données exploitables. Une fois la connexion établie, votre IA s'occupe de comparer les pixels et d'identifier les régressions.

Demandez à l'IA à propos de cette page

Réponse rapide

Comment l'IA peut-elle détecter les régressions UI ?

Votre agent utilise Percy pour extraire les pourcentages de différences de pixels et les détails de comparaison de n'importe quel snapshot. Il identifie précisément quels composants ont bougé pour vous permettre de décider s'il s'agit d'un bug ou d'un changement voulu. Vous obtenez un compte rendu clair des modifications visuelles.

Résultats visuels.

Où arrivent vos conclusions.

L'IA organise les données visuelles selon ces différents résultats.

ANALYSE

Rapports de changements visuels

L'agent calcule le pourcentage exact des différences de pixels. Vous obtenez un résumé précis du déplacement ou de la modification d'un composant.

TRI

Identification des régressions

L'IA signale les snapshots ayant échoué aux tests visuels. Elle met en évidence l'écart exact entre la version de référence et la nouvelle version.

DÉCISION

Révision humaine requise

L'agent présente les différences les plus importantes pour inspection. C'est vous qui décidez d'approuver ou de rejeter le changement.

HISTORIQUE

Audit des snapshots

L'IA analyse les états visuels précédents. Vous pouvez suivre l'évolution d'un élément d'interface spécifique sur plusieurs versions.

Le flux

Ce que fait votre IA lorsqu'une régression est détectée.

L'agent automatise la collecte de données pour que vous puissiez vous concentrer sur la correction.

  1. Localiser les snapshots

    L'agent trouve les états visuels pertinents dans votre projet Percy pour lancer l'investigation.

    list_snapshots

  2. Récupérer les données de comparaison

    L'agent extrait les différences de pixels et les informations de delta visuel entre deux snapshots.

    list_comparisons

  3. Inspecter les détails visuels

    L'agent analyse les propriétés spécifiques d'un snapshot pour comprendre la nature du changement.

    get_snapshot_details

  4. Résumer les résultats

    L'agent compile les pourcentages de différence et les changements de composants dans un rapport concis.

    get_snapshot_details

Essayez

Copiez ces exemples pour commencer.

Utilisez ces prompts pour lancer une investigation.

Points de départ

Remplacez les noms de projet et les ID de snapshots par vos propres données Percy.

Percy Connector

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

Lien du connecteurhttps://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/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 — Percy capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopier
{
  "mcpServers": {
    "percy-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/mcp"
    }
  }
}
Copiez dans le chat04

  • Liste les snapshots les plus récents pour le projet 'Dashboard' dans Percy.

  • Montre-moi les données de comparaison pour le dernier snapshot ayant échoué dans le projet 'Mobile-Web'.

  • Quel est le pourcentage de différence de pixels pour la comparaison entre le snapshot ID 123 et 124 ?

  • Récupère les détails du snapshot dans le projet 'Checkout-Flow' pour comprendre pourquoi il a échoué.

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

Commencez ici

Connectez Percy une fois, puis posez vos questions.

Liez simplement votre compte Percy via le tableau de bord Vinkius. Vos identifiants restent cryptés et vous pouvez immédiatement interroger votre agent sur vos snapshots UI.

Connecter Percy à votre IA

FAQ

Fonctionnement de la tâche.

  • 01

    L'IA peut-elle corriger le code CSS pour moi ?

    Non. L'IA peut seulement lire et signaler les différences visuelles détectées dans Percy. Vous devez appliquer les corrections de code manuellement dans votre IDE.

  • 02

    L'IA peut-elle approuver des snapshots dans Percy ?

    Non. L'agent peut uniquement récupérer des données et des détails de comparaison. La décision d'approuver ou de rejeter un snapshot vous appartient.

  • 03

    Comment l'IA sait-elle quels pixels ont changé ?

    L'agent utilise les données de comparaison fournies par Percy pour identifier le pourcentage exact et l'emplacement du delta visuel.

  • 04

    L'IA a-t-elle accès à l'intégralité de mon code ?

    Non. L'IA voit uniquement les données de snapshots visuels et les informations de comparaison que Percy transmet via le MCP.

  • 05

    Puis-je interroger des snapshots provenant d'un autre projet ?

    Oui, à condition de préciser le nom exact du projet pour que l'agent puisse trouver les bons snapshots.

  • D'autres questions sur Percy ? Voir toutes les capacités du connecteur Percy

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