tomevault-io Playwright MCP Testing
Automate browser testing, web scraping, and UI validation using Playwright MCP server for comprehensive browser automation.
Quick Start
Core Testing Workflow:
- Navigate to application
- Take snapshot (accessibility tree)
- Interact with elements
- Verify expected behavior
- Take screenshots for documentation
Key Tools
Navigation & Waiting
browser_navigate- Load URLbrowser_wait_for- Wait for time, text, or element
Interaction
browser_click- Click buttons and elementsbrowser_fill_form- Batch fill multiple form fieldsbrowser_type- Type into inputsbrowser_select_option- Select dropdown options
Validation
browser_snapshot- Accessibility tree (for AI analysis)browser_take_screenshot- Visual capturebrowser_console_messages- Check for JavaScript errors
Testing Patterns
Page Load Verification
Navigate to http://localhost:8501
Wait 5 seconds
Take snapshot
Verify expected elements present
Form Testing
Fill form fields (use browser_fill_form for speed)
Click Submit button
Wait for "Success" text to appear
Take screenshot
Responsive Design
Resize to 375x667 (mobile)
Take screenshot
Resize to 1920x1080 (desktop)
Take screenshot
Multi-Page Navigation
Navigate to homepage
Click navigation link
Verify URL changed
Verify new page content
Best Practices
✅ DO:
- Use
browser_snapshotfor AI analysis - Wait for content (3-5 seconds)
- Batch form fields with
browser_fill_form - Use element refs from snapshots for reliable clicks
- Check console for errors
❌ AVOID:
- Using screenshots when you need to interact
- Typing each field individually
- Skipping waits for dynamic content
- Ignoring console errors
Common Workflows
Pre-Deployment Testing
- Test all pages load without errors
- Verify navigation works
- Test forms submit successfully
- Check data displays correctly
- Validate responsive design (375, 768, 1920px)
- Check console for JavaScript errors
Accessibility Validation
- Take snapshot of each page
- Verify interactive elements have labels
- Check heading hierarchy
- Verify form labels associated
Visual Regression
- Take full-page screenshots
- Compare with baseline
- Document changes
Quick Reference
Common Test Flow
Navigate to http://localhost:8501
Wait 5 seconds
Take snapshot
Click element with ref from snapshot
Wait for "Success" text
Take screenshot
Responsive Testing
Resize to 375x667 # Mobile
Take screenshot
Resize to 768x1024 # Tablet
Take screenshot
Resize to 1920x1080 # Desktop
Take screenshot
Form Submission
Fill form fields (batch)
Click Submit
Wait for success message
Verify in snapshot
Error Checking
Get console messages (onlyErrors=true)
Get network requests
Verify no 404s or 500s
Troubleshooting
| Issue | Solution |
|---|---|
| Browsers not installed | Run npx @playwright/mcp browser install |
| Element not found | Take snapshot first to get current page state and exact ref |
| Tests too slow | Use browser_fill_form instead of multiple browser_type |
| MCP not starting | Restart IDE, verify mcp.json is valid JSON |
| Timeout errors | Increase wait times or use browser_wait_for with specific conditions |
| Screenshots blank | Ensure page is fully loaded before taking screenshot |
| Console errors not showing | Use browser_console_messages with onlyErrors=true parameter |
Resources
TESTING_PATTERNS.md- Common test scenarios (coming soon)STREAMLIT_TESTING.md- Streamlit-specific patterns (coming soon)ACCESSIBILITY.md- Accessibility testing workflows (coming soon)mcp-config.json- MCP server configuration
Converted and distributed by TomeVault — claim your Tome and manage your conversions.