AgentSkillsCN

mcp-playwright

利用 Playwright MCP 实现浏览器自动化——在无头模式下浏览网页、与页面元素交互、截取屏幕截图并进行页面检查。当您需要上网冲浪、填写表单、抓取网页截图,或提取页面内容时,此功能将大显身手。

SKILL.md
--- frontmatter
name: mcp-playwright
description: Browser automation via Playwright MCP — navigate, interact, screenshot, and inspect web pages headlessly. Use when you need to browse the web, fill forms, take screenshots, or scrape page content.
allowed-tools: [Bash]
<objective> Automate browser interactions through the Playwright MCP server via mcporter CLI. Navigate to URLs, click elements, fill forms, take screenshots, and read page content — all headless by default. Use this when you need to interact with web pages, verify UI, scrape content, or test web flows. </objective> <process>

Call Syntax

bash
# Colon-delimited
mcporter call playwright.TOOL_NAME key:value --output json

# Function-call style
mcporter call 'playwright.TOOL_NAME(key: "value")' --output json

Tool Reference

Navigation

ToolParametersDescription
browser_navigateurlNavigate to a URL
browser_navigate_backGo back to previous page
browser_closeClose the current page

Observation

ToolParametersDescription
browser_snapshotAccessibility snapshot of the page (primary observation tool)
browser_take_screenshotCapture a PNG screenshot
browser_console_messagesGet browser console output
browser_network_requestsList network requests made by the page

Interaction

ToolParametersDescription
browser_clickelement, refClick an element (use ref from snapshot)
browser_typeelement, ref, textType text into an input
browser_select_optionelement, ref, valuesSelect dropdown options
browser_hoverelement, refHover over an element
browser_dragstartElement, startRef, endElement, endRefDrag and drop
browser_press_keykeyPress a keyboard key

Forms

ToolParametersDescription
browser_fill_formfieldsFill multiple form fields at once

JavaScript

ToolParametersDescription
browser_evaluateexpressionRun a JavaScript expression in the page
browser_run_codecodeRun a Playwright code snippet

Tabs

ToolParametersDescription
browser_tabsList open tabs

Waiting & Dialogs

ToolParametersDescription
browser_wait_fortext or timeoutWait for text to appear or a timeout
browser_handle_dialogacceptAccept or dismiss a dialog
browser_file_uploadpathsUpload files to a file input

Setup

ToolParametersDescription
browser_installInstall the browser binary if missing

Common Workflows

bash
# Navigate to a page and get its content
mcporter call 'playwright.browser_navigate(url: "https://example.com")' --output json
mcporter call playwright.browser_snapshot --output json

# Take a screenshot
mcporter call 'playwright.browser_navigate(url: "https://example.com")' --output json
mcporter call playwright.browser_take_screenshot --output json

# Fill a form (use refs from snapshot)
mcporter call 'playwright.browser_navigate(url: "https://example.com/login")' --output json
mcporter call playwright.browser_snapshot --output json
mcporter call 'playwright.browser_click(element: "Username field", ref: "e3")' --output json
mcporter call 'playwright.browser_type(element: "Username field", ref: "e3", text: "user@example.com")' --output json

# Run JavaScript on the page
mcporter call 'playwright.browser_evaluate(expression: "document.title")' --output json

# Check console messages for errors
mcporter call playwright.browser_console_messages --output json

Discovering All Available Tools

bash
mcporter list playwright --all-parameters
</process> <tips> - **Headless by default**: The server runs `--headless` since Claude operates in a terminal. No display server needed. - **First call is slower**: npx downloads `@playwright/mcp` on the first invocation. Subsequent calls reuse the cached package. - **Use `browser_snapshot` as your primary observation tool** — it returns an accessibility tree with element refs that you use for `browser_click`, `browser_type`, etc. - **Element refs**: After a `browser_snapshot`, use the `ref` values (e.g., `"e3"`) to target elements in interaction tools. - **No authentication required** — this server runs locally via npx. - **Install browser if needed**: If Playwright browsers aren't installed, call `browser_install` first. - **Extended capabilities**: Pass `--caps` flags when configuring the server for vision mode, PDF generation, or testing features. - Use `--output json` for machine-readable results. </tips>