playwright-mcp_skill

Overview

This skill automates browser testing, web scraping, and UI validation using Playwright MCP. It focuses on reliable Streamlit and web UI checks, accessibility snapshots, responsive testing, and automated interactions to validate behavior before deployment.

How this skill works

The skill drives a Playwright MCP server to navigate pages, wait for dynamic content, interact with elements, and capture snapshots and screenshots. It uses accessibility-tree snapshots for AI-assisted analysis, console and network checks for error detection, and size changes for responsive validation.

When to use it

• End-to-end testing for Streamlit apps or web UIs
• Automated form and workflow validation before release
• Accessibility audits using accessibility-tree snapshots
• Responsive design checks across mobile, tablet, and desktop sizes
• Visual regression and screenshot documentation
• Web scraping when structured navigation and interaction are required

Best practices

• Take an accessibility snapshot (browser_snapshot) before interacting to get stable element refs
• Wait for content (3–5 seconds or use browser_wait_for conditions) before asserting or taking screenshots
• Batch-fill form fields with browser_fill_form to speed tests and reduce flakiness
• Use browser_console_messages with onlyErrors=true to catch JS issues early
• Resize the viewport and capture screenshots for each target breakpoint to validate responsive layouts

Example use cases

• Pre-deployment smoke tests: verify pages load, forms submit, and no console errors appear
• Accessibility sweep: capture snapshots, ensure labels and heading hierarchy exist, flag missing semantics
• Responsive validation: resize to 375x667, 768x1024, 1920x1080 and capture screenshots for comparison
• Form workflow testing: batch-fill inputs, submit, wait for success text, and verify resulting UI state
• Visual regression: capture full-page screenshots and compare against baselines to detect unintended changes