Playwright + MCP：用AI对话重新定义浏览器自动化，助力提效300%

用AI对话重新定义浏览器自动化这个话题，最近在圈子里讨论得火热。简单来说，Playwright结合MCP协议，让整个流程的效率提升300%并不是夸张的说法。本文的核心逻辑很清晰：先了解Playwright这个跨浏览器自动化工具的底牌，再搞清楚MCP协议怎么标准化AI与工具的交互，最后上手把环境搭起来，让它真正跑起来。

Playwright：跨浏览器自动化的“瑞士军刀”

Playwright是微软开源的一块利器，在自动化测试领域已经积累了不错的口碑。它的核心优势到底在哪？一句话概括就是：跨浏览器支持原生，几乎不用手动折腾驱动。Chromium、Firefox、WebKit三个内核原生兼容，覆盖了Chrome、Edge、Safari等主流浏览器。相比之下，很多工具需要手动下载和配置驱动路径，Playwright在这方面省事儿得多。

高效稳定这几点同样关键。自动等待机制很聪明，操作前会自动等待元素加载，避免了在代码里到处塞硬编码的sleep语句。智能选择器支持穿透Shadow DOM，处理动态元素定位时，维护成本明显更低。多场景覆盖也全面，文件上传下载、跨域操作、移动端模拟这些复杂需求，基本都能搞定。

MCP协议：标准化AI与工具的“对话”

MCP协议的核心，是给LLM和外部工具之间搭了一座标准化的桥。开发者只需要实现一次MCP Server，就能适配所有支持MCP的客户端，像WindSurf、Cline这些都能无缝对接。动态灵活性也很实用，可以根据页面返回的实时状态，动态调整后续操作指令。安全性方面内置了权限控制，防止LLM越权访问敏感数据。

拿Playwright的MCP Server来说，工作流程其实很清晰：

• 指令接收
  ：LLM接收自然语言描述，比如“点击登录按钮”。

• 指令解析
  ：将自然语言翻译成Playwright的API调用，比如page.click("#login")。

• 结果返回
  ：把操作结果，比如截图、日志等，反馈给LLM，便于闭环验证。

环境搭建

先说Playwright的安装。确保Python版本在3.7以上，推荐3.8+。然后执行：

pip install playwright
python -m playwright install
# 如果版本不匹配，可以强制安装指定版本
playwright install --force chrome

装好后，如果是在VS Code里开发，推荐安装“Playwright Test for VSCode”插件，直接在扩展商店搜就行。

部署MCP Server

核心命令就一行：

npx @playwright/mcp@latest

如果习惯全局安装：

npm install -g @playwright/mcp
npx @playwright/mcp@latest

客户端配置（以VSCode Cline为例）

先安装Cline插件。

安装之后，可以直接在终端执行快速配置命令：

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

手动配置更稳妥。在Cline的设置里，找到MCP Servers配置项，写入：

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

如果遇到连接不上的情况，换一种启动方式试试：

{
  "mcpServers": {
    "memory": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@playwright/mcp@latest"
      ],
      "timeout": 300
    }
  }
}

配置完成后，启动运行，应该能看到连接成功的提示，以及一大串可用的工具列表。

备注一下：如果本地没有大模型，可以参考社区配置国内开源的模型来测试。

配置后体验

在对话框里输入一句话：打开百度，搜索你好，并且截图。看看模型是怎么处理的。它会自动拆解步骤，生成Playwright MCP服务端能执行的指令序列，然后逐步执行。目前每执行一步都会请求确认，安全机制做得不错。

以上是微软官方的实现。另外还有一个社区版本封装得更完整一点：executeautomation/mcp-playwright。

安装方式：

npm install -g @executeautomation/playwright-mcp-server

配置方式类似：

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

如果启动有问题，可以尝试这种更底层的方式：

{
  "mcpServers": {
    "@executeautomation-playwright-mcp-server": {
      "command": "node.exe",
      "args": [
        "你的路径/node_modules/@executeautomation/playwright-mcp-server/dist/index.js",
        "-y",
        "@smithery/cli@latest",
        "run",
        "@executeautomation/playwright-mcp-server",
        "--config",
        "{}"
      ]
    }
  }
}

这个版本配置完成后，工具列表会更丰富，封装得更完善。

有了playwright-mcp，浏览器自动化的门槛被真正降下来了。开发写完代码，在本地用一句自然语言对话就能验证功能是否跑通；产品验收也只需要在对话框里简单描述预期行为；测试工程师更是不用再死磕复杂的脚本代码，全靠对话驱动。后续的迭代只会越来越简单。MCP加持下，人人都是AI时代的工具人，这已经不是什么遥远的愿景了。