• ERKANNT
  • BESTÄTIGT
  • MANUELL
  • PROTOKOLLIERT

Visuelles Regression-Testing mit Ihrer KI automatisieren

Verbinden Sie ScreenshotOne mit Ihrem KI-Client, um Ihren Agenten in einen Spezialisten für visuelle Qualitätssicherung zu verwandeln. Er übernimmt das Erstellen der Screenshots, damit Sie sich auf die Fehlerbehebung konzentrieren können.

Fragen Sie die KI zu dieser Seite

Kurzantwort

Wie kann ich visuelles Regression-Testing mit KI automatisieren?

Ihre KI nutzt ScreenshotOne, um Snapshots von einzelnen Elementen oder ganzen Seiten zu erstellen und diese mit einem Referenzbild zu vergleichen. So werden Layout-Fehler und CSS-Probleme ohne manuelles Klicken erkannt. Sie erhalten eine klare Übersicht über alle UI-Abweichungen.

Wo jedes Problem landet.

Ergebnisse des visuellen Testings

Die KI verarbeitet die visuellen Daten und ordnet die Ergebnisse in diese Kategorien ein.

ERKANNT

Visuelle Fehlerberichte

Die KI identifiziert Layout-Verschiebungen oder Farbänderungen, indem sie neue Aufnahmen mit dem Soll-Zustand vergleicht. Sie markiert diese Abweichungen für Sie.

BESTÄTIGT

Erfolgreiche UI-Checks

Wenn das Layout exakt dem Referenzbild entspricht, bestätigt die KI, dass die Komponente stabil ist. Das bereitet den Weg für Ihr nächstes Deployment.

MANUELL

Prüfung erforderlich

Findet die KI eine Änderung, die beabsichtigt sein könnte, markiert sie zur manuellen Prüfung. Sie entscheiden, ob es ein Fehler oder ein neues Feature ist.

PROTOKOLLIERT

Regressions-Historie

Die KI verfolgt visuelle Änderungen über die Zeit. Sie können sie bitten, aktuelle Zustände mit älteren Versionen zu vergleichen, um die Entwicklung der UI zu sehen.

Der Ablauf

Was Ihre KI tut, wenn die Anfrage eingeht.

Ihr Agent fungiert als Brücke zwischen Ihren Testanweisungen und der Live-Website.

  1. UI erfassen

    Die KI steuert eine bestimmte URL oder ein einzelnes Element an, um ein aktuelles Bild des Zustands zu erstellen.

    take_element_screenshottake_full_page_screenshot

  2. Änderungen analysieren

    Der Agent untersucht das Bild auf unerwartete Verschiebungen bei Abständen, Schriftarten oder Positionen.

    take_screenshot

  3. Zustände vergleichen

    Das neue Bild wird mit Ihrem Referenzbild verglichen, um die genaue Änderung zu bestimmen.

    take_screenshot

  4. Ergebnisse melden

    Die KI fasst die visuellen Unterschiede zusammen und zeigt sie direkt in Ihrem Chat-Interface an.

    take_element_screenshot

Probieren Sie es

Kopieren Sie diese Befehle zum Starten.

Nutzen Sie diese Prompts für Ihren ersten visuellen Test.

Startpunkte

Ersetzen Sie die URLs und CSS-Selektoren durch Ihre tatsächlichen Projektdaten.

ScreenshotOne Connector

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

Connector-Linkhttps://edge.vinkius.com/vk_preview_JUwwYa83yWRRMbOnbxUmQsFRB6tFeXnZOYxfQrXu/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 — ScreenshotOne capabilities are ready to use.
Konfiguration · claude_desktop_config.jsonKopieren
{
  "mcpServers": {
    "screenshotone-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_JUwwYa83yWRRMbOnbxUmQsFRB6tFeXnZOYxfQrXu/mcp"
    }
  }
}
In den Chat kopieren04

  • Erstelle einen Full-Page-Screenshot von https://example.com und prüfe auf Layout-Verschiebungen.

  • Erfasse das Element mit dem Selektor '.navbar' auf https://myapp.com und vergleiche es mit dem Referenzbild.

  • Führe einen visuellen Regression-Test auf der Landingpage unter https://site.io durch und sag mir, ob sich der Hero-Bereich verändert hat.

  • Mache einen Screenshot vom Login-Button auf https://auth.com und prüfe, ob sich die Farbe verändert hat.

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

Starten Sie hier

ScreenshotOne einmal verbinden, dann fragen.

Ein einziger Link verbindet den MCP mit Ihrem Client. Ihre Zugangsdaten bleiben verschlüsselt und privat. Die vollständige Liste der Funktionen finden Sie auf der Connector-Seite.

ScreenshotOne mit Ihrer KI verbinden

FAQ

Verhalten der Aufgabe

  • 01

    Kann die KI die gefundenen CSS-Fehler selbst beheben?

    Nein. Die KI kann die visuellen Unterschiede nur sehen und melden. Sie müssen Ihren Code manuell bearbeiten, um die Fehler zu beheben.

  • 02

    Aktualisiert die KI meine Referenzbilder automatisch?

    Nein. Die KI vergleicht alles mit dem bestehenden Referenzbild. Sie müssen der KI mitteilen, wenn eine Änderung beabsichtigt ist, damit sie das Referenzbild aktualisiert.

  • 03

    Kann ich Elemente testen, die hinter einem Login verborgen sind?

    Ja, sofern Sie die notwendigen Session-Daten bereitstellen oder die Seite über die verfügbaren Tools erreichbar ist.

  • 04

    Kann die KI Tests auf einem lokalen Entwicklungsserver ausführen?

    Die KI kann nur Screenshots von URLs erstellen, die öffentlich erreichbar sind oder über Ihr Netzwerk zugänglich gemacht werden können.

  • 05

    Wird die KI Dateien meiner Website löschen?

    Nein. Dieser MCP verfügt nur über Werkzeuge zur Erfassung visueller Daten. Er kann keine Dateien auf Ihrem Server ändern, löschen oder hochladen.

  • Noch Fragen zu ScreenshotOne? Die Connector-Seite liefert Antworten. Alle Funktionen des ScreenshotOne Connectors ansehen

Verbinde ScreenshotOne mit Claude, Cursor, ChatGPT & mehr