Playwright MCP 浏览器自动化教程

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

测试开发全景图：人工智能测试、智能驱动、自动化、测试开发、左移右移与DevOps的持续交付

本文将手把手教你如何配置和使用 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 为例）

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

2. 选择 MCP 选项

3. 点击 Add new global MCP server

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

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

5. 重启 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教程"，点击搜索按钮，然后对结果页面截图并返回给我。

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

4. 调用playwright_navigate打开百度首页

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

6. 调用playwright_click点击搜索按钮

7. 调用playwright_screenshot对结果页面截图

8. 获取结果：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 为你打工！

告别手动切屏和繁琐调试，用自然语言指挥 AI 操作浏览器

测试开发全景图：人工智能测试、智能驱动、自动化、测试开发、左移右移与DevOps的持续交付