prowler-test-ui

Generic Patterns: For base Playwright patterns (Page Object Model, selectors, helpers), see the playwright skill. This skill covers Prowler-specific conventions only.

Prowler UI Test Structure

ui/tests/
├── base-page.ts              # Prowler-specific base page
├── helpers.ts                # Prowler test utilities
└── {page-name}/
    ├── {page-name}-page.ts   # Page Object Model
    ├── {page-name}.spec.ts   # ALL tests (single file per feature)
    └── {page-name}.md        # Test documentation (MANDATORY - sync with spec.ts)

---

MANDATORY Checklist (Create or Modify Tests)

⚠️ ALWAYS verify BEFORE completing any E2E task:

When CREATING new tests

• {page-name}-page.ts - Page Object created/updated
• {page-name}.spec.ts - Tests added with correct tags (@TEST-ID)
• {page-name}.md - Documentation created with ALL test cases
• Test IDs in .md match tags in .spec.ts

When MODIFYING existing tests

• {page-name}.md MUST be updated if:
  • Test cases were added/removed
  • Test flow changed (steps)
  • Preconditions or expected results changed
  • Tags or priorities changed
• Test IDs synchronized between .md and .spec.ts

Quick validation

# Verify .md exists for each test folder
ls ui/tests/{feature}/{feature}.md

# Verify test IDs match
grep -o "@[A-Z]*-E2E-[0-9]*" ui/tests/{feature}/{feature}.spec.ts | sort -u
grep -o "\`[A-Z]*-E2E-[0-9]*\`" ui/tests/{feature}/{feature}.md | sort -u

[!IMPORTANT] ❌ An E2E change is NOT considered complete without updating the corresponding .md file.

---

MCP Workflow - CRITICAL

⚠️ MANDATORY: If Playwright MCP tools are available, ALWAYS use them BEFORE creating tests.

1. Navigate to target page
2. Take snapshot to see actual DOM structure
3. Interact with forms/elements to verify real flow
4. Document actual selectors from snapshots
5. Only then write test code

Why: Prevents tests based on assumptions. Real exploration = stable tests.