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)

Instruct the user to:

Open the target site in their browser
Log in manually with their credentials
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:

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:

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.

2.3 KiB Raw Blame History