Mein QA Engineer ist ein LLM

2026-01-09 · 3 min read

Claude kann auf Schaltflächen klicken.

Das klingt trivial, aber es verändert, wie ich UIs erstelle. Mit Playwright MCP schreibt Claude nicht nur Code—es öffnet einen Browser, navigiert zu localhost und überprüft, dass die Dinge tatsächlich funktionieren. Es findet Bugs, die ich bei Code-Reviews übersehen würde.

Das Setup

Playwright MCP gibt Claude Browser-Automatisierung. Ich führe es mit Headless Chromium aus:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-server-playwright", "--headless"]
    }
  }
}

Jetzt kann Claude navigieren, klicken, tippen und Screenshots machen. Es sieht, was Nutzer sehen.

flowchart LR
    Claude([Claude Code]) -->|browser_snapshot| PW[Playwright MCP]
    PW --> Browser[Headless Chrome]
    Browser --> App[localhost:1313]
    Browser -.->|screenshot| Issue[(GitHub Issue)]
    Issue -.->|visual history| PR[Pull Request]

flowchart TB
    Claude([Claude Code]) -->|browser_snapshot| PW[Playwright MCP]
    PW --> Browser[Headless Chrome]
    Browser --> App[localhost:1313]
    Browser -.->|screenshot| Issue[(GitHub Issue)]
    Issue -.->|visual history| PR[Pull Request]

Flow: Claude Code → Playwright MCP → Browser → Screenshots → GitHub Issues → PR

Die Viewport-Matrix

Jede UI-Änderung wird an drei Breakpoints getestet:

Viewport	Größe	Warum
Desktop	1440×900	Standard-Laptop
Tablet	1024×768	iPad Hochformat
Mobile	390×844	iPhone 14

Claude ändert die Browsergröße, macht einen Screenshot und lädt ihn ins GitHub Issue hoch. Drei Screenshots pro Zustandsänderung. Wenn die mobile Navigation kaputt ist, sehe ich es sofort—nicht erst nach dem Deployment.

Theme-Tests

Gleiches Muster für hellen und dunklen Modus:

// Claude wechselt das Theme
await page.click('[data-testid="theme-toggle"]');
// Screenshots beider Zustände

Die CSS-Variablen-Konsistenz ist wichtig. Eine Komponente, die im hellen Modus gut aussieht, könnte im dunklen Modus unsichtbaren Text haben. Claude erkennt dies, indem es tatsächlich beide betrachtet.

Interaktive Tests

Hier wird es interessant. Claude macht nicht nur Screenshots—es verwendet die UI:

Klickt auf jeden Navigationslink, überprüft das Ziel
Öffnet die mobile Schublade, prüft die Animation
Füllt Formulare aus, sendet sie ab
Hovert über interaktive Elemente
Schließt Modals durch Klicken auf den Hintergrund

Wenn es einen Bug findet—sagen wir, die Schublade schließt nicht, wenn man außen tippt—meldet es ihn, behebt den Code und testet erneut. Die Feedback-Schleife ist eng.

Das GitHub Issue als Testbericht

Jeder Screenshot wird ins GitHub Issue hochgeladen. Der Issue-Body wird bei jedem Meilenstein neu erstellt:

## Aktueller Zustand

### Desktop (1440×900)
![desktop](https://user-images.githubusercontent.com/...)

### Tablet (1024×768)
![tablet](https://user-images.githubusercontent.com/...)

### Mobile (390×844)
![mobile](https://user-images.githubusercontent.com/...)

## Test-Checkliste
- [x] Navigationslinks funktionieren
- [x] Mobile Schublade öffnet/schließt
- [x] Theme-Umschaltung bleibt bestehen
- [ ] Formularvalidierung zeigt Fehler

Das Issue wird zu einem lebendigen Testbericht. Jeder, der den PR überprüft, kann genau sehen, was getestet wurde.

Der vollständige Loop

Ein typisches Feature durchläuft diesen Zyklus:

Issue erstellt: “Sidebar-Navigation hinzufügen”
Claude implementiert: Schreibt die Komponente
Visuelle Überprüfung: Screenshots aller Viewports
Interaktive Tests: Klickt durch die UI
Bug gefunden: Schublade schließt nicht bei Hintergrundklick
Fix angewendet: Aktualisiert den Click-Handler
Re-Test: Frische Screenshots, alle bestanden
PR erstellt: Verlinkt zum Issue mit vollständiger visueller Historie

Kein manueller QA-Schritt. Kein “sieht gut aus”, ohne tatsächlich zu schauen. Claude überprüft seine eigene Arbeit.

Was Das Erkennt

Echte Bugs, die ich Claude habe finden sehen:

Mobile Navigation hinter Inhalt versteckt (z-index Problem)
Button-Text im dunklen Modus unsichtbar (falsche CSS-Variable)
Formular sendet zweimal bei Enter-Taste
Dropdown-Menü durch overflow:hidden Parent abgeschnitten
Hover-Zustand auf Touch-Geräten hängengeblieben

Das sind die Bugs, die durch Code-Reviews rutschen, weil sie nur im Browser erscheinen. Claude sieht sie, weil es den Code tatsächlich ausführt.

Jeder PR kommt jetzt mit Beweis, dass es funktioniert.