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

admin管理员组

文章数量:1028921

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

前言

最近热衷于找一些好玩的MCP，集成在cursor中，给大模型外挂许多有趣的功能，在开发的代码的同时，在IDE中可以获得更多的乐趣。例如：

1. 什么是MCP？本地如何开发MCP Server
2. MCP实战 | cursor 如何一句话操作 gitHub 代码库
3. cursor 如何调用 MCP server 实现天气查询
4. 自定义 MCP Server，在 cursor 中连接本地 MySQL 实现了统计分析
5. Pages MCP Server + cursor，一句话完成旅游出行规划
6. MCP实战 | cursor 中如何掌握股市动态

今天要分享的 mcp server：Playwright，提供了浏览器自动化能力，能够通过结构化的可访问性快照与网页进行交互，可以实现表单填写、页面跳转、网页数据提取、保存网页为PDF等操作.

配置

在 Cursor 的 Cursor Settings 中找到 MCP。

点击右侧上方的 Add new global MCP server 按钮，便自动打开 .local 目录下的 mcp.json 文件，我们将两个 mcp server 的json信息粘贴进去.

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

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

可以看到 Playwright 的一些tool，列表如下：

1. 页面交互操作指令

1. browser_click：点击页面上的元素
2. browser_hover：悬停到某个元素上
3. browser_drag：拖拽元素到目标元素位置
4. browser_type：输入文本到可编辑元素中
5. browser_select_option：选择下拉菜单中的选项

2. 基于视觉的操作

1. browser_screen_move_mouse：将鼠标移动到指定坐标
2. browser_screen_click：点击页面某个坐标位置
3. browser_screen_drag：在坐标点间拖动鼠标
4. browser_screen_type：视觉模式下输入文本

3. 快照与截图

1. browser_snapshot：获取页面快照（用于后续点击等操作）
2. browser_take_screenshot：拍摄当前页面截图（非交互用）
3. browser_screen_capture：基于视觉的整页截图

4. 键盘操作

browser_press_key：模拟按下键盘上的某个键

5. 文件与导出

1. browser_file_upload：上传本地文件
2. browser_pdf_save：将当前页面保存为 PDF 文件

6. 标签页管理

1. browser_tab_list：列出所有浏览器标签
2. browser_tab_new：打开一个新标签页（可指定 URL）
3. browser_tab_select：切换到指定的标签页（通过索引）
4. browser_tab_close：关闭标签页（默认当前页）

7. 页面导航

1. browser_navigate：跳转到指定的 URL
2. browser_navigate_back：返回上一页面
3. browser_navigate_forward：前进到下一页面

8. 其他操作

1. browser_wait：等待指定时间（最多 10 秒）
2. browser_close：关闭页面
3. browser_install：安装配置中指定的浏览器

实操

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

1. 打开网页

我们在cursor的chat中要求打开一个网站。

playwright 启动一个chrome浏览器，并调用了 browser_navigate 打开一个网页，结果如下：

2. 数据搜索

输入 进入腾讯云开发者社区，大模型搜索到网站，playwright 进入网站。

在浏览器中就进入到了腾讯云开发者社区。

输入提示词，搜索我的（叫我阿柒啊）个人主页。

如上图所示，通过 browser_snapshot 获取页面快照，然后调用 browser_type 输入搜索文本到搜索框中，最后通过多次 browser_clik 点击动作完成页面的跳转，结果如下图：

同时，在跳转到个人主页之后，playwright 还提取了主页的用户信息、排名信息和文章内容等。

3. 表单填写

表单填写是我们常见的一个场景，这里开发了一个表单页面：

在cursor中我们输入表单地址和填写的内容：

playwright 多次调用 browser_type 输入搜索文本到搜索框中。

4. 保存网页PDF

在提示词中输入 保存pdf，playwright 会将当前页面所有的内容（包括下拉才能展示的）保存为 PDF。

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

结语

playwright 提供了强大的浏览器交互能力，结合大模型可以帮我们完成很多的事情。

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

前言

最近热衷于找一些好玩的MCP，集成在cursor中，给大模型外挂许多有趣的功能，在开发的代码的同时，在IDE中可以获得更多的乐趣。例如：

1. 什么是MCP？本地如何开发MCP Server
2. MCP实战 | cursor 如何一句话操作 gitHub 代码库
3. cursor 如何调用 MCP server 实现天气查询
4. 自定义 MCP Server，在 cursor 中连接本地 MySQL 实现了统计分析
5. Pages MCP Server + cursor，一句话完成旅游出行规划
6. MCP实战 | cursor 中如何掌握股市动态

今天要分享的 mcp server：Playwright，提供了浏览器自动化能力，能够通过结构化的可访问性快照与网页进行交互，可以实现表单填写、页面跳转、网页数据提取、保存网页为PDF等操作.

配置

在 Cursor 的 Cursor Settings 中找到 MCP。

点击右侧上方的 Add new global MCP server 按钮，便自动打开 .local 目录下的 mcp.json 文件，我们将两个 mcp server 的json信息粘贴进去.

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

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

可以看到 Playwright 的一些tool，列表如下：

1. 页面交互操作指令

1. browser_click：点击页面上的元素
2. browser_hover：悬停到某个元素上
3. browser_drag：拖拽元素到目标元素位置
4. browser_type：输入文本到可编辑元素中
5. browser_select_option：选择下拉菜单中的选项

2. 基于视觉的操作

1. browser_screen_move_mouse：将鼠标移动到指定坐标
2. browser_screen_click：点击页面某个坐标位置
3. browser_screen_drag：在坐标点间拖动鼠标
4. browser_screen_type：视觉模式下输入文本

3. 快照与截图

1. browser_snapshot：获取页面快照（用于后续点击等操作）
2. browser_take_screenshot：拍摄当前页面截图（非交互用）
3. browser_screen_capture：基于视觉的整页截图

4. 键盘操作

browser_press_key：模拟按下键盘上的某个键

5. 文件与导出

1. browser_file_upload：上传本地文件
2. browser_pdf_save：将当前页面保存为 PDF 文件

6. 标签页管理

1. browser_tab_list：列出所有浏览器标签
2. browser_tab_new：打开一个新标签页（可指定 URL）
3. browser_tab_select：切换到指定的标签页（通过索引）
4. browser_tab_close：关闭标签页（默认当前页）

7. 页面导航

1. browser_navigate：跳转到指定的 URL
2. browser_navigate_back：返回上一页面
3. browser_navigate_forward：前进到下一页面

8. 其他操作

1. browser_wait：等待指定时间（最多 10 秒）
2. browser_close：关闭页面
3. browser_install：安装配置中指定的浏览器

实操

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

1. 打开网页

我们在cursor的chat中要求打开一个网站。

playwright 启动一个chrome浏览器，并调用了 browser_navigate 打开一个网页，结果如下：

2. 数据搜索

输入 进入腾讯云开发者社区，大模型搜索到网站，playwright 进入网站。

在浏览器中就进入到了腾讯云开发者社区。

输入提示词，搜索我的（叫我阿柒啊）个人主页。

如上图所示，通过 browser_snapshot 获取页面快照，然后调用 browser_type 输入搜索文本到搜索框中，最后通过多次 browser_clik 点击动作完成页面的跳转，结果如下图：

同时，在跳转到个人主页之后，playwright 还提取了主页的用户信息、排名信息和文章内容等。

3. 表单填写

表单填写是我们常见的一个场景，这里开发了一个表单页面：

在cursor中我们输入表单地址和填写的内容：

playwright 多次调用 browser_type 输入搜索文本到搜索框中。

4. 保存网页PDF

在提示词中输入 保存pdf，playwright 会将当前页面所有的内容（包括下拉才能展示的）保存为 PDF。

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

结语

playwright 提供了强大的浏览器交互能力，结合大模型可以帮我们完成很多的事情。

本文标签： Playwright MCP Server 使用指南让 Cursor 拥有浏览器自动化能力