playwright-mcp

📁 sfc-gh-dflippo/snowflake-dbt-demo 📅 8 days ago

总安装量

周安装量

#68270

全站排名

安装命令

npx skills add https://github.com/sfc-gh-dflippo/snowflake-dbt-demo --skill playwright-mcp

Agent 安装分布

opencode 2

gemini-cli 2

antigravity 2

github-copilot 2

codex 2

kimi-cli 2

Skill 文档

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

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台