⚡

Playwright浏览器自动化Skill browsing-with-playwright

Playwright浏览器自动化技能是一个基于Playwright MCP的网页自动化工具，支持网站导航、表单填写、元素点击、截图和数据提取等功能。适用于网页抓取、UI测试、自动化测试、数据采集、网页爬虫和浏览器交互自动化等场景。关键词：浏览器自动化、Playwright、网页抓取、UI测试、数据采集、自动化测试、网页爬虫、表单提交、截图工具。

测试 0 次安装 7 次浏览 更新于 3/2/2026

name: browsing-with-playwright description: | 使用Playwright MCP进行浏览器自动化。导航网站、填写表单、点击元素、 截图和提取数据。当任务需要网页浏览、表单提交、 网页抓取、UI测试或任何浏览器交互时使用。仅获取静态内容时不要使用（使用curl/wget代替）。

浏览器自动化

通过Playwright MCP服务器自动化浏览器交互。

服务器生命周期

启动服务器

# 使用辅助脚本（推荐）
bash scripts/start-server.sh

# 或手动启动
npx @playwright/mcp@latest --port 8808 --shared-browser-context &

停止服务器

# 使用辅助脚本（先关闭浏览器）
bash scripts/stop-server.sh

# 或手动停止
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_close -p '{}'
pkill -f "@playwright/mcp"

何时停止

  • 任务结束时：浏览器工作完成后停止
  • 长会话：如果执行多个浏览器任务则保持运行
  • 错误时：如果浏览器无响应则停止并重启

重要提示： --shared-browser-context 标志是必需的，用于在多个mcp-client.py调用之间保持浏览器状态。没有它，每次调用都会获得新的浏览器上下文。

快速参考

导航

# 访问URL
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate \
  -p '{"url": "https://example.com"}'

# 后退
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate_back -p '{}'

获取页面状态

# 无障碍快照（返回用于点击/输入的元素引用）
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_snapshot -p '{}'

# 截图
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_take_screenshot \
  -p '{"type": "png", "fullPage": true}'

与元素交互

使用快照输出中的 ref 来定位元素：

# 点击元素
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_click \
  -p '{"element": "提交按钮", "ref": "e42"}'

# 输入文本
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_type \
  -p '{"element": "搜索输入框", "ref": "e15", "text": "hello world", "submit": true}'

# 填写表单（多个字段）
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"}]}'

# 选择下拉菜单
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_select_option \
  -p '{"element": "国家下拉菜单", "ref": "e20", "values": ["US"]}'

等待条件

# 等待文本出现
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \
  -p '{"text": "成功"}'

# 等待时间（毫秒）
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \
  -p '{"time": 2000}'

执行JavaScript

python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_evaluate \
  -p '{"function": "return document.title"}'

多步骤Playwright代码

对于复杂工作流，使用 browser_run_code 在一次调用中运行多个操作：

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(); }"}'

提示： 使用 browser_run_code 处理应该是原子操作（要么全部成功要么全部失败）的复杂多步骤操作。

工作流：表单提交

  1. 导航到页面
  2. 获取快照以查找元素引用
  3. 使用引用填写表单字段
  4. 点击提交
  5. 等待确认
  6. 截图结果

工作流：数据提取

  1. 导航到页面
  2. 获取快照（包含文本内容）
  3. 使用browser_evaluate进行复杂提取
  4. 处理结果

验证

运行：python3 scripts/verify.py

预期结果：✓ Playwright MCP服务器正在运行

如果验证失败

  1. 运行诊断：pgrep -f "@playwright/mcp"
  2. 检查：服务器进程是否在端口8808上运行
  3. 尝试：bash scripts/start-server.sh
  4. 如果仍然失败则停止并报告 - 不要继续执行下游步骤

工具参考

完整工具文档请参见 references/playwright-tools.md。

故障排除

问题 解决方案
找不到元素 首先运行browser_snapshot以获取当前引用
点击失败 先尝试browser_hover，然后点击
表单未提交 在browser_type中使用 "submit": true
页面未加载 增加等待时间或使用browser_wait_for
服务器无响应 停止并重启：bash scripts/stop-server.sh && bash scripts/start-server.sh