Verify frontend changes by running flows in browser using Playwright MCP. Checks console logs, captures snapshots, and validates user interactions work correctly.
Automatically verify frontend changes work correctly by running the actual user flow in the browser using Playwright MCP.
Requires Playwright MCP server. If not configured, inform the user to run:
claude mcp add playwright npx @playwright/mcp@latest
Invoke this skill automatically after completing ANY frontend task:
1. Verify the port is active (check if server is already running)
2. If active → continue to next step
3. If not active → run server with "npm start"
4. Wait for server to be ready before proceeding
Use browser_navigate to open the page where changes were made.
Example: browser_navigate → http://localhost:<port>/[relevant-path]
Use these Playwright MCP tools to simulate user interactions:
| Tool | Purpose |
|------|---------|
| browser_click | Click buttons, links, interactive elements |
| browser_type | Type into input fields |
| browser_fill_form | Fill multiple form fields at once |
| browser_select_option | Select dropdown values |
| browser_hover | Test hover interactions |
| browser_press_key | Keyboard input (Enter, Tab, Escape) |
| browser_wait_for | Wait for text/elements to appear |
Use browser_console_messages to read ALL console output for debugging:
| Level | Purpose |
|-------|---------|
| debug | All messages including debug logs |
| info | Info, warnings, and errors |
| warning | Warnings and errors |
| error | Only errors |
Use console logs to understand behavior:
Add debug console.log statements to the code when you need to understand:
Run the flow and check browser_console_messages with level debug to see your logs
Analyze the output to understand what's happening
Remove debug logs after fixing the issue (keep only intentional logging)
Example debugging workflow:
1. Add console.log to component: console.log('State:', state, 'Props:', props)
2. Run browser_navigate → page
3. Execute the interaction
4. browser_console_messages level="debug" → Read all console output
5. Analyze logs to understand the issue
6. Fix the code
7. Remove debug console.logs
8. Re-verify
Check for errors:
If issues found:
browser_snapshot - Get accessibility tree (preferred for LLM analysis)browser_take_screenshot - Visual documentation when neededbrowser_network_requests - Monitor API calls if relevantConfirm:
Before marking task complete:
If verification fails:
Common issues:
1. browser_navigate → http://localhost:<port>/login
2. browser_snapshot → Verify form elements exist
3. browser_type → Enter email in email field
4. browser_type → Enter password in password field
5. browser_click → Click submit button
6. browser_wait_for → Wait for redirect or success message
7. browser_console_messages level="debug" → Check all console output
8. browser_snapshot → Verify final state
1. Add console.log statements to suspect code areas
2. browser_navigate → http://localhost:<port>/[page]
3. Execute the actions that trigger the bug
4. browser_console_messages level="debug" → Read all logs
5. Analyze output to identify root cause
6. Fix the issue
7. Remove debug console.logs
8. Re-run flow to verify fix
9. browser_console_messages level="error" → Confirm no errors
1. browser_navigate → http://localhost:<port>/[page]
2. browser_snapshot → Locate the button element
3. browser_click → Click the button
4. browser_wait_for → Wait for expected change
5. browser_console_messages level="info" → Check for errors/warnings
6. browser_snapshot → Verify state changed correctly
1. browser_navigate → http://localhost:<port>/[form-page]
2. browser_fill_form → Fill all form fields
3. browser_click → Submit form
4. browser_wait_for → Wait for success/error message
5. browser_console_messages level="debug" → Check all console output
6. browser_network_requests → Verify API call succeeded
Pass:
Verified: [feature] works correctly. No console errors.
Tested flow: [brief description]
Fail:
Verification failed. Issues found:
1. [Issue 1 description]
2. [Issue 2 description]
...
Should I proceed with fixing these issues?
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer