# Web-App im echten Browser testen

> Nach jeder Änderung dieselben Flows durchklicken ist langsam, und Bugs rutschen durch.

Dieses Setup ist für Entwickler und QA-Teams, die nach jeder Änderung dieselben Abläufe erneut durchklicken. Der Agent steuert über den Playwright-MCP-Server von Microsoft einen echten Browser, folgt dem Ablauf, den Sie in normaler Sprache beschreiben, und meldet, was fehlschlägt. Am Ende haben Sie pro Ablauf ein Ergebnis bestanden oder fehlgeschlagen und GitHub-Issues mit Reproduktionsschritten für jeden Fehler.

## Schritte

1. **Playwright-MCP hinzufügen**: Registrieren Sie den Playwright-MCP-Server in Claude Code oder Cursor mit dem Befehl npx @playwright/mcp@latest. Beim ersten Start werden Sie eventuell aufgefordert, einen Browser zu installieren; folgen Sie dem Hinweis oder führen Sie npx playwright install aus. Lassen Sie den Agenten Ihre Staging-URL öffnen und die Seite beschreiben, um die Einrichtung zu prüfen.
   Tipp: Mit der Option --headless läuft der Browser unsichtbar, wenn Sie nicht zusehen müssen.
2. **Flow beschreiben**: Beschreiben Sie den Ablauf Schritt für Schritt: URL, Testkonto, was angeklickt oder eingegeben wird und wie ein korrektes Ergebnis aussieht. Der Agent liest die Seite über Accessibility-Snapshots, daher helfen klare Beschriftungen von Buttons und Formularfeldern. Bitten Sie um eine Meldung pro Schritt, bestanden oder fehlgeschlagen, mit Fehlertext oder Screenshot bei Problemen.
   Tipp: Nennen Sie für jeden Schritt das erwartete Ergebnis, sonst muss der Agent raten, was "funktioniert" heißt.
3. **Fehler erfassen**: Verbinden Sie den GitHub-MCP-Server mit der Berechtigung, Issues in Ihrem Repository anzulegen. Lassen Sie den Agenten pro Fehler ein Issue mit Reproduktionsschritten, erwartetem und tatsächlichem Ergebnis, verwendetem Browser und Konsolenfehlern erstellen. Prüfen Sie jedes Issue, bevor Sie das Anlegen freigeben.
   Tipp: Lassen Sie einen häufig fehlschlagenden Ablauf vom Agenten als Playwright-Testdatei für die CI schreiben.

## Prompts zum Ausprobieren

- Öffne https://staging.example.com, registriere dich mit einer neuen Test-E-Mail, prüfe, ob du im Dashboard landest, und melde jeden Schritt.
- Melde dich als test-buyer@example.com an, lege zwei Artikel in den Warenkorb, löse den Code TEST10 ein und prüfe, ob sich die Summe ändert. Melde alles, was fehlschlägt.
- Fülle das Kontaktformular mit einer ungültigen E-Mail aus und prüfe, ob die Fehlermeldung neben dem Feld erscheint.
- Wiederhole den Checkout mit 375 px Fensterbreite und sag mir, was auf dem Smartphone kaputtgeht.
- Lege für jeden Fehler ein Issue in acme/web mit Reproduktionsschritten und Konsolenfehlern an.

## Was Sie brauchen

- Lokal installiertes Node.js
- Claude Code oder Cursor
- Staging-Umgebung und Testkonten
- Zugriff auf das GitHub-Repository zum Anlegen von Issues

## Grenzen

- Bei komplexen oder schlecht beschrifteten Seiten kann der Agent das falsche Element anklicken.
- Explorative Läufe sind langsamer und weniger reproduzierbar als eine geschriebene Testsuite.
- CAPTCHAs, Zwei-Faktor-Abfragen und E-Mail-Bestätigungen brauchen meist einen manuellen Umweg.

## Sicherheitshinweise

- Auf Staging testen, nicht in Produktion.
- Testkonten nutzen, nie echte Kundendaten.

## MCP-Server

- [Playwright MCP Server](https://github.com/microsoft/playwright-mcp): browser-control
- [GitHub MCP Server](https://github.com/github/github-mcp-server): repository-read, issue-write, pull-request-write

## Häufige Fragen

**Ersetzt das meine Playwright-Testsuite?**

Nein. Der Agent erkundet Abläufe anhand von Anweisungen in normaler Sprache, was für schnelle Prüfungen und neue Features hilft. Für Prüfungen bei jedem Commit lassen Sie ihn eine Playwright-Testdatei schreiben und in der CI ausführen.

**Welche Browser werden unterstützt?**

Playwright MCP nutzt standardmäßig Chromium und lässt sich auf Firefox, WebKit oder ein installiertes Chrome oder Edge umstellen. Den Browser wählen Sie über die Kommandozeilenoptionen des Servers.

**Kann ich es gegen Produktion laufen lassen?**

Nutzen Sie Staging mit Testkonten. Der Agent klickt wirklich und sendet Formulare ab; in Produktion könnte er Bestellungen auslösen oder E-Mails verschicken.

**Was kostet das?**

Playwright und sein MCP-Server sind kostenlos und Open Source. Sie zahlen nur die Nutzung Ihres KI-Hosts, etwa Claude Code oder Cursor.

## Tools

- **[GitHub](https://suiteintent.com/t/github?m=DE)**: Code-Hosting, Issues und Pull Requests. · Ideal für: Teams mit Code-Review per Pull Request · Gratis-Tarif · 10000