e2e-testing
starsforks
How to install e2e-testing?
svenja-dev/claude-code-skills/e2e-testing
$npx -y skills add Svenja-dev/claude-code-skills --skill e2e-testingteste, e2e, playwright, browser test, visual test, smoke test - Aufruf: /e2e-test [suite] [--flags]SKILL.md
| 1 | # E2E Testing Skill |
| 2 | |
| 3 | ## Trigger |
| 4 | |
| 5 | - Keywords: `teste`, `e2e`, `playwright`, `browser test`, `visual test`, `smoke test` |
| 6 | - Aufruf: `/e2e-test [suite] [--flags]` |
| 7 | |
| 8 | ## Beschreibung |
| 9 | |
| 10 | Automatisierter E2E-Test mit menschlichem Verhalten für Preview und Production. |
| 11 | Nutzt Chrome MCP oder Playwright MCP für Browser-Automatisierung. |
| 12 | |
| 13 | ## Test-Suiten |
| 14 | |
| 15 | | Suite | Dauer | Beschreibung | |
| 16 | | ---------- | ----- | --------------------------------------------- | |
| 17 | | `smoke` | 30s | Login, Upload, Basis-UI (Default bei "teste") | |
| 18 | | `full` | 5min | Alle P0+P1 Szenarien | |
| 19 | | `visual` | 2min | Nur Screenshot-Vergleiche | |
| 20 | | `upload` | 1min | Alle Dateiformate | |
| 21 | | `download` | 2min | Export-Funktionen | |
| 22 | | `login` | 30s | Auth Flow | |
| 23 | | `api` | 1min | API-Endpoint Tests | |
| 24 | |
| 25 | ## Flags |
| 26 | |
| 27 | | Flag | Beschreibung | |
| 28 | | -------------------- | -------------------------------------- | |
| 29 | | `--preview` | Nur localhost testen | |
| 30 | | `--production` | Nur Production-URL testen | |
| 31 | | `--quick` | Nur P0-Szenarien (schnellster Test) | |
| 32 | | `--human` | Chrome MCP mit echtem Browser | |
| 33 | | `--headless` | Playwright MCP headless (CI/CD) | |
| 34 | | `--update-baselines` | Screenshot-Baselines aktualisieren | |
| 35 | | `--mobile` | Mobile Viewports testen (375px, 768px) | |
| 36 | |
| 37 | ## Workflow |
| 38 | |
| 39 | ``` |
| 40 | 1. UMGEBUNGS-CHECK |
| 41 | - Prüfe ob localhost läuft (curl/fetch) |
| 42 | - Prüfe ob Production-URL erreichbar |
| 43 | - Wähle Test-Umgebung basierend auf Flags |
| 44 | |
| 45 | 2. BROWSER-SETUP |
| 46 | - Wenn --human: Nutze Chrome MCP (mcp__claude-in-chrome__) |
| 47 | - Sonst: Nutze Playwright MCP (mcp__playwright__) |
| 48 | - Viewport: 1280x720 (Desktop) oder 375x667 (Mobile) |
| 49 | |
| 50 | 3. HUMAN BEHAVIOR AKTIVIEREN |
| 51 | - Randomisierte Delays: 200-800ms zwischen Aktionen |
| 52 | - Typing-Speed: 50-150ms pro Taste |
| 53 | - Hover vor Click (200-500ms Pause) |
| 54 | - Smooth Scroll statt instant |
| 55 | |
| 56 | 4. TEST-SUITE AUSFÜHREN |
| 57 | - Für jeden Test: Screenshot vorher/nachher |
| 58 | - Bei Fehler: Screenshot + Console Logs speichern |
| 59 | - Download-Verifizierung: Dateigröße prüfen |
| 60 | |
| 61 | 5. REPORT GENERIEREN |
| 62 | - Markdown-Report in .playwright-mcp/reports/ |
| 63 | - Diff-Images bei visuellen Abweichungen |
| 64 | - Zusammenfassung mit Pass/Fail/Flaky Status |
| 65 | ``` |
| 66 | |
| 67 | ## Test-Szenarien (P0 - Geschäftskritisch) |
| 68 | |
| 69 | ### 1. Landing Page Load |
| 70 | |
| 71 | ``` |
| 72 | - Navigiere zu URL |
| 73 | - Warte auf Hauptelement sichtbar |
| 74 | - Prüfe Logo/Branding sichtbar |
| 75 | - Screenshot: landing-page.png |
| 76 | ``` |
| 77 | |
| 78 | ### 2. Login/Auth Flow |
| 79 | |
| 80 | ``` |
| 81 | - Klicke auf Login Button |
| 82 | - Warte auf Modal/Page-Animation |
| 83 | - Prüfe Auth-Optionen sichtbar (OAuth, Email, etc.) |
| 84 | - Screenshot: login-modal.png |
| 85 | ``` |
| 86 | |
| 87 | ### 3. Sprache umschalten (wenn i18n) |
| 88 | |
| 89 | ``` |
| 90 | - Finde Language Toggle |
| 91 | - Klicke mit Human Delay |
| 92 | - Warte auf Text-Änderung |
| 93 | - Verifiziere UI-Texte geändert |
| 94 | - Screenshot: language-toggle.png |
| 95 | ``` |
| 96 | |
| 97 | ### 4. Datei Upload (wenn vorhanden) |
| 98 | |
| 99 | ``` |
| 100 | - Klicke auf Upload-Bereich |
| 101 | - Wähle Testdatei |
| 102 | - Warte auf Bestätigung |
| 103 | - Prüfe Dateiname angezeigt |
| 104 | - Screenshot: file-uploaded.png |
| 105 | ``` |
| 106 | |
| 107 | ### 5. Hauptaktion ausführen |
| 108 | |
| 109 | ``` |
| 110 | - Führe primäre App-Funktion aus |
| 111 | - Warte auf Loading-State |
| 112 | - Warte auf Ergebnis (max 60s) |
| 113 | - Prüfe Ergebnis-Inhalt vorhanden |
| 114 | - Screenshot: result.png |
| 115 | ``` |
| 116 | |
| 117 | ### 6. Export/Download (wenn vorhanden) |
| 118 | |
| 119 | ``` |
| 120 | - Klicke Download Button |
| 121 | - Warte auf Download-Event |
| 122 | - Verifiziere Dateiformat korrekt |
| 123 | - Verifiziere Dateigröße > Minimum |
| 124 | - Screenshot: download-complete.png |
| 125 | ``` |
| 126 | |
| 127 | ## Test-Szenarien (P1 - Wichtig) |
| 128 | |
| 129 | ### 7. Navigation/History |
| 130 | |
| 131 | ``` |
| 132 | - Klicke auf Navigation-Element |
| 133 | - Warte auf Animation |
| 134 | - Prüfe korrekter Content geladen |
| 135 | ``` |
| 136 | |
| 137 | ### 8. Theme Toggle (wenn vorhanden) |
| 138 | |
| 139 | ``` |
| 140 | - Finde Theme-Toggle |
| 141 | - Notiere aktuelle Farben |
| 142 | - Klicke Toggle |
| 143 | - Verifiziere Farben geändert |
| 144 | - Screenshot: theme-toggle.png |
| 145 | ``` |
| 146 | |
| 147 | ### 9. Responsive Design |
| 148 | |
| 149 | ``` |
| 150 | - Setze Viewport auf 375x667 |
| 151 | - Prüfe Mobile-Navigation sichtbar |
| 152 | - Prüfe Hauptfunktionen erreichbar |
| 153 | - Screenshot: mobile-view.png |
| 154 | ``` |
| 155 | |
| 156 | ### 10. Error Handling |
| 157 | |
| 158 | ``` |
| 159 | - Provoziere Fehler (ungültige Eingabe) |
| 160 | - Warte auf Error-Message |
| 161 | - Prüfe Error ist benutzerfreundlich |
| 162 | - Screenshot: error-state.png |
| 163 | ``` |
| 164 | |
| 165 | ## Human Behavior Functions |
| 166 | |
| 167 | ```typescript |
| 168 | // Randomisierter Delay (200-800ms) |
| 169 | async function humanDelay() { |
| 170 | const delay = 200 + Math.random() * 600; |
| 171 | await page.waitForTimeout(delay); |
| 172 | } |
| 173 | |
| 174 | // Menschliches Tippen (50-150ms pro Taste) |
| 175 | async function humanType(selector: string, text: string) { |
| 176 | await page.click(selector); |
| 177 | await humanDelay(); |
| 178 | for (const char of text) { |
| 179 | await page.keyboard.type(char); |
| 180 | await page.waitForTimeout(50 + Math.random() * 100); |
| 181 | } |
| 182 | } |
| 183 | |
| 184 | // Hover -> Pause -> Click Pattern |
| 185 | async function humanClick(selector: string) { |
| 186 | await page.hover(selector); |
| 187 | await page.waitForTimeout(200 + Math.random() * 300); |
| 188 | await page.click(selector); |
| 189 | await humanDelay(); |
| 190 | } |
| 191 | |
| 192 | // Smooth Scroll |
| 193 | async function humanScrol |
People who liked this also viewed
6 picksType
- tddSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- test-driven-developmentUse when implementing any feature or bugfix, before writing implementation codeSkillsJul 2026
- qaSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- verification-before-completionUse when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidenceSkillsJul 2026
- webapp-testingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser lSkillsJul 2026
- playwright-best-practicesUse when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, teSkillsJul 2026
