66 lines
2.3 KiB
Markdown
66 lines
2.3 KiB
Markdown
# 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.
|