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 URL

• browser_wait_for

• Wait for time, text, or element

Interaction

• browser_click

• Click buttons and elements

• browser_fill_form

• Batch fill multiple form fields

• browser_type

• Type into inputs

• browser_select_option

• Select dropdown options

Validation

• browser_snapshot

• Accessibility tree (for AI analysis)

• browser_take_screenshot

• Visual capture

• browser_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_snapshot for 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