Testing With Playwright

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