跳到主要内容

playwright-mcp 的使用

什么是 playwright-mcp​

playwright-mcp 是一个基于 Model Context Protocol (MCP) 的 Playwright 服务器，它为 AI 助手提供了强大的网页自动化能力。通过 MCP 协议，AI 助手可以直接控制浏览器，执行点击、输入、截图等操作，实现真正的网页交互自动化。

核心优势​

  • AI 友好：专为 AI 助手设计的接口，支持自然语言描述的操作
  • 跨平台：支持 Windows、macOS、Linux 多平台
  • 多浏览器：支持 Chromium、Firefox、Safari 等主流浏览器
  • 高性能：基于 Playwright 的高效自动化引擎

安装与配置​

通过 npm 安装​

npm install -g @executeautomation/playwright-mcp

配置 Claude Desktop​

在 Claude Desktop 的配置文件中添加 MCP 服务器配置：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%/Claude/claude_desktop_config.json

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

重启 Claude Desktop 后，就可以看到 playwright-mcp 提供的工具了。

核心功能与使用场景​

浏览器控制工具​

网页导航与截图​

使用场景：查看网页内容、监控页面状态

请帮我打开 GitHub 首页并截图

AI 会调用 playwright_launch_browser 启动浏览器，然后使用 playwright_navigate_to 访问 GitHub，最后通过 playwright_screenshot 生成截图。

表单填写与提交​

使用场景：自动化测试、数据录入

请帮我在登录页面输入用户名"test@example.com"，密码"password123"，然后点击登录按钮

AI 会依次执行：

  • playwright_type 输入用户名
  • playwright_type 输入密码
  • playwright_click 点击登录按钮

数据抓取与分析​

使用场景：信息收集、竞品分析

工作流程图：

常用工具详解​

基础浏览器操作​

工具名称功能使用场景
playwright_launch_browser启动浏览器开始自动化流程
playwright_navigate_to页面导航访问指定URL
playwright_close关闭浏览器结束自动化流程

页面交互工具​

// 元素定位与操作示例
await page.click('button[data-testid="login-btn"]');
await page.type('#username', 'user@example.com');
await page.selectOption('select#country', 'China');
工具名称功能典型用法
playwright_click点击元素按钮点击、链接跳转
playwright_type输入文本表单填写、搜索输入
playwright_select_option下拉选择选择国家、分类等

信息获取工具​

工具名称功能应用场景
playwright_get_page_content获取页面内容数据抓取、内容分析
playwright_screenshot页面截图状态记录、问题诊断
playwright_get_element_text获取元素文本提取特定信息

实际应用示例​

电商价格监控​

用户：请帮我监控某商品的价格变化

AI执行流程：
1. 打开浏览器访问商品页面
2. 定位价格元素并提取当前价格
3. 截图保存当前状态
4. 定期重复检查并对比价格变化

社交媒体内容发布​

用户：帮我在社交平台发布一条动态

AI执行流程：
1. 导航到发布页面
2. 点击发布按钮打开编辑器
3. 输入动态内容
4. 上传图片（如需要）
5. 点击发布按钮

网站功能测试​

测试流程自动化：

最佳实践​

元素定位策略​

优先使用稳定的选择器：

  • data-testid 属性（推荐）
  • id 属性
  • 语义化的 CSS 类名
  • 避免使用位置相关的选择器

错误处理与重试​

// 带重试机制的操作示例
async function clickWithRetry(selector: string, maxRetries = 3) {
    for (let i = 0; i < maxRetries; i++) {
        try {
            await page.click(selector, { timeout: 5000 });
            return;
        } catch (error) {
            if (i === maxRetries - 1) throw error;
            await page.waitForTimeout(1000);
        }
    }
}

性能优化​

  • 页面等待：合理使用 waitForSelector 等待元素加载
  • 资源控制：及时关闭不需要的浏览器实例
  • 并发限制：避免同时打开过多浏览器窗口

安全注意事项​

  • 避免在自动化脚本中硬编码敏感信息
  • 使用环境变量管理配置信息
  • 定期更新依赖包以修复安全漏洞

故障排除​

常见问题及解决方案​

问题可能原因解决方案
浏览器启动失败权限不足或依赖缺失检查系统权限和 Playwright 依赖
元素定位失败页面未加载完成增加等待时间或使用动态等待
操作超时网络延迟或页面响应慢调整超时设置或检查网络连接

调试技巧​

  1. 启用调试模式：通过环境变量开启详细日志
  2. 分步执行：将复杂操作拆分为多个步骤
  3. 截图验证：在关键步骤进行截图确认状态

通过 playwright-mcp，AI 助手获得了强大的网页自动化能力，可以像人类一样与网页进行交互，为各种自动化场景提供了新的可能性。

编辑此页
最后由 alsritter.mac 于 更新