M
MCP.directory

playwright-mcp

by sfc-gh-dflippo
104
3
Source

Browser testing, web scraping, and UI validation using Playwright MCP. Use this skill when you need to test Streamlit apps, validate web interfaces, test responsive design, check accessibility, or automate browser interactions through MCP tools.

Install

mkdir -p .claude/skills/playwright-mcp && curl -L -o skill.zip "https://mcp.directory/api/skills/download/32" && unzip -o skill.zip -d .claude/skills/playwright-mcp && rm skill.zip

Installs to .claude/skills/playwright-mcp

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:

  1. Navigate to application
  2. Take snapshot (accessibility tree)
  3. Interact with elements
  4. Verify expected behavior
  5. 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 Testing

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

IssueSolution
Browsers not installedRun npx @playwright/mcp browser install
Element not foundTake snapshot first to get current page state and exact ref
Tests too slowUse browser_fill_form instead of multiple browser_type
MCP not startingRestart IDE, verify mcp.json is valid JSON
Timeout errorsIncrease wait times or use browser_wait_for with specific conditions
Screenshots blankEnsure page is fully loaded before taking screenshot
Console errors not showingUse 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

More by sfc-gh-dflippo

View all →

task-master

sfc-gh-dflippo

AI-powered task management for structured, specification-driven development. Use this skill when you need to manage complex projects with PRDs, break down tasks into subtasks, track dependencies, and maintain organized development workflows across features and branches.

1138

snowflake-connections

sfc-gh-dflippo

Configuring Snowflake connections using connections.toml (for Snowflake CLI, Streamlit, Snowpark) or profiles.yml (for dbt) with multiple authentication methods (SSO, key pair, username/password, OAuth), managing multiple environments, and overriding settings with environment variables. Use this skill when setting up Snowflake CLI, Streamlit apps, dbt, or any tool requiring Snowflake authentication and connection management.

1102

You might also like

flutter-development

aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

284790

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

212415

godot

bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.

205286

nano-banana-pro

garg-aayush

Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.

217234

ui-ux-pro-max

nextlevelbuilder

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."

169198

rust-coding-skill

UtakataKyosui

Guides Claude in writing idiomatic, efficient, well-structured Rust code using proper data modeling, traits, impl organization, macros, and build-speed best practices.

165173

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.