playwright-mcp
Provides tools for browser interaction, visual testing, and accessibility analysis through a Playwright MCP server.
Install
mkdir -p .claude/skills/playwright-mcp && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/32" && unzip -o skill.zip -d .claude/skills/playwright-mcp && rm skill.zipInstalls to .claude/skills/playwright-mcp
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Browser testing, web scraping, and UI validation using Playwright MCP. Use this skill when youKey capabilities
- →Navigate to specified URLs in a browser
- →Wait for specific conditions on a web page
- →Click on web elements
- →Fill out multiple form fields in a batch
- →Take accessibility tree snapshots for AI analysis
- →Capture visual screenshots of web pages
How it works
The skill automates browser interactions using Playwright MCP server, providing functions for navigation, element interaction, and validation. It supports taking accessibility tree snapshots and visual screenshots.
Inputs & outputs
When to use playwright-mcp
- →Test Streamlit application interfaces
- →Perform automated web scraping tasks
- →Validate responsive design across viewports
- →Run accessibility tree audits
About this 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 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
When not to use it
- →When needing to interact with elements that are only visible in screenshots
- →When the task requires skipping waits for dynamic content
Limitations
- →Browsers must be installed for Playwright MCP to function
- →Element not found errors can occur if snapshots are not used to get current page state
- →Timeout errors may occur if wait times are insufficient for dynamic content
How it compares
This skill provides a structured, programmatic approach to browser testing and validation, enabling automated checks and data collection that differ from manual browser use.
Compared to similar skills
playwright-mcp side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| playwright-mcp (this skill) | 33 | 6mo | No flags | Intermediate |
| wcag-audit-patterns | 0 | 5mo | No flags | Intermediate |
| ui-ux-expert-skill | 91 | 9mo | Review | Advanced |
| dev-browser | 53 | 4mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by sfc-gh-dflippo
View all by sfc-gh-dflippo →You might also like
wcag-audit-patterns
mk-knight23
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
dev-browser
SawyerHood
Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include "go to [url]", "click on", "fill out the form", "take a screenshot", "scrape", "automate", "test the website", "log into", or any browser interaction request.
accessibility
tech-leads-club
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
ios-simulator-skill
conorluddy
21 production-ready scripts for iOS app testing, building, and automation. Provides semantic UI navigation, build automation, accessibility testing, and simulator lifecycle management. Optimized for AI agents with minimal token output.
chrome-devtools
mrgoonie
Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.