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 使用指南 #### 安装与配置 为了使用 PlaywrightMCP (Model Context Protocol) 服务器进行浏览器自动化和网页抓取,首先需要确保环境已正确设置。对于 Windows 用户来说,在命令提示符或者 PowerShell 中执行以下命令来安装必要的 Python 库: ```bash pip install playwright pytest-playwright mcp-server-playwright ``` 这会下载并安装 `playwright` 工具以及相关的测试框架和支持库[^3]。 #### 创建基本脚本 创建一个新的 Python 文件作为入口点,并编写如下所示的基础代码片段来进行页面加载及交互操作: ```python import asyncio from playwright.async_api import async_playwright async def main(): async with async_playwright() as p: browser = await p.chromium.launch(headless=False) context = await browser.new_context() page = await context.new_page() url = 'https://example.com' await page.goto(url) # 执行特定的任务, 如点击按钮或输入文本. await page.fill('input[name="q"]', 'Playwright') await page.press('input[name="q"]', 'Enter') # 关闭浏览器实例 await browser.close() if __name__ == '__main__': asyncio.run(main()) ``` 这段程序展示了如何启动 Chromium 浏览器、导航到指定 URL 并模拟用户行为(比如搜索关键词). #### 配合 MCP Server 使用 当涉及到更复杂的场景时,可以考虑利用专门设计用来增强 Playwright 功能性的 MCP 服务[@executeautomation/playwright-mcp-server]。通过集成这些组件,能够更容易地实现诸如数据提取、表单提交等功能而无需手动编码每一个细节[^1]. 例如,如果想要获取某个网站上的表格信息并将之保存至本地文件系统,则可以通过调用相应的 API 接口完成此任务而不必关心底层逻辑的具体实现方式. #### 处理移动端设备仿真 除了桌面版之外,还可以轻松切换到移动视图模式以适应不同类型的终端需求。下面是一个简单的例子说明怎样改变 User-Agent 字串从而伪装成智能手机访问目标站点: ```python await context.add_init_script( """ Object.defineProperty(navigator, 'webdriver', {get: () => undefined}) """) await context.set_extra_http_headers({'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_7 like Mac OS X)'}) page = await context.new_page() await page.emulate_viewport_size(width=390, height=844) ``` 以上代码修改了 navigator.webDriver 属性防止被检测为自动化工具的同时设置了适合 iOS 设备的 viewport 尺寸参数.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值