Playwright MCP Server 使用指南:让 Cursor 拥有浏览器自动化能力

今天分享一下 playwright MCP Server,其提供了浏览器自动化能力,使大型语言模型能够在真实的浏览器环境中与网页交互,

也可以执行任务,例如运行JavaScript、截屏和导航网页元素,同时无缝处理 API 测试以验证端点并确保可靠性。

Cursor配置

在 Cursor 的 Cursor Settings 中找到 MCP,点击右侧上方的 Add new global MCP server 按钮,便自动打开 mcp.json文件,然后将mcp server 的配置信息粘贴进去。

--javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

在MCP页面就可以看到配置的 mcp server 信息。

可以看到 Playwright 的一些tool,列表如下:

start_codegen_session:启动一个新的代码生成会话以记录 Playwright 操作

end_codegen_session:结束代码生成会话并生成测试文件

get_codegen_session:获取有关代码生成会话的信息

clear_codegen_session:清除不生成测试的代码生成会话

playwright_navigate:在浏览器中导航到一个URL,并配置视口和浏览器设置

playwright_screenshot:捕获整个页面或特定元素的截图

playwright_click:单击页面上的元素

pywright_click_and_switch_tab:单击页面上的链接并切换到新打开的标签页

playwright_iframe_click:点击页面中iframe内的元素

playwright_hover:将鼠标悬停在页面的元素上

playwright_fill:填写输入字段

playwright_select:选择带有SELECT标签的元素

playwright_evaluate:在浏览器控制台执行JavaScript

playwright_console_logs:从浏览器中带有过滤选项的控制台日志检索功能,支持检索所有日志类型,例如 - 全部、错误、警告、日志、信息、调试、异常。

playwright_close:关闭浏览器并释放所有资源

playwright_expect_response:要求 Playwright 开始等待 HTTP 响应

playwright_assert_response:等待并验证之前发起的HTTP响应等待操作

playwright_custom_user_agent:为浏览器设置自定义用户代理

playwright_get_visible_text:获取当前页面的可见文本内容

playwright_get_visible_html:获取当前页面的HTML内容

playwright_go_back:在浏览器历史记录中向后导航

playwright_go_forward:在浏览器历史记录中向前导航

playwright_drag:将元素拖动到目标位置

playwright_press_key:按下键盘键

playwright_save_as_pdf:将当前页面保存为PDF文件

实操

我们使用 Playwright 来做一些常见的浏览器操作。

打开一个网页

在cursor中要求打开百度,playwright 启动一个chrome浏览器,并调用了

playwright_navigate打开一个网页,结果如下:


数据搜索

输入 搜索mcpflow,进入第一个网站

playwright通过 playwright_fill以及playwright_click打开MCPFlow这个网站

保存成pdf

在提示词中输入 保存pdf,playwright 会将当前页面所有的内容保存为 PDF。

通过playwright_save_as_pdf工具将页面保存成pdf

我们打开PDF,如图可以看到页面已经被保存。

自动填写表单

首先我们可以通过Cursor要求其帮我们写一个Form表单相关代码,例如:请帮我写一个Form表单,用于收集MCP案例信息,表单信息包含MCP案例、希望达到的效果以及角色(开发者、产品经理或者其他)提交后的结果保存在json文件中

然后运行生成的代码,并测试是否满足我们的要求,可以正常保存。

接下来我们就可以通过playwright来实现自动填写表单,输入:http://localhost:3000/index.html请自己发挥帮我填写表单内容

可以看到自己填充内容实现自动填写表单,最后填写的内容保存在json文件中,如下图:

<think>好的,用户想了解如何在新版Cursor中配置MCP。首先,我需要回忆之前提供的引用内容,尤其是引用[1]和[2],它们详细介绍了全局和项目级配置的步骤。 用户提到的是新版Cursor,所以要注意MCP已经独立到Features下,而不是旧版的位置。根据引用[1],用户需要进入设置,找到Features下的MCP选项,然后添加新的服务器。这里需要分步骤说明,包括如何打开设置,找到正确的菜单,以及填写配置参数。 另外,用户可能不清楚全局配置和项目级配置的区别。根据引用[2],全局配置对所有项目有效,而项目级配置需要创建.cursor/mcp.json文件,并可能需要Node.js环境。需要明确说明两者的不同应用场景,比如全局适合常用服务,项目级适合特定需求。 还要注意不同操作系统的路径问题,比如Windows和Mac在命令行参数上的差异,例如引用[3]中的示例使用了npx,而Windows可能需要指定cmd.exe。需要提醒用户根据系统调整命令路径,特别是反斜杠的转义问题。 最后,用户可能需要验证配置是否成功,可以建议他们通过自然语言指令测试MCP服务是否响应。同时,注意事项如环境变量、API密钥的替换(如Figma的例子)也要提及,确保用户不会遗漏关键配置步骤。</think>### 新版 Cursor 中配置 MCP 的分步指南 根据引用[1][2][3]的配置说明,新版 CursorMCP 配置分为全局配置和项目级配置两种方式: --- #### **一、全局配置(适用于所有项目)** 1. **打开 Cursor 设置** - Windows/Mac:点击左上角 `File` → `Settings` (或使用快捷键 `Ctrl/Cmd + ,` ) - 在设置界面左侧导航栏选择 `Features` → `MCP` 2. **添加 MCP 服务器** - 点击 `Add new MCP server` 按钮 - 按以下格式填写配置参数: ```json { "name": "自定义服务名称(如Playwright)", "command": "执行命令路径(如cmd.exe或npx)", "args": ["参数1", "参数2", ...] } ``` - *示例(Windows 下 Playwright 配置)*: ```json "command": "C:\\Windows\\System32\\cmd.exe", "args": ["/c", "npx", "-y", "@executeautomation/playwright-mcp-server"] ``` 此配置会通过命令行启动本地服务[^2] --- #### **二、项目级配置(仅限当前项目)** 1. **创建配置文件** - 在项目根目录新建 `.cursor/mcp.json` 文件 - 参考引用[3]的 Figma 配置示例: ```json { "mcpServers": { "figma-developer-mcp": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--stdio"], "env": {"FIGMA_API_KEY": "你的API密钥"} } } } ``` 2. **依赖环境准备** - 需安装 Node.js(确保 `npx` 命令可用) - 通过 `npm install` 安装对应 MCP 服务包(如 `@executeautomation/playwright-mcp-server`) --- #### **三、配置验证** 1. **重启 Cursor** 使配置生效 2. **发送自然语言指令** 测试服务响应,例如: - "打开浏览器访问https://example.com" - 观察是否触发 Playwright自动化操作 --- #### **注意事项** 1. Windows 路径需使用双反斜杠转义(如 `C:\\path\\to\\cmd.exe`) 2. 涉及 API 密钥时需替换真实值(如 Figma 配置中的 `FIGMA_API_KEY`)[^3] 3. 服务启动需要对应端口未被占用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值