playwright-generate-mcp

Ein Enterprise-grade Model Context Protocol (MCP)-Server, der KI-Programmierassistenten (Cursor, Claude Desktop, Antigravity, Roo Code usw.) dazu befähigt, robuste, wartbare und flake-resistente Playwright-E2E-Tests zu generieren, zu bewerten, auszuführen und automatisch zu heilen.

Er erzwingt eine domänengetriebene Page-Object-Model (POM)-Architektur, bietet dateiübergreifendes Qualitäts-Scoring, extrahiert umfangreiche Single-Turn-Fehlerdiagnosen und befolgt strenge Web-First-Anti-Flakiness-Regeln.

✨ Hauptfunktionen

• 🏗️ Domänengetriebene POM-Architektur: Erzwingt die Trennung der Zuständigkeiten zwischen deklarativen Specs, Page Objects, Custom Fixtures und Dynamic Data Factories.

• 🔍 Dateiübergreifendes POM-Qualitäts-Scoring: score_test_quality und run_playwright_test durchlaufen automatisch Importabhängigkeiten (.spec.ts $\rightarrow$ .fixture.ts $\rightarrow$ *.page.ts / *.component.ts) und bewerten Locators und Anti-Patterns über alle zugehörigen Dateien hinweg.

• ⚡ Umfangreiche Single-Turn-Diagnosen: Wenn ein Test fehlschlägt, liefert run_playwright_test sofort in einem einzigen Durchgang den genauen Datei- und Zeilenort, die Fehlerkategorie, die letzten 3–5 Aktionsschritte vor dem Fehlschlag, Browser-Konsolenprotokolle, fehlgeschlagene HTTP-Anfragen (4xx/5xx) und Screenshot-Pfade.

• 🛡️ Strenge Anti-Flakiness-Regeln: Erkennt und unterbindet willkürliche Sleeps (waitForTimeout, setTimeout), nicht abgewartete Aktionen, networkidle-Abhängigkeiten und manuelle Textextraktionen zugunsten von Web-First-Assertions mit automatischer Wiederholung.

• 🧭 Zustandslose automatische Root-Erkennung: Durchsucht automatisch übergeordnete Verzeichnisse, um playwright.config.{ts,js,mjs,cjs,mts,cts} zu finden, ohne dass eine manuelle Pfadkonfiguration erforderlich ist.

• 💬 Adaptive interaktive Bestätigungen: Unterstützt interaktive UI-Modale (ask_question, vscode_askQuestions) oder formatierte nummerierte Listen, bevor Test-Heilungen angewendet werden.

Related MCP server: Limetest MCP Server

📁 Architekturstandard

Dieses MCP leitet KI-Agenten an, Tests in einer sauberen domänengetriebenen Hierarchie zu strukturieren:

tests/e2e/
├── domain/                      # Grouped by business features
│   └── {feature}/
│       ├── pages/               # Page Objects / Component Objects
│       │   └── {step}.page.ts
│       └── {feature}.fixture.ts # Custom Fixture injecting Page Objects & Data
├── factory/                     # Dynamic test data builders
│   └── {entity}.factory.ts      # Unique data per run (timestamp / Faker)
└── specs/                       # Declarative, readable test specs
    └── {feature}.spec.ts

Kern-Designregeln

1. Strikte Trennung: Keine rohen Locators oder direkten DOM-Manipulationen in *.spec.ts-Dateien. Alle UI-Interaktionen befinden sich in Page-/Component-Objekten.

2. Custom Fixtures: Injizieren Sie Page Objects und Testdaten mithilfe von test.extend<Fixtures>() anstelle manueller new Page()-Instanziierungen in Specs.

3. Dynamic Data Factories: Generieren Sie pro Lauf eindeutige Testdaten, um Datenbank-Kollisionen durch Unique-Constraints bei Testwiederholungen zu verhindern.

4. Semantische Locators: Bevorzugen Sie getByRole > getByLabel / getByPlaceholder > getByText > getByTestId. Tief verschachteltes CSS (div > div > span) ist strengstens verboten.

5. Tagging-Konventionen:

   • @smoke: Kritische Happy Paths.

   • @regression: Umfassende Benutzerabläufe.

   • @ui: Reine UI-/Frontend-Tests, die page.route() verwenden, um API-Antworten zu stubben.

   • @integration: Tests, die gegen echte Backend-APIs validieren.

🛠️ MCP-Tools

📋 MCP-Prompts

• playwright_e2e_workflow: Vollständiger End-to-End-Prompt, der KI-Agenten die domänengetriebene POM-Architektur, Codegenerierungssequenzen (Schritt A bis Schritt E), strenge Anti-Flakiness-Schreibregeln, Single-Turn-Diagnosen und sichere Heilungs-Workflows vermittelt.

🚀 Installation & Einrichtung

1. Aus dem Quellcode erstellen

git clone https://github.com/your-username/playwright-generate-mcp.git
cd playwright-generate-mcp
npm install
npm run build

2. MCP-Client konfigurieren

Fügen Sie den Server zu Ihrer MCP-Konfigurationsdatei hinzu (z. B. claude_desktop_config.json, Cursor-Einstellungen oder Antigravity-MCP-Einstellungen):

{
  "mcpServers": {
    "playwright-generate": {
      "command": "node",
      "args": ["/absolute/path/to/playwright-generate-mcp/dist/index.js"]
    }
  }
}

Oder wenn das Paket auf NPM veröffentlicht wurde:

{
  "mcpServers": {
    "playwright-generate": {
      "command": "npx",
      "args": ["-y", "playwright-generate-mcp"]
    }
  }
}

🧑💻 Entwicklung

npm run dev     # tsx watch mode
npm run build   # Compile TypeScript to dist/
npm start       # Run compiled MCP server

📄 Lizenz

MIT