JantonioFC/skillsbank

Playwright Pro

Produktionsreifes Playwright-Test-Toolkit für KI-Coding-Agenten.

Verfügbare Befehle

Bei Installation als Claude Code-Plugin sind diese als /pw:-Befehle verfügbar:

Befehl	Funktion
/pw:init	Playwright einrichten – erkennt Framework, generiert Konfiguration, CI, ersten Test
/pw:generate <spezifikation>	Tests aus User Story, URL oder Komponente generieren
/pw:review	Tests auf Anti-Patterns und Abdeckungslücken prüfen
/pw:fix <test>	Fehlschlagende oder flaky Tests diagnostizieren und beheben
/pw:migrate	Von Cypress oder Selenium zu Playwright migrieren
/pw:coverage	Analysieren, was getestet wird und was fehlt
/pw:testrail	Mit TestRail synchronisieren – Testfälle lesen, Ergebnisse übertragen
/pw:browserstack	Auf BrowserStack ausführen, Cross-Browser-Berichte abrufen
/pw:report	Testbericht im gewünschten Format erstellen

Schnellstart-Workflow

Die empfohlene Reihenfolge für die meisten Projekte:

1. /pw:init          → Richtet Konfiguration, CI-Pipeline und einen ersten Rauchtest ein
2. /pw:generate      → Generiert Tests aus deiner Spezifikation oder URL
3. /pw:review        → Validiert Qualität und zeigt Anti-Patterns an      ← immer nach generate ausführen
4. /pw:fix <test>    → Diagnostiziert und repariert fehlschlagende/flaky Tests  ← ausführen, wenn CI rot wird

Validierungs-Checkpoints:

• Nach /pw:generate – immer /pw:review vor dem Commit ausführen; es erkennt automatisch Locator-Anti-Patterns und fehlende Assertions.
• Nach /pw:fix – die gesamte Suite lokal erneut ausführen (npx playwright test), um sicherzustellen, dass die Reparatur keine Regressionen einführt.
• Nach /pw:migrate – /pw:coverage ausführen, um die Gleichwertigkeit mit der alten Suite zu bestätigen, bevor Cypress/Selenium-Tests stillgelegt werden.

Beispiel: Generieren → Prüfen → Reparieren

# 1. Tests aus einer User Story generieren
/pw:generate "Als Benutzer kann ich mich mit E-Mail und Passwort anmelden"

# Generiert: tests/auth/login.spec.ts
# → Playwright Pro erstellt die Datei mit der Authentifizierungsvorlage.

# 2. Die generierten Tests prüfen
/pw:review tests/auth/login.spec.ts

# → Meldung: Ein Test verwendet page.locator('input[type=password]') – schlägt getByLabel('Passwort') vor
# → Die Korrektur wird automatisch angewendet.

# 3. Lokal ausführen, um zu bestätigen
npx playwright test tests/auth/login.spec.ts --headed

# 4. Wenn ein Test in CI flaky ist, diagnostizieren
/pw:fix tests/auth/login.spec.ts
# → Erkennt fehlende Web-First-Assertion; ersetzt waitForTimeout(2000) durch expect(locator).toBeVisible()

Goldene Regeln

1. getByRole() vor CSS/XPath – widerstandsfähig gegen Markup-Änderungen
2. Niemals page.waitForTimeout() – Web-First-Assertions verwenden
3. expect(locator) wiederholt automatisch; expect(await locator.textContent()) nicht
4. Jeden Test isolieren – kein gemeinsam genutzter Zustand zwischen Tests
5. baseURL in der Konfiguration – keine hartcodierten URLs
6. Wiederholungen: 2 in CI, 0 lokal
7. Traces: 'on-first-retry' – umfangreiches Debugging ohne Verlangsamung
8. Fixtures vor Globalen – test.extend() für gemeinsamen Zustand
9. Ein Verhalten pro Test – mehrere zusammenhängende Assertions sind in Ordnung
10. Nur externe Dienste mocken – niemals die eigene App mocken

Locator-Priorität

1. getByRole()        — Schaltflächen, Links, Überschriften, Formularelemente
2. getByLabel()       — Formularfelder mit Beschriftungen
3. getByText()        — Nicht interaktiver Text
4. getByPlaceholder() — Eingabefelder mit Platzhalter
5. getByTestId()      — wenn keine semantische Option existiert
6. page.locator()     — CSS/XPath als letztes Mittel

Enthaltene Inhalte

• 9 Fähigkeiten mit detaillierten Schritt-für-Schritt-Anleitungen
• 3 spezialisierte Agenten: Test-Architekt, Test-Debugger, Migrationsplaner
• 55 Testvorlagen: Authentifizierung, CRUD, Checkout, Suche, Formulare, Dashboard, Einstellungen, Onboarding, Benachrichtigungen, API, Barrierefreiheit
• 2 MCP-Server (TypeScript): TestRail- und BrowserStack-Integrationen
• Intelligente Hooks: Automatische Testqualitätsvalidierung, automatische Erkennung von Playwright-Projekten
• 6 Referenzdokumente: Goldene Regeln, Locators, Assertions, Fixtures, Fallstricke, Flaky Tests
• Migrationsleitfäden: Cypress- und Selenium-Zuordnungstabellen

Integrations-Setup

TestRail (Optional)

export TESTRAIL_URL="https://deine-instanz.testrail.io"
export TESTRAIL_USER="[email protected]"
export TESTRAIL_API_KEY="dein-api-key"

BrowserStack (Optional)

export BROWSERSTACK_USERNAME="dein-benutzername"
export BROWSERSTACK_ACCESS_KEY="dein-access-key"

Kurzreferenz

Siehe Verzeichnis reference/ für:

• golden-rules.md — Die 10 unverhandelbaren Regeln
• locators.md — Vollständige Locator-Priorität mit Spickzettel
• assertions.md — Referenz zu Web-First-Assertions
• fixtures.md — Benutzerdefinierte Fixtures und storageState-Muster
• common-pitfalls.md — Die 10 häufigsten Fehler und ihre Behebung
• flaky-tests.md — Diagnosebefehle und schnelle Korrekturen

Siehe templates/README.md für das vollständige Vorlagenverzeichnis.

Wann verwenden

Verwende diese Fähigkeit, wenn du Anleitung oder Automatisierung für Playwright Pro benötigst.