Menu
Create E2E tests with screenshots and build step-by-step documentation for the public website
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Check which feature plans are fully implemented and archive completed ones
Fix a bug from a GitHub Issue using the Red-Green test approach
Implement the next feature from the roadmap or a specific feature by name
Plan a new feature, add it to the roadmap, and create a specification document
Report a bug as a GitHub Issue with description, reproduction steps, and initial analysis
Build and start ReadyStackGo container for manual testing
| name | document-feature |
| description | Create E2E tests with screenshots and build step-by-step documentation for the public website |
| argument-hint | <feature-name> |
Erstelle E2E-Tests, Screenshots und eine Schritt-für-Schritt-Anleitung für ein Feature auf der PublicWeb-Website.
Feature: $ARGUMENTS
Dieser Skill automatisiert den gesamten Dokumentations-Workflow für ein Feature:
$ARGUMENTS leer ist, frage den User welches Feature dokumentiert werden soll.src/ReadyStackGo.WebUi/src/pages/ und src/ReadyStackGo.WebUi/src/components/src/ReadyStackGo.PublicWeb/src/content/docs/de/docs/ und en/docs/docs/src/ReadyStackGo.WebUi/e2e/Frage den User mit AskUserQuestion:
Soll dieses Feature als Highlight auf der Landing Page aufgenommen werden?
Highlight-Features erscheinen prominent in der Feature-Übersicht auf der Startseite.
Optionen:
1. Nein, nur Dokumentation erstellen (Recommended)
2. Ja, als Highlight-Feature auf der Landing Page aufnehmen
Falls Highlight: Frage nach Titel (kurz, DE + EN), Beschreibung (1 Satz, DE + EN) und ob ein Badge (z.B. "NEW") angezeigt werden soll.
Erstelle eine neue Test-Datei unter src/ReadyStackGo.WebUi/e2e/<feature-name>.spec.ts.
e2e/cicd-settings.spec.ts):import { test, expect } from '@playwright/test';
import * as path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const SCREENSHOT_DIR = path.join(__dirname, '..', '..', 'ReadyStackGo.PublicWeb', 'public', 'images', 'docs');
test.describe('<Feature Name>', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/login');
await page.fill('input[type="text"]', 'admin');
await page.fill('input[type="password"]', 'Admin1234');
await page.click('button[type="submit"]');
await page.waitForURL(/\/(dashboard)?$/, { timeout: 10000 });
});
test('should <step description>', async ({ page }) => {
// Navigation + Assertions
await page.goto('/target-page');
await page.waitForLoadState('networkidle');
// Screenshot an jedem wichtigen Schritt
await page.screenshot({
path: path.join(SCREENSHOT_DIR, '<feature>-01-<beschreibung>.png'),
fullPage: false
});
});
});
src/ReadyStackGo.PublicWeb/public/images/docs/<feature>-<##>-<beschreibung>.png (z.B. cicd-01-settings-nav.png)fullPage: false verwenden (nur Viewport)getByRole() und getByText({ exact: true }) statt getByText() um Strict-Mode-Fehler zu vermeiden{ exact: true } verwendenrow.getByRole('button', { name: '...' }) statt row.getByText('...')docker compose up -d --build
curl -sf -X POST http://localhost:8080/api/wizard/admin \
-H "Content-Type: application/json" \
-d '{"username":"admin","password":"Admin1234"}'
curl -sf -X POST http://localhost:8080/api/wizard/organization \
-H "Content-Type: application/json" \
-d '{"id":"e2e-test-org","name":"E2E Test Organization"}'
curl -sf -X POST http://localhost:8080/api/wizard/environment \
-H "Content-Type: application/json" \
-d '{"name":"default","socketPath":"/var/run/docker.sock"}'
curl -sf -X POST http://localhost:8080/api/wizard/install \
-H "Content-Type: application/json" -d '{}'
Erstelle eine temporäre Playwright-Config die auf den Container zeigt:
// playwright.temp.config.ts (nach Tests löschen!)
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './e2e',
fullyParallel: false,
workers: 1,
reporter: 'list',
timeout: 60 * 1000,
expect: { timeout: 10 * 1000 },
use: {
baseURL: 'http://localhost:8080',
actionTimeout: 15 * 1000,
navigationTimeout: 30 * 1000,
},
projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
});
cd src/ReadyStackGo.WebUi
npx playwright test <feature-name> --config=playwright.temp.config.ts --reporter=list
waitForLoadState('networkidle') oder waitForTimeout() einfügendocker compose down -v && docker compose up -d
src/ReadyStackGo.PublicWeb/public/images/docs/ erzeugt wurdenplaywright.temp.config.tssrc/ReadyStackGo.PublicWeb/src/content/docs/de/docs/<feature-name>.mdsrc/ReadyStackGo.PublicWeb/src/content/docs/en/docs/<feature-name>.mdci-cd-integration.md):---
title: <Feature-Titel>
description: <Kurzbeschreibung>
---
<Einleitungsparagraph: Was macht das Feature, wann braucht man es?>
## Übersicht / Overview
<Tabelle oder kurze Auflistung der Use Cases>
---
## Schritt für Schritt: <Hauptworkflow> / Step by Step: <Main Workflow>
### Schritt 1: <Aktion>
<Kurze Anleitung was zu tun ist>
---
### Schritt 2: <Aktion>
<Anleitung mit Details>
:::tip[<Tipp-Titel>]
<Hilfreicher Hinweis>
:::
---
(... weitere Schritte ...)
## <Zusätzliche Sektionen je nach Feature>
<z.B. API-Parameter, Konfiguration, Sicherheitshinweise>
---
## Fehlerbehandlung / Error Handling
<HTTP-Status-Tabelle oder häufige Fehler und deren Lösung>
:::tip, :::note, :::caution CalloutsFalls die Datei neu ist, prüfe ob sie in die Sidebar-Navigation aufgenommen werden muss:
src/ReadyStackGo.PublicWeb/src/content/docs/de/docs/index.mdsrc/ReadyStackGo.PublicWeb/src/content/docs/en/docs/index.mdNur wenn in Schritt 2 als Highlight bestätigt wurde!
Datei: src/ReadyStackGo.PublicWeb/src/i18n/translations.ts
Füge neue Translation Keys hinzu (in beide Sprachen):
// DE
'features.<feature>.title': '<Titel auf Deutsch>',
'features.<feature>.desc': '<Beschreibung auf Deutsch (1 Satz)>',
// EN
'features.<feature>.title': '<Title in English>',
'features.<feature>.desc': '<Description in English (1 sentence)>',
Datei: src/ReadyStackGo.PublicWeb/src/components/Features.astro
Füge das Feature zum highlightedFeatures Array hinzu:
{
icon: `<SVG path data>`,
titleKey: 'features.<feature>.title' as const,
descKey: 'features.<feature>.desc' as const,
badge: 'NEW', // Optional
link: `/${lang}/docs/<feature-name>`,
},
SVG Icons: Verwende Heroicons (https://heroicons.com/) – nur den <path> Tag kopieren. Stil: outline, 24x24.
Die Translation Keys müssen im Translations Type in translations.ts vorhanden sein, sonst compiliert die Website nicht. Prüfe mit:
cd src/ReadyStackGo.PublicWeb && npm run build
git add <alle neuen/geänderten Dateien>
git commit -m "<Aussagekräftige Commit-Message>"
git push
Commit-Regeln (siehe CLAUDE.md):
Vor dem Abschluss prüfen:
public/images/docs/<feature>-*.png