你是否曾厌倦在编程软件和浏览器之间反复切换，只为了检查 AI 生成的代码能否正常运行？现在，有了 Playwright MCP，你可以直接让 AI 自己操作浏览器，查看自己写的代码运行效果，并自行修复问题。

本文将手把手教你如何配置和使用 Playwright MCP，让 AI 成为你的浏览器自动化助手，真正为你打工而不是你伺候它。

一、什么是 Playwright MCP？为什么你需要它？

Playwright MCP 是一个基于 Model Context Protocol 的服务器，它在大语言模型（LLM）和 Playwright 浏览器自动化框架之间架起了一座桥梁。简单来说，它让 AI 能够理解和操作网页，而不是仅仅生成可能出错的代码。

与传统方式的对比

二、安装与配置：一步步带你搞定

环境准备

首先确保你的系统已安装：

• Node.js v16+ 或 Python 3.8+

• 一款支持 MCP 的客户端（如 Cursor、VS Code、Claude Desktop）

安装 Playwright MCP 服务器

打开终端，执行以下命令：

# 全局安装Playwright MCP服务器npm install -g @executeautomation/playwright-mcp-server
# 或者使用微软官方版本npm install -g @playwright/mcp

安装浏览器驱动（如果系统没有的话）：

# 安装Playwright浏览器驱动npx playwright install

配置客户端（以 Cursor 为例）

• 打开 Cursor，点击右上角设置图标

• 选择 MCP 选项

• 点击 Add new global MCP server

• 在配置窗口中输入以下内容：

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

• 重启 Cursor，回到 MCP 设置页面，确认显示绿灯（表示连接成功）

三、核心功能：Playwright MCP 能做什么？

Playwright MCP 提供了一系列强大的工具函数，让 AI 可以全面操作浏览器：

1. 页面导航：playwright_navigate - 让浏览器跳转到指定 URL

2. 元素操作：playwright_click - 点击页面元素，playwright_fill - 填写表单

3. 内容获取：playwright_get_visible_text - 获取页面可见文本

4. 截图功能：playwright_screenshot - 对页面或元素截图

5. 文件操作：playwright_upload_file - 上传文件

6. PDF 导出：playwright_save_as_pdf - 将页面保存为 PDF

7. 高级交互：拖拽、悬停、iframe 操作、键盘模拟等

四、实战演示：让 AI 自动完成百度搜索并排查问题

下面是一个完整的使用示例，展示如何让 AI 帮你自动化网页操作：

1. 开启会话：在 Cursor 中创建一个新会话，确保已启用 MCP 功能

2. 发送指令：输入以下指令：

请使用Playwright MCP打开百度首页(https://www.baidu.com)，在搜索框中输入"Playwright教程"，点击搜索按钮，然后对结果页面截图并返回给我。

1. 观察执行：AI 会自动调用相应的 MCP 工具函数：

• 调用 playwright_navigate 打开百度首页

• 调用 playwright_fill 在搜索框输入关键词

• 调用 playwright_click 点击搜索按钮

• 调用 playwright_screenshot 对结果页面截图

获取结果：AI 会将截图返回给你，并报告操作是否成功

更高级的用法：如果页面出现问题，你可以直接告诉 AI：

我的网站在登录时出错了，网址是http://localhost:5173，账号是admin，密码是admin。请使用Playwright MCP尝试登录，查看控制台错误信息，然后修复问题。

AI 会自动操作浏览器执行登录，查看错误信息，分析问题原因，并提供修复方案。

五、最佳实践与技巧

1. 明确指令：给 AI 的指令越明确，自动化效果越好。指定需要操作的元素和预期行为

2. 分步进行：复杂操作可以分解为多个步骤，逐步验证效果

3. 错误处理：如果操作失败，可以让 AI 查看控制台日志（playwright_console_logs）

4. 保持会话：长时间操作中，浏览器状态会保持，可以利用这一点进行多步骤操作

5. 性能优化：对于复杂页面，可以指定等待条件，确保元素加载完成再操作

六、常见问题解答

1. Q：Windows 环境下启动失败怎么办？A：尝试执行 npm run build 编译 TypeScript 项目，或使用 WSL 环境运行。

2. Q：元素定位超时怎么办？A：页面可能有动态加载内容，增加等待时间或添加 wait_for_selector 步骤。

3. Q：如何清除浏览器登录状态？A：删除用户数据目录（如 Windows：%USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile）。

4. Q：支持哪些浏览器？A：支持 Chromium、Firefox 和 WebKit 三大浏览器引擎。

七、总结：为什么 Playwright MCP 是游戏规则改变者？

Playwright MCP 真正实现了自然语言到浏览器操作的转换，将自动化测试、数据抓取和网页操作的复杂度降到了最低。

它不仅能够大幅提升开发效率，减少在手动测试和调试上的时间消耗，还让不会编程的人也能通过自然语言指挥浏览器完成自动化任务。无论是自动填写网页表单、抓取动态数据，还是进行复杂的网页操作，Playwright MCP 都能让 AI 成为你的得力助手。

现在就开始尝试 Playwright MCP 吧，让你从繁琐的浏览器操作中解放出来，真正让 AI 为你打工！