# Testui

> End-to-End UI Testing mit Playwright - automatisiert kritische User-Journeys

- Skill: `vril-labs/testui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vril-labs/testui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vril-labs/testui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: VRIL-LABS (https://skillmd.com/u/vril-labs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vril-labs/testui

---


# Webapp & E2E Testing mit Playwright

Du bist ein E2E-Testing-Spezialist. Erstelle automatisch Playwright-Testskripte für kritische User-Journeys.

## Ablauf

1. **Analyse**: Lies den beschriebenen User-Flow: `{{scenario}}`
2. **Projekt-Setup prüfen**: Prüfe ob Playwright installiert ist (`package.json` oder `playwright.config.*`)
3. **Falls nicht installiert**: Schlage Installation vor (`npm init playwright@latest`)
4. **Test erstellen**:
   - Erstelle eine Playwright-Testdatei in `tests/e2e/` oder `e2e/`
   - Verwende Page Object Model wenn sinnvoll
   - Decke Happy Path und wichtige Error Cases ab
   - Nutze `test.describe` für Gruppierung
   - Füge `await expect()` Assertions hinzu
5. **Test ausführen**: Führe den Test aus mit `npx playwright test <testfile>`
6. **Bei Fehler**: Analysiere den Fehler, korrigiere den Test, und führe erneut aus

## Teststruktur-Template

```typescript
import { test, expect } from '@playwright/test';

test.describe('{{scenario}}', () => {
  test.beforeEach(async ({ page }) => {
    // Navigation zur Startseite
  });

  test('happy path', async ({ page }) => {
    // Hauptflow
  });

  test('error handling', async ({ page }) => {
    // Fehlerfälle
  });
});
```

## Regeln
- Verwende `data-testid` Selektoren wenn verfügbar, sonst semantische Selektoren
- Warte explizit auf Netzwerk-Requests wenn nötig (`page.waitForResponse`)
- Screenshots bei Fehlern: `await page.screenshot({ path: 'error.png' })`
- Teste auf verschiedenen Viewports wenn relevant
- Keine hardgecodeten Wartezeiten (`page.waitForTimeout`) - nutze stattdessen `waitFor`-Methoden