pp-planer/.sisyphus/CONTINUATION_GUIDE.md

CTS Herd + Playwright E2E Testing - Continuation Guide

Status: 7/24 implementation tasks complete (29.2%)
Worktree: /Users/thorsten/AI/cts-work (branch: cts-presenter-app)
Plan: .sisyphus/plans/cts-herd-playwright.md

---

QUICK START

# Verify environment
cd /Users/thorsten/AI/cts-work
curl -s -o /dev/null -w "%{http_code}" http://cts-work.test/login  # Should return 200
npx playwright test --list  # Should show auth.spec.ts and navigation.spec.ts

# Run existing tests
npx playwright test  # Should pass 12 tests
php artisan test     # Should pass 174 tests
npm run build        # Should succeed

---

COMPLETED WORK

Wave 1 — Environment + Foundation ✅

• T1: Herd Environment Configuration

  • .env.example updated for http://cts-work.test
  • App running on Herd (PHP 8.4)

• T2: Dummy Test Login Route + Button

  • POST /dev-login route (gated by app()->environment('local', 'testing'))
  • "Test-Anmeldung" button in Login.vue (amber styling)
  • Uses Auth::login() (NOT Auth::attempt())

• T3: Update UserFactory with OAuth Fields

  • Added churchtools_id, avatar, churchtools_groups, churchtools_roles

Wave 2 — Test Infrastructure ✅

• T4: Add data-testid Attributes

  • 98 attributes across 18 Vue components
  • Naming: {component-kebab}-{element-description}
  • Examples: login-oauth-button, service-list-edit-button, auth-layout-nav-services

• T5: Playwright Installation + Configuration

  • playwright.config.ts (baseURL, workers:1, no webServer)
  • tests/e2e/auth.setup.ts (POST /dev-login with XSRF token)
  • tests/e2e/.auth/user.json (storageState with session cookies)

Wave 3 — E2E Tests (Partial) ✅

• T6: Auth Tests (auth.spec.ts) — 5 tests passing
• T7: Navigation Tests (navigation.spec.ts) — 9 tests passing

---

REMAINING TASKS

Wave 3 — E2E Tests (6 tasks)

Pattern: Each task creates ONE spec file with ~5-8 tests. All use:

• Category: quick
• Skills: ["playwright"]
• Auth: storageState (authenticated by default)
• German UI: All assertions use German text

T8: Service List Tests (service-list.spec.ts)

data-testid references:

• service-list-table — Main table
• service-list-row-{id} — Each service row
• service-list-edit-button — Edit button
• service-list-finalize-button — Finalize button
• service-list-reopen-button — Reopen button
• service-list-download-button — Download button
• service-list-empty — Empty state message

Tests:

1. Service list page renders with table
2. Service rows display with correct data structure
3. Edit button navigates to edit page
4. Finalize button shows confirmation dialog
5. Finalized services show reopen/download buttons
6. Empty state displays when no services

German text: "Gottesdienste", "Bearbeiten", "Finalisieren", "Wieder öffnen", "Herunterladen"

T9: Service Edit — Information Block (service-edit-information.spec.ts)

data-testid references:

• information-block-upload-area — Upload drop zone
• information-block-thumbnail-{id} — Thumbnail items
• information-block-delete-{id} — Delete buttons
• information-block-datepicker-{id} — Expire date pickers

Tests:

1. Information block renders with upload area
2. Existing slides display as thumbnails
3. Delete button removes slide
4. Datepicker updates expire date
5. Upload area accepts file selection

German text: "Informationen", "Ablaufdatum", "Löschen"

T10: Service Edit — Moderation Block (service-edit-moderation.spec.ts)

Same pattern as T9 but for moderation block (no datepicker).

T11: Service Edit — Sermon Block (service-edit-sermon.spec.ts)

Same pattern as T9 but for sermon block (no datepicker).

T12: Service Edit — Songs Block (service-edit-songs.spec.ts)

data-testid references:

• songs-block-song-row-{id} — Song rows
• songs-block-arrangement-select-{id} — Arrangement dropdown
• songs-block-add-arrangement-{id} — Add arrangement button
• songs-block-clone-arrangement-{id} — Clone arrangement button
• songs-block-preview-{id} — Preview button
• songs-block-download-{id} — Download button
• songs-block-assign-{id} — Assign song button
• songs-block-translation-checkbox-{id} — Translation checkbox

Tests:

1. Songs block displays all service songs
2. Matched songs show arrangement selector
3. Unmatched songs show assign button
4. Translation checkbox toggles translation
5. Preview button opens preview modal
6. Download button triggers PDF download

German text: "Lieder", "Arrangement", "Vorschau", "Herunterladen", "Zuweisen", "Mit Übersetzung"

T13: Service Finalization (service-finalization.spec.ts)

data-testid references:

• service-list-finalize-button — Finalize button
• service-list-confirm-submit-button — Confirm button
• service-list-confirm-cancel-button — Cancel button
• service-list-reopen-button — Reopen button

Tests:

1. Finalize button shows confirmation dialog
2. Confirm button finalizes service
3. Cancel button closes dialog without finalizing
4. Finalized service shows reopen button
5. Reopen button reopens service

German text: "Finalisieren", "Bestätigen", "Abbrechen", "Wieder öffnen"

---

Wave 4 — E2E Tests (7 tasks)

T14-T19: Song DB Tests

Similar pattern to Wave 3. Each creates one spec file.

T20: Full Test Suite Run + Fix Failures

Integration task — run all tests, fix any failures, ensure full suite passes.

---

Final Verification (4 tasks)

F1: Plan Compliance Audit

• Agent: oracle
• Verify all plan requirements met
• Check all checkboxes marked correctly

F2: Code Quality Review

• Agent: unspecified-high
• Review all test code for quality
• Check for anti-patterns, hardcoded values

F3: Real Manual QA via Playwright

• Agent: unspecified-high + skill playwright
• Manually test the app via browser
• Verify all flows work end-to-end

F4: Scope Fidelity Check

• Agent: deep
• Verify scope matches original requirements
• Check no scope creep occurred

---

EXECUTION PATTERN

For Each Task (T8-T19)

1. Delegate:

   task(
     category="quick",
     load_skills=["playwright"],
     run_in_background=false,
     description="Create {filename}.spec.ts with E2E tests",
     prompt=`[6-section prompt with exact requirements]`
   )
   

2. Verify:

   # Check file created
   ls -la tests/e2e/{filename}.spec.ts
   
   # Run tests
   npx playwright test {filename}.spec.ts
   
   # Verify all pass
   # Expected: X passed, 0 failed
   

3. Mark Complete:

   Edit(".sisyphus/plans/cts-herd-playwright.md", [
     {op: "replace", pos: "{line}#{hash}", lines: "- [x] {task-number}. {task-name}"}
   ])
   

4. Commit:

   git add tests/e2e/{filename}.spec.ts
   git commit -m "test(e2e): add {description}
   
   - X tests: {test-list}
   - German UI text assertions
   - All tests passing"
   

Parallel Execution

Wave 3 tasks (T8-T13) can run in parallel:

// Dispatch all 6 simultaneously
task(category="quick", load_skills=["playwright"], ...)  // T8
task(category="quick", load_skills=["playwright"], ...)  // T9
task(category="quick", load_skills=["playwright"], ...)  // T10
task(category="quick", load_skills=["playwright"], ...)  // T11
task(category="quick", load_skills=["playwright"], ...)  // T12
task(category="quick", load_skills=["playwright"], ...)  // T13

---

CRITICAL PATTERNS

6-Section Prompt Template

## 1. TASK
Create `tests/e2e/{filename}.spec.ts` with E2E tests for {feature}.

**Exact Task from Plan (Line {line})**: - [ ] {task-number}. {task-name}

## 2. EXPECTED OUTCOME
- [ ] File created: `tests/e2e/{filename}.spec.ts` with ≥ {count} tests
- [ ] Tests cover: {list-of-scenarios}
- [ ] All tests use `data-testid` selectors from Task 4
- [ ] All tests use `storageState` (authenticated)
- [ ] All assertions use German text
- [ ] Verification: `npx playwright test {filename}.spec.ts` → all pass

## 3. REQUIRED TOOLS
- **Read**: Read {component-files} for context
- **Write**: Create `tests/e2e/{filename}.spec.ts`
- **Bash**: Run `npx playwright test {filename}.spec.ts` for verification

## 4. MUST DO
- **Test 1**: {description}
  ```typescript
  test('{name}', async ({ page }) => {
    await page.goto('{url}');
    await page.waitForLoadState('networkidle');
    await expect(page.getByTestId('{testid}')).toBeVisible();
  });

• [Repeat for each test]
• Use German Text: {list-of-german-terms}
• Save Evidence: .sisyphus/evidence/task-{number}-{name}.txt
• Append to Notepad: .sisyphus/notepads/cts-herd-playwright/learnings.md

5. MUST NOT DO

• Do NOT {anti-pattern-1}
• Do NOT {anti-pattern-2}

6. CONTEXT

Worktree

• Path: /Users/thorsten/AI/cts-work
• App URL: http://cts-work.test

Inherited Wisdom

• Test Strategy: No CTS data assertions, structural patterns only
• German UI: All assertions use German with "Du" form
• data-testid naming: {component-kebab}-{element-description}
• Auth Setup: storageState pattern from tests/e2e/auth.setup.ts
• Page Load: Use page.waitForLoadState('networkidle') for reliability

Dependencies

• ✅ T4: data-testid attributes in {component-list}
• ✅ T5: Playwright infrastructure
• ✅ T6-T7: Test patterns established

data-testid Reference

• {testid-1} — {description}
• {testid-2} — {description}

Verification Command

cd /Users/thorsten/AI/cts-work
npx playwright test {filename}.spec.ts

### Test Structure Pattern

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

// Test 1: {description}
test('{name}', async ({ page }) => {
    await page.goto('{url}');
    await page.waitForLoadState('networkidle');
    
    // Verify URL
    await expect(page).toHaveURL(/{pattern}/);
    
    // Verify elements visible
    await expect(page.getByTestId('{testid}')).toBeVisible();
    
    // Verify German text
    await expect(page.getByText('{german-text}')).toBeVisible();
});

// Test 2: {description}
test('{name}', async ({ page }) => {
    await page.goto('{url}');
    await page.waitForLoadState('networkidle');
    
    // Interact with element
    await page.getByTestId('{testid}').click();
    
    // Verify result
    await expect(page).toHaveURL(/{pattern}/);
});

---

TROUBLESHOOTING

Session Timeouts

If task times out after 10 minutes:

1. Check if file was created: ls -la tests/e2e/{filename}.spec.ts
2. If created, verify tests: npx playwright test {filename}.spec.ts
3. If tests pass, mark complete and commit
4. If tests fail, resume session: task(session_id="{id}", prompt="fix: {error}")

Test Failures

Common issues:

• Element not found: Check data-testid spelling in Vue component
• Timeout: Increase timeout or add page.waitForLoadState('networkidle')
• Redirect to login: storageState expired, re-run auth setup: npx playwright test --project=setup

SQLite BUSY Errors

If tests fail with SQLITE_BUSY:

• Verify workers: 1 in playwright.config.ts
• Verify fullyParallel: false in playwright.config.ts
• Stop any running php artisan serve processes

---

VERIFICATION CHECKLIST

Before marking task complete:

• File created in correct location
• All tests pass (npx playwright test {filename}.spec.ts)
• German text used in all assertions
• data-testid selectors used (no CSS selectors)
• Evidence file saved
• Notepad updated (if learnings discovered)
• Plan checkbox marked complete
• Changes committed with clear message

---

FINAL DELIVERABLES

When all tasks complete:

• 15 E2E test spec files (~40-50 tests total)
• All tests passing
• All plan checkboxes marked complete
• All changes committed
• Final verification by 4 review agents
• Handoff document for production deployment

---

CONTACT POINTS

Plan File: .sisyphus/plans/cts-herd-playwright.md (READ-ONLY for subagents)
Notepad: .sisyphus/notepads/cts-herd-playwright/ (APPEND-ONLY)
Evidence: .sisyphus/evidence/ (CREATE new files)
Worktree: /Users/thorsten/AI/cts-work (branch: cts-presenter-app)

---

Last Updated: 2026-03-01 23:10 UTC
Progress: 7/24 tasks complete (29.2%)
Next: Complete Wave 3 tasks T8-T13 (6 tasks in parallel)