# Playwright MCP 使用指南

在 AI 辅助开发领域，让 AI 能够控制浏览器执行自动化操作是一个重要的能力需求。Playwright MCP 作为 Microsoft 官方提供的 Model Context Protocol 实现，让 AI 助手能够通过结构化的可访问性快照与网页进行交互，无需依赖视觉模型即可完成各种浏览器操作。

本文将详细介绍 Playwright MCP 的安装配置和使用方法，帮助你打造更智能的开发环境。

# 什么是 Playwright MCP？

Playwright MCP 是一个基于 Model Context Protocol 的浏览器自动化服务器，使用 Playwright 框架实现。它能够让大语言模型通过结构化的可访问性快照与网页进行交互，无需截图或视觉模型即可完成各种浏览器操作。

Playwright MCP 具有以下特点：

• 轻量高效：基于结构化数据运行，快速、轻量且确定性高
• 多浏览器支持：支持 Chrome、Firefox、WebKit、Edge 等多种浏览器
• 灵活运行：支持有头模式和无头模式
• 广泛集成：支持 VS Code、Cursor、Claude Desktop、OpenCode 等多种 AI 助手

# Playwright MCP 能做什么？

通过 Playwright MCP，你的 AI 助手可以获得以下浏览器自动化能力：

• 🌐 网页导航：访问任意 URL，加载网页内容
• 👆 元素点击：点击按钮、链接、图片等各种页面元素
• ⌨️ 表单填写：输入文本、填写表单、选择选项
• 📸 截图捕获：截取页面截图，支持可视区域和全页面截图
• 📄 PDF 生成：将网页导出为 PDF 文件
• 🔍 元素悬停：悬停在特定元素上触发交互
• 📋 标签管理：创建、关闭、切换浏览器标签页
• 🌐 网络请求：监控和分析网络请求
• 🛠️ 开发者工具：访问浏览器开发者工具

# 在 OpenCode 中配置 Playwright MCP

OpenCode 支持本地部署 Playwright MCP Server。下面详细介绍配置步骤。

# 前置要求

在开始配置之前，确保已安装以下环境：

• Node.js：建议 v18 或更高版本
• npm：Node.js 包管理器
• 浏览器：Chrome、Firefox、WebKit、Edge 中至少安装一个

# 步骤一：安装 Playwright 浏览器

如果本地没有安装 Playwright 浏览器，需要先安装：

# 安装 Chromium（默认）

npx playwright install chromium

# 或安装所有浏览器

npx playwright install

# 步骤二：配置 opencode.jsonc

在项目根目录创建或编辑 opencode.jsonc 文件，添加以下配置内容：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "playwright": {
      "type": "local",
      "command": [
        "npx",
        "@playwright/mcp@latest"
      ],
      "enabled": true
    }
  }
}

配置项详细说明：

# 步骤三：重启 OpenCode

配置完成后，需要重启 OpenCode 使配置生效：

1. 关闭当前 OpenCode 会话
2. 重新打开项目目录
3. OpenCode 会自动加载配置文件并启动 MCP Server

# 步骤四：验证连接

让我们从一个简单的例子开始，感受 AI 自动化的魅力。
在 opencode 窗口内输入：

请打开百度首页 (https://www.baidu.com)，在搜索框里输入'上海天气'，然后搜索。

# 高级配置选项

Playwright MCP 支持丰富的配置选项，可以通过命令行参数自定义行为：

{
  "mcp": {
    "playwright": {
      "type": "local",
      "command": [
        "npx",
        "@playwright/mcp@latest",
        "--headless",
        "--browser=chromium",
        "--viewport-size=1280x720"
      ],
      "enabled": true
    }
  }
}

常用命令行参数：

# 总结

通过 Playwright MCP，OpenCode 获得了强大的浏览器自动化能力。你可以直接在 AI 助手中完成网页浏览、表单填写、截图捕获等操作，真正实现「让 AI 帮你操作浏览器」的高效工作体验。

无论是自动化测试、数据抓取还是网页操作，Playwright MCP 都能大大提升工作效率。

参考文档：

• Playwright MCP 官方 GitHub
• Playwright 官方文档
• OpenCode MCP Servers 官方文档