Cursor 的 MCP 应用：playwright-mcp-server

文章目录

- - [Playwright 简介](#Playwright 简介)
  - [与 MCP 的集成价值](#与 MCP 的集成价值)
  - [cursor 配置](#cursor 配置)
  - 案例实践

Playwright 简介

Playwright 是由 Microsoft 开发的现代化端到端测试和网页自动化框架。它允许开发者通过代码控制浏览器，模拟用户操作，实现自动化测试、网页爬取、数据采集等任务。

核心特性

跨浏览器支持
- 支持 Chromium、Firefox、WebKit（Safari）
- 统一的 API，一套代码多浏览器运行
强大的自动化能力
- 页面导航和元素交互（点击、输入、滚动）
- 截图和录屏
- 网络拦截和模拟
- 文件上传下载
现代化设计
- 自动等待机制，减少不稳定的测试
- 支持多页面、多标签、iframe 操作
- 移动设备模拟
- 异步操作友好

典型应用场景

自动化测试：回归测试、UI 测试
网页爬虫：动态页面数据采集、信息监控
任务自动化：表单填写、报表生成、批量操作
屏幕截图：网页快照、可视化回归测试
性能监控：页面加载时间、资源分析

基本工作流程

复制代码

1. 启动浏览器 → 2. 打开页面 → 3. 定位元素 → 4. 执行操作 → 5. 获取结果

与 MCP 的集成价值

通过 MCP（Model Context Protocol），Playwright 可以被 AI 助手（如 cursor）直接调用，实现：

自然语言控制浏览器：用对话方式描述需求，AI 自动生成并执行 Playwright 脚本
智能化自动化：AI 理解页面结构，自适应不同网站布局
实时反馈循环：根据执行结果动态调整操作策略

这使得复杂的浏览器自动化任务变得更加直观和易用，非技术人员也能通过自然语言完成高级的网页操作。

cursor 配置

github：microsoft/playwright-mcp: Playwright MCP server

Tools & MCP - Installed MCP Servers，配置 mcp.json。

安装方式

方式一：如果当前环境中安装了 npx（需要安装 Nodejs），只要直接配置 mcp.json
方式二：参考 Playwright MCP server 的 README 文档进行配置（点击 cursor，浏览器会自动弹出启动 cursor 并安装 playwright mcp 服务安装）。

区别：

bash 复制代码

  以上两种方式最终都是使用 npx 来执行，而 npx 的机制是：
  1. 检查本地是否有该包
  2. 如果没有，临时下载到 npx 缓存目录
  3. 执行完毕后，包保留在缓存中（不是全局安装）
  npx 缓存位置：
  # macOS/Linux
  ~/.npm/_npx/
  # Windows
  %LOCALAPPDATA%\npm-cache\_npx\

mcp.json

json 复制代码

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

案例实践

prompt 中最好指定要调用 mcp

复制代码

请使用 Playwright mcp 帮我完成：
1. 打开浏览器访问 https://github.com/trending
2. 等待页面完全加载
3. 截取页面截图
4. 提取前 10 个趋势项目的以下信息：
   - 项目名称（仓库名）
   - 项目描述
   - Star 数量
   - 今日新增 Star 数
   - 编程语言
   - 项目 URL
5. 将获取的信息，写入 txt 文件