Playwright MCP：Openclaw Skills 的强大浏览器自动化工具

什么是 Playwright MCP 浏览器自动化？

Playwright MCP 技能是一套专门设计的工具集，旨在赋予 AI 智能体对 Chromium、Firefox 和 WebKit 等 Web 浏览器的全面控制权。通过利用模型上下文协议，该技能允许智能体执行以前需要人工操作的任务，例如导航复杂的单页应用、填写多步表单以及从实时网络中提取即时数据。在 Openclaw Skills 生态系统中的这种集成，确保了开发人员只需最少的配置即可构建能够进行复杂 Web 交互的智能体。

该技能基于行业标准的 Playwright 库构建，为网络探索提供了一个安全且可编程的环境。它弥补了静态 LLM 知识与互联网动态特性之间的鸿沟，是任何希望通过 Openclaw Skills 扩展其 AI 编码助手能力的开发人员的必备组件。

下载入口:https://github.com/openclaw/skills/tree/main/skills/spiceman161/playwright-mcp

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

npx clawhub@latest install playwright-mcp

2. 手动安装

将技能文件夹复制到以下位置之一

全局模式 ~/.openclaw/skills/ 工作区 <project>/skills/

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

请帮我使用 Clawhub 安装 playwright-mcp。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。

Playwright MCP 浏览器自动化 应用场景

• 自动化从需要 JavaScript 渲染的动态网站中提取数据。
• 直接通过 AI 智能体执行自动化的 UI 测试和验证工作流。
• 管理 Web 账户并自动提交表单。
• 生成网页截图和视觉快照，用于文档编制或调试。
• 与内部 Web 工具和仪表板交互以收集运营数据。

Playwright MCP 浏览器自动化 工作原理

1. Openclaw Skills 环境触发 Playwright MCP 服务器，该服务器传入的工具请求。
2. AI 智能体识别 Web 任务并选择合适的浏览器工具，例如 browser_navigate 或 browser_click。
3. MCP 服务器初始化浏览器实例并创建一个新的页面上下文以执行请求的命令。
4. Playwright 在 DOM 上执行操作，处理等待和超时以确保页面处于正确状态。
5. 结果（包括提取的文本、控制台日志或执行状态）作为结构化上下文传回给智能体。
6. 根据工作流要求保留或关闭浏览器上下文，以优化资源利用。

Playwright MCP 浏览器自动化 配置指南

要开始使用此技能，请安装必要的 NPM 包和浏览器二进制文件：

npm install -g @playwright/mcp
npx playwright install chromium

然后您可以使用 npx 运行服务器：

npx @playwright/mcp --headless

Playwright MCP 浏览器自动化 数据架构与分类体系

该技能使用结构化方法管理浏览器数据和交互，以确保 AI 智能体接收到清晰、可操作的信息。这种数据组织是 Openclaw Skills 体验的核心部分：

组件	类型	描述
选择器	字符串	用于定位特定 DOM 元素进行交互的 CSS 或 XPath 选择器。
页面快照	对象	供智能体理解的可访问 DOM 树的结构化表示。
评估结果	JSON	在浏览器上下文中执行的自定义 JavaScript 的输出。
配置	标志	定义浏览器环境的参数，如 --viewport-size 和 --user-agent。

name: playwright-mcp
description: Browser automation via Playwright MCP server. Navigate websites, click elements, fill forms, extract data, take screenshots, and perform full browser automation workflows.
metadata: {"openclaw":{"emoji":"??","os":["linux","darwin","win32"],"requires":{"bins":["playwright-mcp","npx"]},"install":[{"id":"npm-playwright-mcp","kind":"npm","package":"@playwright/mcp","bins":["playwright-mcp"],"label":"Install Playwright MCP"}]}}

Playwright MCP Skill

Browser automation powered by Playwright MCP server. Control Chrome, Firefox, or WebKit programmatically.

Installation

npm install -g @playwright/mcp
# Or
npx @playwright/mcp

Install browsers (first time):

npx playwright install chromium

Quick Start

Start MCP Server (STDIO mode)

npx @playwright/mcp

Start with Options

# Headless mode
npx @playwright/mcp --headless

# Specific browser
npx @playwright/mcp --browser firefox

# With viewport
npx @playwright/mcp --viewport-size 1280x720

# Ignore HTTPS errors
npx @playwright/mcp --ignore-https-errors

Common Use Cases

1. Navigate and Extract Data

# MCP tools available:
# - browser_navigate: Open URL
# - browser_click: Click element
# - browser_type: Type text
# - browser_select_option: Select dropdown
# - browser_get_text: Extract text content
# - browser_evaluate: Run JavaScript
# - browser_snapshot: Get page structure
# - browser_close: Close browser

2. Form Interaction

1. browser_navigate to form URL
2. browser_type into input fields
3. browser_click to submit
4. browser_get_text to verify result

3. Data Extraction

1. browser_navigate to page
2. browser_evaluate to run extraction script
3. Parse returned JSON data

MCP Tools Reference

Configuration Options

# Security
--allowed-hosts example.com,api.example.com
--blocked-origins malicious.com
--ignore-https-errors

# Browser settings
--browser chromium|firefox|webkit
--headless
--viewport-size 1920x1080
--user-agent "Custom Agent"

# Timeouts
--timeout-action 10000      # Action timeout (ms)
--timeout-navigation 30000  # Navigation timeout (ms)

# Output
--output-dir ./playwright-output
--save-trace
--save-video 1280x720

Examples

Login to Website

browser_navigate: { url: "https://example.com/login" }
browser_type: { selector: "#username", text: "user" }
browser_type: { selector: "#password", text: "pass" }
browser_click: { selector: "#submit" }
browser_get_text: { selector: ".welcome-message" }

Extract Table Data

browser_navigate: { url: "https://example.com/data" }
browser_evaluate: { 
  script: "() => { return Array.from(document.querySelectorAll('table tr')).map(r => r.textContent); }" 
}

Screenshot

browser_navigate: { url: "https://example.com" }
browser_evaluate: { script: "() => { document.body.style.zoom = 1; return true; }" }
# Screenshot saved via --output-dir or returned in response

Security Notes

• By default restricts file system access to workspace root
• Host validation prevents navigation to untrusted domains
• Sandboxing enabled by default (use --no-sandbox with caution)
• Service workers blocked by default

Troubleshooting

# Update browsers
npx playwright install chromium

# Debug mode
npx @playwright/mcp --headless=false --output-mode=stdout

# Check installation
playwright-mcp --version

Links

• Playwright Docs
• MCP Protocol
• NPM Package