Browsing With Playwright
Spin up Playwright MCP to navigate sites, submit forms, screenshot pages, and scrape dynamic UIs when curl cannot see client-rendered content.
Overview
Browsing with Playwright is an agent skill most often used in Build (also Ship) that automates browser interactions via the Playwright MCP server for navigation, forms, screenshots, and dynamic scraping.
Install
npx skills add https://github.com/bilalmk/todo_correct --skill browsing-with-playwrightWhat is this skill?
- Playwright MCP server start/stop via helper scripts or npx on port 8808 with --shared-browser-context
- Navigation, back, click, fill forms, screenshots, and data extraction through mcp-client.py tool calls
- Explicit boundary: use for interactive browsing—not static fetch jobs better served by curl or wget
- Server lifecycle guidance for end-of-task shutdown versus long multi-step sessions
- Restart path when the browser context becomes unresponsive
- Default Playwright MCP listener documented on port 8808
Adoption & trust: 1.7k installs on skills.sh; 1 GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need to interact with a modern web app—log in, click through flows, or screenshot a page—but fetching HTML alone misses JavaScript-rendered content.
Who is it for?
Agent workflows that must exercise real browser state across multiple steps on localhost:8808 with shared context preserved.
Skip if: Bulk static page downloads, server-only API testing with no DOM, or environments that forbid local Node processes and browser binaries.
When should I use this skill?
Tasks require web browsing, form submission, web scraping, UI testing, or browser interaction; not when only fetching static content.
What do I get? / Deliverables
A running Playwright MCP session with documented tool calls completes the browsing task and can be closed cleanly without leaking headless processes.
- Executed browser navigation and interaction steps
- Screenshots or extracted page data from live sessions
- Clean server shutdown after the task
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Build is primary because the skill wires an MCP browser automation server into the agent toolchain for day-to-day product and integration work. Agent-tooling is the shelf—documented server lifecycle, mcp-client.py calls, and shared-browser-context are MCP infrastructure, not a one-off test script.
Where it fits
Walk through a third-party OAuth consent screen to capture callback parameters for your integration spec.
Screenshot each step of checkout after deploy to attach evidence to a pre-release checklist.
Click through a competitor signup funnel to document friction before you scope your MVP.
Capture updated marketing pages after a launch tweak for changelog assets.
How it compares
Choose this MCP browser skill instead of curl/wget when the task requires clicks, forms, or rendered UI—not when a single HTTP GET suffices.
Common Questions / FAQ
Who is browsing-with-playwright for?
Solo builders and agent users who already run Claude Code, Cursor, or similar clients with MCP and need dependable Playwright-driven browser automation.
When should I use browsing-with-playwright?
Use it for web browsing, form submission, scraping dynamic sites, UI testing, or any browser interaction during Build integrations—and during Ship testing when you need to verify flows in a real browser rather than static fetches.
Is browsing-with-playwright safe to install?
It starts local servers and can drive arbitrary URLs; check the Security Audits panel on this page and restrict credentials, cookies, and target sites before automating logged-in sessions.
SKILL.md
READMESKILL.md - Browsing With Playwright
# Browser Automation Automate browser interactions via Playwright MCP server. ## Server Lifecycle ### Start Server ```bash # Using helper script (recommended) bash scripts/start-server.sh # Or manually npx @playwright/mcp@latest --port 8808 --shared-browser-context & ``` ### Stop Server ```bash # Using helper script (closes browser first) bash scripts/stop-server.sh # Or manually python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_close -p '{}' pkill -f "@playwright/mcp" ``` ### When to Stop - **End of task**: Stop when browser work is complete - **Long sessions**: Keep running if doing multiple browser tasks - **Errors**: Stop and restart if browser becomes unresponsive **Important:** The `--shared-browser-context` flag is required to maintain browser state across multiple mcp-client.py calls. Without it, each call gets a fresh browser context. ## Quick Reference ### Navigation ```bash # Go to URL python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate \ -p '{"url": "https://example.com"}' # Go back python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate_back -p '{}' ``` ### Get Page State ```bash # Accessibility snapshot (returns element refs for clicking/typing) python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_snapshot -p '{}' # Screenshot python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_take_screenshot \ -p '{"type": "png", "fullPage": true}' ``` ### Interact with Elements Use `ref` from snapshot output to target elements: ```bash # Click element python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_click \ -p '{"element": "Submit button", "ref": "e42"}' # Type text python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_type \ -p '{"element": "Search input", "ref": "e15", "text": "hello world", "submit": true}' # Fill form (multiple fields) python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_fill_form \ -p '{"fields": [{"ref": "e10", "value": "john@example.com"}, {"ref": "e12", "value": "password123"}]}' # Select dropdown python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_select_option \ -p '{"element": "Country dropdown", "ref": "e20", "values": ["US"]}' ``` ### Wait for Conditions ```bash # Wait for text to appear python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \ -p '{"text": "Success"}' # Wait for time (ms) python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \ -p '{"time": 2000}' ``` ### Execute JavaScript ```bash python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_evaluate \ -p '{"function": "return document.title"}' ``` ### Multi-Step Playwright Code For complex workflows, use `browser_run_code` to run multiple actions in one call: ```bash python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_run_code \ -p '{"code": "async (page) => { await page.goto(\"https://example.com\"); await page.click(\"text=Learn more\"); return await page.title(); }"}' ``` **Tip:** Use `browser_run_code` for complex multi-step operations that should be atomic (all-or-nothing). ## Workflow: Form Submission 1. Navigate to page 2. Get snapshot to find element refs 3. Fill form fields using refs 4. Click submit 5. Wait for confirmation 6. Screenshot result ## Workflow: Data Extraction 1. Navigate to page 2. Get snapshot (contains text conten