browsing-with-playwright_skill

Overview

This skill provides browser automation via a Playwright MCP server to navigate sites, interact with page elements, fill forms, take screenshots, and extract data. It exposes simple RPC-style commands and a multi-step code runner so agents can perform atomic browser workflows reliably. Use it when tasks require real browser interactions rather than simple HTTP fetches.

How this skill works

The skill communicates with a running Playwright MCP server over HTTP and issues commands like navigate, snapshot, click, type, fill_form, take_screenshot, evaluate, and run_code. Snapshots return element references (refs) that are used to target clicks and typing. For complex sequences that must run as one unit, the browser_run_code endpoint executes async Playwright code on the server.

When to use it

• Filling and submitting interactive web forms that require JS execution or client state
• Scraping dynamically rendered pages where HTML is produced by JavaScript
• End-to-end UI testing or visual verification with screenshots
• Multi-step browser workflows that must maintain session state
• Interactions requiring user-like actions (clicks, hovers, selects)

Best practices

• Start the MCP server with --shared-browser-context to preserve state across calls
• Run browser_snapshot before interacting to obtain current element refs
• Prefer browser_run_code for complex, multi-step, atomic workflows
• Use browser_wait_for to wait for text or timeouts instead of blind sleeps
• Stop and restart the server if the browser becomes unresponsive

Example use cases

• Automate signup and login flows: navigate, fill_form, click submit, wait for confirmation and screenshot
• Scrape product listings that load via JavaScript: navigate, snapshot, evaluate page DOM for structured data
• Automated UI test that clicks through a feature, takes screenshots, and asserts visible text
• Select values from dropdowns, submit filters, and capture the resulting page snapshot
• Run a transactional sequence atomically using browser_run_code to avoid intermediate state leaks