@codihaus/claude-skills 1.6.7 → 1.6.8

package/skills/dev-test/SKILL.md

@@ -38,166 +38,88 @@ Automated testing using Playwright to verify implementation works correctly.
 | Visual State | `browser_snapshot` | Render errors, missing elements |
 | Interactions | `browser_click`, `browser_type` | Form failures, broken buttons |
 
-## Workflow
+## Expected Outcome
+
+Test report showing whether implementation works correctly.
+
+**Report includes:**
+- Overall status (Pass/Fail + issue count)
+- Issues found (critical/warning with location + suggested fix)
+- Test steps executed (which passed/failed)
+- Suggested fixes or next actions
+
+## Success Criteria
+
+- No console errors during user flows
+- No network failures (API 4xx/5xx)
+- Expected elements render correctly
+- User interactions work as expected
+- Happy path completes successfully
+- All acceptance criteria from spec verified
+
+## What to Test
+
+**From UC spec:**
+- Expected user flows (happy path)
+- Required inputs and outputs
+- Acceptance criteria
+- Error scenarios (if specified)
+
+**From recent changes:**
+- Modified components/endpoints
+- New functionality added
+
+## Error Detection
+
+| Check | What It Catches |
+|-------|----------------|
+| Console Errors | JS errors, React errors, warnings, unhandled promises |
+| Network Failures | API 4xx/5xx, failed fetches, timeouts |
+| Visual State | Render errors, missing elements, wrong state |
+| Interactions | Form failures, broken buttons, navigation issues |
+
+**Error categories:**
+- 🔴 **Critical:** Breaks functionality, must fix
+- 🟡 **Warning:** Should fix, not blocking
+
+## Test Approach
+
+**1. Prepare:**
+- Identify what to test (from spec + recent changes)
+- Determine test URL (from spec or default: http://localhost:3000)
+- Verify dev server running (prompt if not)
+
+**2. Execute User Flows:**
+- Navigate to page
+- Capture initial state (check page loads, no immediate errors)
+- Execute happy path (fill forms, click buttons, navigate)
+- Wait for expected results
+- Capture final state
+
+**3. Collect Errors:**
+- Console messages (errors, warnings)
+- Network requests (find failures)
+- Visual issues (missing elements)
+
+**4. Report:**
+- Status (pass/fail + count)
+- Issues with severity, location, suggested fix
+- Test steps executed (which passed/failed)
+
+**5. Fix Loop (if --fix):**
+- For each issue: read file, identify fix, apply fix, re-test
+- Continue until fixed or max iterations (3) or needs user input
+- Re-run full test to verify
 
-### Phase 1: Prepare Test Context
-
-```
-1. Identify what to test
-   → From UC spec: expected flows, inputs, outputs
-   → From recent changes: modified components/endpoints
-
-2. Determine test URL
-   → From spec or project config
-   → Default: http://localhost:3000
-
-3. Check if dev server running
-   → Look for existing process on port
-   → If not, prompt user to start it
-```
-
-### Phase 2: Navigate and Capture Initial State
-
-```typescript
-// Navigate to the page
-await mcp__playwright__browser_navigate({
-  url: 'http://localhost:3000/login'
-});
-
-// Wait for page to stabilize
-await mcp__playwright__browser_wait_for({ time: 2 });
-
-// Capture accessibility snapshot (better than screenshot for analysis)
-await mcp__playwright__browser_snapshot({});
-```
-
-**Check for immediate errors:**
-- Page loads without errors
-- Expected elements present
-- No console errors on load
-
-### Phase 3: Test User Flows
-
-From the UC spec, execute the happy path:
-
-```typescript
-// Example: Login flow
-// Step 1: Fill form
-await mcp__playwright__browser_type({
-  element: 'email input',
-  ref: 'input-email',  // From snapshot
-  text: 'test@example.com'
-});
-
-await mcp__playwright__browser_type({
-  element: 'password input',
-  ref: 'input-password',
-  text: 'password123'
-});
-
-// Step 2: Submit
-await mcp__playwright__browser_click({
-  element: 'login button',
-  ref: 'btn-login'
-});
-
-// Step 3: Wait for response
-await mcp__playwright__browser_wait_for({
-  text: 'Dashboard'  // Expected after login
-});
-
-// Step 4: Verify result
-await mcp__playwright__browser_snapshot({});
-```
-
-### Phase 4: Collect Errors
-
-```typescript
-// Get console messages (errors, warnings)
-const console = await mcp__playwright__browser_console_messages({
-  level: 'error'
-});
-
-// Get network requests (find failures)
-const network = await mcp__playwright__browser_network_requests({});
-
-// Filter for issues:
-// - Console: Any error level messages
-// - Network: Status >= 400, or failed requests
-```
-
-**Error Categories:**
-
-| Category | Source | Examples |
-|----------|--------|----------|
-| JS Errors | Console | TypeError, ReferenceError, unhandled promise |
-| React Errors | Console | Component errors, hooks violations |
-| API Errors | Network | 400 Bad Request, 401 Unauthorized, 500 Server Error |
-| Network Errors | Network | Failed to fetch, CORS, timeout |
-| Render Errors | Snapshot | Missing elements, wrong state |
-
-### Phase 5: Generate Report
-
-```markdown
-## Test Report
-
-**Target**: UC-AUTH-001 Login
-**URL**: http://localhost:3000/login
-**Status**: ❌ Failed (3 issues)
-
-### Issues Found
-
-#### 🔴 Critical
-
-1. **API Error**: POST /api/auth/login returned 500
-   - Response: `{"error":"Internal server error"}`
-   - Likely cause: Database connection or missing env var
-   - File: Check `src/app/api/auth/login/route.ts`
-
-2. **Console Error**: Unhandled promise rejection
-   - Message: `Cannot read property 'id' of undefined`
-   - Stack: `LoginForm.tsx:45`
-   - Cause: API response handling when login fails
-
-#### 🟡 Warning
-
-3. **Console Warning**: Missing key prop in list
-   - Component: `ErrorMessages.tsx`
-   - Not critical but should fix
-
-### Test Steps Executed
-
-| Step | Action | Result |
-|------|--------|--------|
-| 1 | Navigate to /login | ✓ Page loaded |
-| 2 | Fill email | ✓ Input accepted |
-| 3 | Fill password | ✓ Input accepted |
-| 4 | Click login | ✗ Error occurred |
-| 5 | Verify dashboard | ⏭ Skipped |
-
-### Suggested Fixes
-
-1. Check database connection in backend
-2. Add error handling in LoginForm.tsx:45
-3. Add key prop to ErrorMessages.tsx list items
-```
+## Test Patterns
 
-### Phase 6: Fix Loop (if --fix)
+Available as reference in original SKILL.md:
+- Form submission
+- Navigation flow
+- API response validation
+- Error state testing
 
-```
-1. For each issue:
-   a. Read the problematic file
-   b. Identify the fix
-   c. Apply the fix
-   d. Re-run failed test step
-
-2. Continue until:
-   - All issues fixed, OR
-   - Max iterations reached (3), OR
-   - Issue requires user input
-
-3. Re-run full test to verify
-```
+Use Playwright MCP tools to interact with browser.
 
 ## Test Patterns