init

.opencode/skills/test/references/ui-testing-workflow.md

@@ -0,0 +1,65 @@
+# UI Testing Workflow
+
+Activate the ck:chrome-devtools skill.
+
+## Purpose
+Run comprehensive UI tests on a website and generate a detailed report.
+
+## Arguments
+- $1: URL - The URL of the website to test
+- $2: OPTIONS - Optional test configuration (e.g., --headless, --mobile, --auth)
+
+## Testing Protected Routes (Authentication)
+
+### Step 1: User Manual Login
+Instruct the user to:
+1. Open the target site in their browser
+2. Log in manually with their credentials
+3. Open browser DevTools (F12) → Application tab → Cookies/Storage
+
+### Step 2: Extract Auth Credentials
+Ask the user to provide one of:
+- **Cookies**: Copy cookie values (name, value, domain)
+- **Access Token**: Copy JWT/Bearer token from localStorage or cookies
+- **Session Storage**: Copy relevant session keys
+
+### Step 3: Inject Authentication
+Use the `inject-auth.js` script:
+
+```bash
+cd $SKILL_DIR  # .opencode/skills/chrome-devtools/scripts
+
+# Option A: Inject cookies
+node inject-auth.js --url https://example.com --cookies '[{"name":"session","value":"abc123","domain":".example.com"}]'
+
+# Option B: Inject Bearer token
+node inject-auth.js --url https://example.com --token "Bearer eyJhbGciOi..." --header Authorization --token-key access_token
+
+# Option C: Inject localStorage
+node inject-auth.js --url https://example.com --local-storage '{"auth_token":"xyz","user_id":"123"}'
+```
+
+### Step 4: Run Tests
+After auth injection, run tests normally:
+```bash
+node navigate.js --url https://example.com/dashboard
+node screenshot.js --url https://example.com/profile --output profile.png
+```
+
+## Workflow
+- Use `ck:plan` skill to organize the test plan & report
+- All screenshots saved in the same report directory
+- Browse URL, discover all pages, components, endpoints
+- Create test plan based on discovered structure
+- Use multiple `tester` subagents in parallel for: pages, forms, navigation, user flows, accessibility, responsive layouts, performance, security, seo
+- Use `ck:ai-multimodal` to analyze all screenshots
+- Generate comprehensive Markdown report
+- Ask user if they want to preview with `/ck:preview`
+
+## Output Requirements
+- Clear, structured Markdown with headers, lists, code blocks
+- Include test results summary, key findings, screenshot references
+- Ensure token efficiency while maintaining high quality
+- Sacrifice grammar for concision
+
+**Do not** start implementing fixes.