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 服务安装）。
• 区别：

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

mcp.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 文件