Testing with Playwright MCP

CRITICAL: Always test changes before completion.

Subagent Delegation for Testing

Screenshot operations blow up context fast (~2000-5000 tokens each). Delegate to subagent for:

• •Multi-step UI test scenarios
• •Visual regression verification
• •Accessibility audits
• •Screenshot-heavy debugging

Delegation Pattern

runSubagent(
  agentName: "WebAppAgent",
  prompt: "TESTING task with Playwright MCP.
    
    **Servers**: Frontend at localhost:5173, Backend at localhost:8080
    
    **Test Scenario**: [describe what to verify]
    
    **Steps**:
    1. Navigate to http://localhost:5173
    2. [specific actions to perform]
    
    **Check in priority order** (stop when answer found):
    1. Browser console logs - look for errors, state transitions (🔄)
    2. Network requests - verify API calls and status codes
    3. Accessibility snapshot - check element presence
    4. Screenshot - ONLY if visual verification essential
    
    **Return**:
    - Pass/Fail result
    - Specific evidence (error messages, status codes, element presence)
    - Console action log if relevant (🔄 ACTION_TYPE entries)
    
    Do NOT include raw screenshots or full accessibility dumps.",
  description: "Test: [what being verified]"
)

When to Delegate vs Inline

Testing Priority (Token efficiency)

1. •Browser console logs - Check console messages for state transitions and errors
2. •VS Code terminal logs - Check terminal output for backend/frontend server logs
3. •Network requests - Inspect API calls and status codes
4. •Accessibility snapshot - Get DOM structure for element verification
5. •Screenshots - Visual verification (use sparingly, high token cost)

Key insight: Browser console shows React state changes (🔄 ACTION_TYPE), errors, and warnings. VS Code terminals show server logs and compilation output.

Workflow

Start servers in VS Code terminals (preferred - logs visible to AI agent):

# Run these VS Code tasks:
# - "Backend: ASP.NET Core API" (dotnet watch, port 8080)
# - "Frontend: React Vite" (npm run dev, port 5173)
# Or use compound task: "Start Dev (VS Code Terminals)"

Then test with Playwright MCP:

1. •Navigate to http://localhost:5173
2. •Check browser console for state transitions and errors
3. •Verify network requests for API calls
4. •Take accessibility snapshot for DOM validation

Check server logs:

• •Check VS Code terminal output for backend compilation and request logs
• •Backend terminal shows: request handling, errors, recompilation status
• •Frontend terminal shows: HMR updates, build warnings, Vite output

When to Test

• •After UI component or API endpoint changes
• •Before committing multi-step implementations
• •When user reports issues

Validation Checklist

• • Console shows expected actions (🔄 [timestamp] ACTION_TYPE)
• • No console errors/warnings
• • Network tab shows correct status codes (200/400/401/500)
• • DOM elements present in accessibility snapshot

State Logging (Dev Mode)

Each state change prints:

🔄 [HH:MM:SS] ACTION_TYPE
Action: { … }
Changes: { field: before → after }

Project-Specific: Key Test Scenarios

Project-Specific: Network Verification

Browser Testing Capabilities

Use available Playwright browser automation tools in order of preference:

1. •Console logs - Check for state transitions and errors
2. •Network requests - Verify API calls and responses
3. •Custom code execution - Run Playwright scripts for complex scenarios
4. •Screenshots - Visual verification (use sparingly, high token cost)

Related Skills

• •validating-ui-features - Detailed test procedures for specific features
• •writing-typescript-code - Frontend patterns and state management
• •implementing-chat-streaming - SSE flow verification