Playwright MCP 实现自动表单填写

);

再不会python就不礼貌了

521人浏览 · 2025-04-02 10:03:43

再不会python就不礼貌了 · 2025-04-02 10:03:43 发布

介绍

Playwright MCP（Model Context Protocol）是一个提供浏览器自动化能力的服务器，基于 Playwright 技术构建。这个服务器使大型语言模型（LLM）能够通过结构化的可访问性快照与网页交互，无需依赖截图或视觉调整的模型。

🛠核心功能

• 快速且轻量级：使用 Playwright 的可访问性树，而非基于像素的输入
• LLM 友好：不需要视觉模型，纯粹基于结构化数据运行
• 确定性工具应用：避免了基于截图方法常见的歧义性

应用场景

• 网页导航和表单填写
• 从结构化内容中提取数据
• 由 LLM 驱动的自动化测试
• 为智能代理提供通用浏览器交互能力

MCP 配置安装

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

用户数据目录

Playwright MCP 会使用新的配置文件启动 Chrome 浏览器，位置在：

• Windows: %USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile
• macOS: ~/Library/Caches/ms-playwright/mcp-chrome-profile
• Linux: ~/.cache/ms-playwright/mcp-chrome-profile

所有登录信息都会存储在该配置文件中，如需清除离线状态，可以在会话之间删除它。

特殊运行模式

无头浏览器模式（无 GUI）

适用于后台或批处理操作：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless"
      ]
    }
  }
}

在无 DISPLAY 的 Linux 上运行有头浏览器

需要通过端口启用 SSE 传输：

npx @playwright/mcp@latest --port 8931

然后在 MCP 客户端配置中设置 SSE 端点：

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/sse"
    }
  }
}

工具模式

Playwright MCP 提供两种模式：

1. 快照模式（默认）

使用可访问性快照，提供更好的性能和可靠性。

2. 视觉模式

使用截图进行基于视觉的交互，通过添加 --vision 标志启用：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--vision"
      ]
    }
  }
}

视觉模式最适合能够基于提供的截图使用 X-Y 坐标空间与元素交互的计算机使用模型。

编程使用（自定义传输）

import { createServer } from '@playwright/mcp';

const server = createServer({
  launchOptions: { headless: true }
});
transport = new SSEServerTransport("/messages", res);
server.connect(transport);

可用工具功能

快照模式工具

工具名称	描述	参数
browser_navigate	导航到 URL	url (string): 要导航到的 URL
browser_go_back	返回上一页	无
browser_go_forward	前进到下一页	无
browser_click	在网页上执行点击	element (string): 人类可读的元素描述 ref (string): 页面快照中的精确目标元素引用
browser_hover	悬停在页面元素上	element (string): 人类可读的元素描述 ref (string): 页面快照中的精确目标元素引用
browser_drag	执行两个元素之间的拖放	startElement, startRef, endElement, endRef
browser_type	在可编辑元素中输入文本	element, ref, text (string): 要输入的文本 submit (boolean): 是否提交输入的文本
browser_select_option	在下拉菜单中选择选项	element, ref, values (array): 要在下拉菜单中选择的值数组
browser_choose_file	选择一个或多个要上传的文件	paths (array): 要上传的文件的绝对路径
browser_press_key	按下键盘上的键	key (string): 要按下的键名或要生成的字符
browser_snapshot	捕获当前页面的可访问性快照	无
browser_save_as_pdf	将页面保存为 PDF	无
browser_take_screenshot	捕获页面截图	raw (string): 可选返回无损 PNG 截图，默认为 JPEG
browser_wait	等待指定的时间	time (number): 等待的秒数（上限为 10 秒）
browser_close	关闭页面	无