Playwright MCP使用教程

Playwright MCP使用教程

一、核心概念解析

Playwright MCP（Model Context Protocol）是微软推出的浏览器自动化框架，通过标准化协议实现AI与浏览器的交互。其核心价值在于将自然语言指令转化为精准的浏览器操作，支持跨浏览器引擎（Chromium/Firefox/WebKit）的自动化测试、数据抓取及网页调试。

二、环境搭建与安装

1. 基础环境要求

• Node.js v20+
• 支持MCP的客户端（如Cursor、VS Code、Claude Desktop）
• 浏览器驱动（通过npx playwright install自动安装）

2. 安装步骤

# 官方服务器安装（推荐）
npm install -g @playwright/mcp
# 或
npx @playwright/mcp@latest

3. 客户端配置示例（以Roo code为例）

打开设置 → MCP服务 → 编辑全局 MCP

配置参数：

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

保存后，验证连接状态（绿灯表示成功）

三、实战案例：自动化百度搜索

1. 自然语言指令

"请使用Playwright MCP打开百度首页，在搜索框输入'测试小罡'，点击搜索按钮后对结果页面截图并返回"

2. 执行流程

• 调用playwright_navigate打开百度首页
• 执行playwright_fill输入关键词
• 触发playwright_click提交搜索
• 通过playwright_screenshot捕获结果页面
• 返回截图及操作状态