Evaluate browser screenshots and page state for errors. Use when verifying features work correctly, detecting error conditions, or validating UI state during browser testing.
Activation: screenshot evaluation, error detection, browser testing, UI verification, feature validation, console errors, network failures
This skill provides a systematic approach to evaluating browser state during testing. It ensures features actually work by checking for console errors, network failures, and visual error indicators before declaring success.
Critical Rule: A feature is NOT complete until browser testing passes with no errors.
Execute these steps in order after navigating to the page or completing an action:
Use mcp__playwright__browser_console_messages with level="error"
Pass criteria:
Acceptable errors (can ignore):
Use mcp__playwright__browser_network_requests
Pass criteria:
Check specifically:
Use mcp__playwright__browser_snapshot
Error patterns to look for in snapshot:
| Pattern | Indicates |
|---|---|
| "404" or "Not Found" | Missing route or resource |
| "500" or "Internal Server Error" | Backend crash |
| "Error" in heading/alert | Application error state |
| "Something went wrong" | Error boundary triggered |
| "Loading..." persisting | Infinite loading state |
| Empty content where data expected | Failed data fetch |
| "undefined" or "null" in text | Missing data handling |
Use mcp__playwright__browser_take_screenshot
This screenshot is REQUIRED evidence that the feature works:
## Feature: Create Shootout Form
1. Navigate to /builder
→ mcp__playwright__browser_navigate url="/builder"
2. Check for errors after page load
→ mcp__playwright__browser_console_messages level="error"
✓ No console errors
3. Check network requests
→ mcp__playwright__browser_network_requests
✓ All 200 OK
4. Take snapshot, verify form elements
→ mcp__playwright__browser_snapshot
✓ Form visible with expected fields
5. Fill form and submit
→ mcp__playwright__browser_fill_form
→ mcp__playwright__browser_click (submit button)
6. Check for errors after submission
→ mcp__playwright__browser_console_messages level="error"
✓ No console errors
7. Check API call succeeded
→ mcp__playwright__browser_network_requests
✓ POST /api/v1/shootouts returned 201
8. Verify success state
→ mcp__playwright__browser_snapshot
✓ Success message visible OR redirected to new shootout
9. Take final screenshot proof
→ mcp__playwright__browser_take_screenshot
✓ Screenshot captured
When evaluation fails:
| Tool | Purpose | When to Use |
|---|---|---|
mcp__playwright__browser_navigate | Go to URL | Start of test |
mcp__playwright__browser_console_messages | Get console output | After page load, after actions |
mcp__playwright__browser_network_requests | Get network activity | Verify API calls |
mcp__playwright__browser_snapshot | Accessibility tree | Verify page content |
mcp__playwright__browser_take_screenshot | Visual capture | Final proof |
mcp__playwright__browser_click | Click element | User interactions |
mcp__playwright__browser_fill_form | Fill form fields | Form testing |
When Playwright checks show errors, use Chrome DevTools for deeper investigation:
| Tool | Purpose | When to Use |
|---|---|---|
mcp__chrome-devtools__get_console_logs | Full console output | Debug error details |
mcp__chrome-devtools__get_network_logs | Request/response details | Debug API failures |
mcp__chrome-devtools__get_computed_style | CSS debugging | Fix styling issues |
mcp__chrome-devtools__get_element_info | Element properties | Debug layout problems |
mcp__chrome-devtools__evaluate | Run JS in context | Debug state issues |
Workflow: Playwright finds issue → Chrome DevTools investigates → Fix code → Playwright verifies
The /merge command enforces this evaluation before PR creation:
Never bypass browser testing - unit tests passing does NOT mean the feature works.