• ANALYSE
  • TRIAGE
  • ENTSCHEIDUNG
  • HISTORIE

UI-Regressions mit Percy und Ihrer KI analysieren

Verbinden Sie Percy mit Ihrem Agenten, um visuelle Snapshots in nutzbare Daten zu verwandeln. Sobald die Verbindung steht, übernimmt Ihre KI den Vergleich der Pixel und identifiziert Regressions.

Fragen Sie die KI zu dieser Seite

Kurzantwort

Wie kann ich KI zur Suche nach UI-Regressions nutzen?

Ihr Agent nutzt Percy, um spezifische Pixel-Differenzen und Vergleichsdetails für einen beliebigen Snapshot abzurufen. Er identifiziert genau, welche Komponenten sich verschoben haben, damit Sie entscheiden können, ob eine Änderung ein Bug oder beabsichtigt ist. Sie erhalten eine klare Aufschlüsselung der visuellen Änderungen.

Visuelle Ergebnisse.

Das liefern die Ergebnisse.

Die KI strukturiert die visuellen Daten in diese Kategorien.

ANALYSE

Berichte über visuelle Änderungen

Der Agent berechnet den exakten Prozentsatz der Pixel-Differenzen. Sie erhalten eine klare Zusammenfassung, wie stark sich eine Komponente bewegt oder verändert hat.

TRIAGE

Regressions-Identifikation

Die KI markiert Snapshots, die die visuellen Tests nicht bestanden haben. Sie hebt die genaue Differenz zwischen dem Baseline-Bild und der neuen Version hervor.

ENTSCHEIDUNG

Manuelle Prüfung erforderlich

Der Agent präsentiert die signifikantesten Differenzen zur Inspektion. Sie entscheiden letztlich, ob Sie die Änderung akzeptieren oder ablehnen.

HISTORIE

Snapshot-Audit

Die KI analysiert frühere visuelle Zustände. So können Sie nachverfolgen, wie sich ein bestimmtes UI-Element über mehrere Builds hinweg entwickelt hat.

Der Ablauf

Was Ihre KI tut, wenn eine Regression erkannt wird.

Der Agent automatisiert die Datenerfassung, damit Sie sich auf die Fehlerbehebung konzentrieren können.

  1. Snapshots finden

    Der Agent sucht die relevanten visuellen Zustände in Ihrem Percy-Projekt, um die Untersuchung zu starten.

    list_snapshots

  2. Vergleichsdaten abrufen

    Der Agent zieht die spezifischen Pixel-Differenzen und visuellen Delta-Informationen zwischen zwei Snapshots.

    list_comparisons

  3. Visuelle Details prüfen

    Der Agent analysiert die spezifischen Eigenschaften eines Snapshots, um die Art der Änderung zu verstehen.

    get_snapshot_details

  4. Ergebnisse zusammenfassen

    Der Agent bereitet die Differenz-Prozentsätze und Komponenten-Änderungen in einem prägnanten Bericht für Sie auf.

    get_snapshot_details

Probieren Sie es

Kopieren Sie diese Befehle zum Starten.

Nutzen Sie diese Prompts, um eine Untersuchung einzuleiten.

Startpunkte

Ersetzen Sie die Projektnamen und Snapshot-IDs durch Ihre tatsächlichen Percy-Daten.

Percy Connector

Alles bereit. Wählen Sie Ihren MCP-Client und folgen Sie den Einrichtungsschritten.

Connector-Linkhttps://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/mcp

Claude Desktop

Folgen Sie den Schritten unten, um sich in Sekunden zu verbinden.

  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.
Konfiguration · claude_desktop_config.jsonKopieren
{
  "mcpServers": {
    "percy-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_6LH0zsvN8J0nY7uPYJ5ybHRW80VU7JdDwEgote5I/mcp"
    }
  }
}
In den Chat kopieren04

  • Liste die aktuellsten Snapshots für das Projekt 'Dashboard' in Percy auf.

  • Zeige mir die Vergleichsdaten für den letzten fehlgeschlagenen Snapshot im Projekt 'Mobile-Web'.

  • Wie hoch ist der Pixel-Differenz-Prozentsatz beim Vergleich zwischen Snapshot ID 123 und 124?

  • Rufe die Details für den Snapshot im Projekt 'Checkout-Flow' ab, um zu sehen, warum er fehlgeschlagen ist.

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

Starten Sie hier

Einmal verbinden, dann fragen.

Verknüpfen Sie einfach Ihr Percy-Konto über das Vinkius-Dashboard. Ihre Zugangsdaten bleiben verschlüsselt und Sie können sofort Fragen zu Ihren UI-Snapshots an Ihren Agenten stellen.

Percy mit Ihrer KI verbinden

FAQ

So funktioniert die Aufgabe.

  • 01

    Kann die KI den CSS-Code für mich korrigieren?

    Nein. Die KI kann lediglich die visuellen Unterschiede lesen und melden, die sie in Percy findet. Die Code-Korrekturen müssen Sie manuell in Ihrer IDE vornehmen.

  • 02

    Kann die KI Snapshots in Percy genehmigen?

    Nein. Der Agent kann nur Daten und Vergleichsdetails abrufen. Die Entscheidung, einen Snapshot zu akzeptieren oder abzulehnen, liegt bei Ihnen.

  • 03

    Woher weiß die KI, welche Pixel sich verändert haben?

    Der Agent nutzt die von Percy bereitgestellten Vergleichsdaten, um den exakten Prozentsatz und die Position des visuellen Deltas zu bestimmen.

  • 04

    Sieht die KI meinen gesamten Code?

    Nein. Die KI sieht nur die visuellen Snapshot-Daten und die Vergleichsinformationen, die Percy über den MCP bereitstellt.

  • 05

    Kann ich nach Snapshots aus einem anderen Projekt fragen?

    Ja, sofern Sie den korrekten Projektnamen angeben, damit der Agent die richtigen Snapshots finden kann.

  • Weitere Fragen zu Percy? Alle Funktionen des Percy Connectors ansehen

Verbinde Percy mit Claude, Cursor, ChatGPT & mehr