Skip to main content

Visuelle Regressionen vor jedem PR erkennen

Ein Repo-Skill, mit dem Devin jede betroffene Seite per Screenshot erfasst und Layoutprobleme meldet, bevor ein PR erstellt wird.
AuthorCognition
CategoryFeature-Entwicklung
FeaturesSkills
1

Das Problem: CSS-Bugs bleiben in Unit-Tests unentdeckt

Ihre Test-Suite läuft durch, CI ist grün und der PR wird gemergt — aber auf der Einstellungsseite überlagern sich jetzt Texte auf Mobilgeräten, und der Checkout-Button ist hinter dem Footer verschwunden. Unit-Tests und Linter erkennen visuelle Fehler nicht, sodass der Fehler in Produktion landet und ein Kunde ihn meldet.Ein Repository-Skill löst dieses Problem. Skills sind Markdown-Dateien, die Sie in .agents/skills/<your-skill>/ in einem Ihrer Repositories committen. Devin sieht alle Skills in allen verbundenen Repositories — Sie können sie manuell triggern, oder Devin kann sie automatisch triggern, wenn eine relevante Situation erkannt wird. Dieser Skill sagt Devin genau, wie es Ihre App starten, zu den vom Diff betroffenen Seiten navigieren und dort bei mehreren Viewport-Breiten Screenshots aufnehmen soll — jedes Mal, vor jedem PR.
2

Fügen Sie den Skill visual-regression zu Ihrem Repo hinzu

Committe eine Datei unter dem Pfad .agents/skills/visual-regression/visual-regression.md, in der die manuelle QA-Checkliste deines Teams als Schritte codiert ist, denen Devin folgen kann:
# Visual Regression Check

## Description
Before opening any PR, start the app locally and screenshot every
page affected by the current diff at desktop and mobile widths.
Flag any layout issues found.

## Prerequisites
- Docker running (for the database)
- Port 3000 available

## Setup
1. Install dependencies: `npm install`
2. Start services: `docker-compose up -d postgres redis`
3. Run migrations: `npx prisma migrate dev`
4. Seed test data: `npm run db:seed`
5. Start the dev server: `npm run dev`
6. Wait for "Ready on http://localhost:3000" in the terminal

## Visual Checks
1. Read the current git diff to identify which pages are affected
2. For each affected page:
   a. Open the page in the browser at http://localhost:3000/{route}
   b. Screenshot at 1280px width (desktop)
   c. Resize the browser to 375px width (mobile)
   d. Screenshot at mobile width
   e. Check for: overlapping text, elements hidden behind other
      elements, horizontal scroll, buttons or links that are
      unreachable, missing images or icons, console errors
3. If any issue is found, list it with the page URL, viewport
   width, and a description of the problem

## Before Opening the PR
1. Run `npm run lint` and fix any issues
2. Run `npm test` and confirm all tests pass
3. Include all screenshots in the PR description
4. If issues were found, list them at the top of the PR body
Diese Datei wird mit Ihrem Code ausgeliefert. Sobald sie committed ist, betrachtet Devin sie als verfügbare Fähigkeit – immer wenn eine Sitzung UI-Dateien in diesem Repo bearbeitet, kann Devin die visuellen Regressionstests automatisch ausführen, oder Sie können sie jederzeit manuell anstoßen.
3

Passen Sie die Checks an Ihre Seiten an

Generische Anweisungen wie „überprüfe, ob die Seite richtig aussieht“ führen zu vagen Ergebnissen. Der wertvollste Teil dieses Skills besteht darin, Devin zu sagen, wie „korrekt“ für jeden Bereich deiner App aussieht.Füge deinem Skill routenspezifische Abschnitte hinzu:
## Routenspezifische Prüfungen

### Dashboard (`/dashboard`)
- Die Metrikkarten sollten auf dem Desktop in einem 3-spaltigen Raster angezeigt werden
- Karten sollten auf Mobilgeräten zu einer einzelnen Spalte gestapelt werden
- Das Diagramm sollte ohne horizontales Scrollen vollständig sichtbar sein

### Checkout (`/checkout`)
- Die Schaltfläche „Bestellung aufgeben" muss ohne Scrollen sichtbar sein
  – sowohl auf dem Desktop als auch auf Mobilgeräten
- Die Bestellübersichts-Seitenleiste sollte auf Mobilgeräten zu einem Akkordeon zusammenklappen
- Die Preisaufschlüsselung sollte Zwischensumme, Steuer und Gesamtbetrag in separaten Zeilen anzeigen

### Settings (`/settings`)
- Alle Formularetiketten sollten linksbündig mit ihren Eingabefeldern ausgerichtet sein
- Die Schaltfläche „Speichern" muss am unteren Ende des Formulars erreichbar sein
- Die Tab-Navigation zwischen Abschnitten sollte den URL-Hash aktualisieren
Devin liest das Diff, identifiziert, welche Routen betroffen waren, und folgt dem entsprechenden Abschnitt – sodass die Prüfungen gezielt statt generisch sind.
4

Sehen Sie, wie es einen echten Regressionsfehler erkennt

Nehmen wir an, eine Entwicklerin ändert das CSS-Grid auf dem Dashboard von grid-template-columns: repeat(3, 1fr) zu repeat(auto-fit, minmax(200px, 1fr)), um das Layout responsiv zu machen. Die Unit-Tests bestehen – es wurde keine Logik geändert. Aber auf Mobilgeräten ragen die Karten jetzt über den Viewport hinaus.Wenn Devin die Codeänderung abgeschlossen hat, führt es diese Fähigkeit automatisch aus:
  1. Startet die App — installiert Abhängigkeiten, startet Docker, führt Migrationen aus, seedet Daten, startet den Dev-Server
  2. Liest das Diff — erkennt, dass sich src/components/Dashboard.tsx geändert hat, und ordnet es der Route /dashboard zu
  3. Macht Screenshots bei 1280px — das 3-Spalten-Grid wird korrekt gerendert
  4. Macht Screenshots bei 375px — erkennt horizontalen Überlauf: Die Karten passen nicht in den Viewport
  5. Markiert das Problem — meldet „Horizontaler Bildlauf auf /dashboard bei 375px Breite erkannt — Metrik-Karten ragen über den Viewport hinaus“
  6. Behebt das CSS — fügt overflow-x: hidden hinzu und passt das minmax-Minimum auf 150px an
  7. Erstellt erneut Screenshots — bestätigt die Korrektur bei beiden Breiten
  8. Öffnet den PR — fügt Vorher-/Nachher-Screenshots und die Korrektur in die Beschreibung ein
Sie können dies in Echtzeit im Browser-Tab in Ihrem Sitzungs-Workspace beobachten.
5

Für Ihren Stack erweiterbar

Passe den Skill für zusätzliche Tools und projektspezifische Verifizierungsschritte an: