From hive
Execute and debug E2E tests collaboratively with real-time log monitoring. Use when running Playwright or similar E2E tests where both Claude and the user need to observe execution simultaneously - Claude monitors logs while user watches the browser. Supports headed/UI mode execution, log capture, real-time monitoring, screenshot analysis, and collaborative debugging workflows.
npx claudepluginhub skywalking-dev/hiveThis skill uses the workspace's default tool permissions.
Execute E2E tests in collaborative mode where Claude monitors logs in real-time while the user observes the browser execution. Enables simultaneous debugging from both perspectives.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Execute E2E tests in collaborative mode where Claude monitors logs in real-time while the user observes the browser execution. Enables simultaneous debugging from both perspectives.
# Terminal 1: Execute test in headed mode with log capture
cd projects/micelio
npm run test:e2e -- --project=mercadopago-sandbox tests/e2e/specs/complete-purchase-flow-mercadopago-sandbox.spec.ts --headed --reporter=list,html 2>&1 | tee test-debug.log
# Terminal 2: Monitor logs in real-time (for Claude)
tail -f test-debug.log | grep -E "โ|โ|๐|โณ|Error:|Timeout|Selected|Found"
# Execute in UI mode (user watches, Claude monitors via logs)
npm run test:e2e:ui -- --project=mercadopago-sandbox tests/e2e/specs/complete-purchase-flow-mercadopago-sandbox.spec.ts 2>&1 | tee test-ui-output.log
User sees: Browser window executing test steps
Claude sees: Real-time logs via test-debug.log
# Execute with headed mode
npm run test:e2e -- <test-file> --headed --reporter=list,html 2>&1 | tee test-debug.log
# Claude monitors via:
tail -f test-debug.log | grep -E "โ|โ|๐|โณ|Error:|Timeout"
Benefits:
User sees: Playwright UI with step-by-step execution
Claude sees: Logs captured to file (may be limited due to UI interactivity)
# Execute in UI mode with background logging
npm run test:e2e:ui -- <test-file> 2>&1 | tee test-ui-output.log &
Note: UI mode is interactive and may not capture all logs perfectly. Use headed mode for better log capture.
Terminal 1: Test execution
Terminal 2: Real-time log filtering
# Terminal 1
npm run test:e2e -- <test-file> --headed 2>&1 | tee test-debug.log
# Terminal 2 (run simultaneously)
tail -f test-debug.log | grep -E "โ|โ|๐|โณ|Error:|Timeout|payment|MercadoPago"
Start test execution with appropriate mode:
Claude monitors logs for:
โ, ๐, โณ (success, location, waiting)โ, Error:, TimeoutWhen test fails, check:
Screenshots:
find tests/test-results -name "*.png" -type f -mmin -10 | sort | tail -1 | xargs open
Videos:
find tests/test-results -name "*.webm" -type f -mmin -10 | sort | tail -1 | xargs open
Error Context:
find tests/test-results -name "error-context.md" -exec cat {} \;
HTML Report:
npm run test:e2e:report
# or
open tests/reports/index.html
User reports: What they see in the browser (e.g., "MP page is asking for login", "Form not visible", "Redirect not happening")
Claude analyzes: Logs, screenshots, error context to identify root cause
Solution: Claude updates test code/helpers based on both perspectives
โ Found form elements - Elements detected successfullyโ Selected payment method - Payment method selection workedโ Redirected to: - Successful redirect back to platformโ Successfully redirected back to platform - Complete redirect flowโ Could not find - Element not foundError: - Test error occurredTimeout - Operation timed outTarget page, context or browser has been closed - Browser closed unexpectedly๐ MercadoPago page loaded: - Navigation to external service๐ Page title: - Page identificationโณ Waiting for redirect - Waiting for async operationReal-time log monitor with filtering. See scripts/monitor-test.sh for usage.
./scripts/monitor-test.sh
Monitors test-debug.log and highlights important events.
Symptom: Error: page.title: Target page, context or browser has been closed
Solution:
Symptom: Empty or incomplete log file
Solution:
tee to capture both stdout and stderr: 2>&1 | tee log.txtps aux | grep playwrightSymptom: Test stops progressing, no new logs
Solution:
tee to save logs even when watching browser