This skill should be used when performing browser-based exploratory testing of web applications, including functional testing, visual inspection, accessibility checks, and performance analysis. Triggers when testing web UIs, checking for browser bugs, validating WCAG compliance, or measuring Core Web Vitals.
From tommymorgannpx claudepluginhub tommymorgan/claude-plugins --plugin tommymorganThis skill uses the workspace's default tool permissions.
references/accessibility-testing.mdreferences/agent-browser-cli.mdreferences/performance-metrics.mdreferences/playwright-mcp-tools.mdSearches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Provide systematic patterns and best practices for autonomous browser-based exploratory testing using CLI tools. Guide agents through comprehensive web application testing including functional validation, visual inspection, accessibility compliance, and performance measurement.
Browser testing uses three tools, each for a specific purpose:
| Tool | Purpose | Required |
|---|---|---|
| agent-browser | Primary browser automation | Always |
| playwright-cli | Video demo recording | Only when video requested |
| chrome-devtools-mcp | Deep performance profiling | Only for performance scenarios |
See testing/README.md for installation instructions.
CLI commands run through Bash. Always quote user-controlled values to prevent shell injection:
# CORRECT — all values quoted
agent-browser -s=my-session open "https://example.com/path?q=search term"
agent-browser -s=my-session fill @e3 "user's input value"
agent-browser -s=my-session eval "document.querySelector('.class').textContent"
# INCORRECT — unquoted values risk injection
agent-browser open $url
agent-browser fill @ref $text
agent-browser eval $script
Rules:
Test web applications using a structured layered approach:
Focus testing effort based on user impact:
Critical (test thoroughly):
Important (test systematically):
Secondary (spot check):
Test interactive elements systematically using the ref system:
Discover interactive elements:
agent-browser -s=test snapshot -i
Returns elements with refs: button "Sign In" [ref=e1], textbox "Email" [ref=e2]
Click elements by ref:
agent-browser -s=test click @e1
Fill form fields:
agent-browser -s=test fill @e2 "test@example.com"
Re-snapshot after DOM changes: Refs become stale after navigation or significant DOM mutations. Always re-snapshot before interacting with elements on a changed page:
agent-browser -s=test snapshot -i
Keyboard testing:
agent-browser -s=test press Tab
agent-browser -s=test press Enter
agent-browser -s=test press Escape
Error states: Trigger validation errors, check messages
Check for JavaScript errors:
agent-browser -s=test console error
Categorize console errors:
Analyze network traffic:
agent-browser -s=test network requests
Check for:
Test for common accessibility violations:
Perceivable:
Operable:
Understandable:
Robust:
Test keyboard usability:
# Test tab navigation
agent-browser -s=test press Tab
agent-browser -s=test press Shift+Tab
# Test activation
agent-browser -s=test press Enter
# Test dismissal
agent-browser -s=test press Escape
# Test within components
agent-browser -s=test press ArrowDown
agent-browser -s=test press ArrowUp
Verify:
Tier 1: Basic profiling (always available via agent-browser):
agent-browser -s=test eval "JSON.stringify({
lcp: (() => { const e = performance.getEntriesByType('largest-contentful-paint').slice(-1)[0]; return e ? (e.renderTime || e.startTime) : 0; })(),
cls: performance.getEntriesByType('layout-shift')
.reduce((sum, e) => sum + (e.hadRecentInput ? 0 : e.value), 0)
})"
Thresholds (Google standards):
INP (Interaction to Next Paint) measures responsiveness across all interactions. It cannot be measured with a single eval call — it requires observing user interactions over time via PerformanceObserver. Use Lighthouse (Tier 2) for INP measurement, or check for long tasks as a proxy:
agent-browser -s=test eval "JSON.stringify(
performance.getEntriesByType('longtask').map(t => ({ duration: t.duration, startTime: t.startTime }))
)"
INP thresholds: <200ms (good), 200-500ms (needs improvement), >500ms (poor)
Tier 2: Deep profiling (conditional, via chrome-devtools-mcp):
When scenarios mention Lighthouse, memory analysis, or detailed performance tracing:
Use ToolSearch to load chrome-devtools-mcp:
ToolSearch(query: "+chrome-devtools")
If tools are found:
lighthouse_audit — full Lighthouse analysisperformance_start_trace / performance_stop_trace — detailed tracingtake_memory_snapshot — memory profilingIf chrome-devtools-mcp is not available:
Do NOT load chrome-devtools-mcp for non-performance scenarios.
agent-browser -s=test network requests
Check for:
Look for:
When to screenshot:
agent-browser -s=test screenshot
Avoid:
Test only the provided URL:
Test main page + linked pages:
Recursive exploration:
Always close sessions after testing, even if errors occurred:
agent-browser -s=test close 2>/dev/null || true
If the close command fails (e.g., daemon already stopped), verify no orphaned processes remain:
pgrep -f "agent-browser.*-s=test" && echo "WARNING: orphaned agent-browser process found" || true
Critical:
Warning:
Info:
For each issue include:
Report both problems and successes:
For detailed testing techniques, consult:
references/agent-browser-cli.md - Complete agent-browser CLI command referencereferences/accessibility-testing.md - Comprehensive WCAG testing guidereferences/performance-metrics.md - Detailed performance analysis patterns (two-tier approach)Testing checklist:
Remember: Focus on finding real bugs autonomously. Be thorough but scoped to context. Report actionably. Always quote values in CLI commands.