当前位置：首页 > news >正文

Playwright MCP浏览器自动化指南原创

news 2026/5/12 20:59:58

你是否也曾厌倦了在编程软件和浏览器之间来回切换，只为了验证AI生成的代码能不能正确运行？现在，借助 Playwright MCP（Model Context Protocol），你可以让AI亲自操作浏览器，实时查看代码执行效果，甚至自动修复运行中出现的问题。

这篇文章将一步步带你配置和使用 Playwright MCP，让AI真正成为你的浏览器自动化助手——从此不是你围着它转，而是它主动为你“打工”。

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

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

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

代码语言：javascript

AI代码解释

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

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

代码语言：javascript

AI代码解释

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

代码语言：javascript

AI代码解释

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

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

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

代码语言：javascript

AI代码解释

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

观察执行：AI会自动调用相应的MCP工具函数：
- 调用playwright_navigate打开百度首页
- 调用playwright_fill在搜索框输入关键词
- 调用playwright_click点击搜索按钮
- 调用playwright_screenshot对结果页面截图
获取结果：AI会将截图返回给你，并报告操作是否成功

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

代码语言：javascript

AI代码解释

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

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

Q：Windows环境下启动失败怎么办？A：尝试执行npm run build编译TypeScript项目，或使用WSL环境运行。
Q：元素定位超时怎么办？A：页面可能有动态加载内容，增加等待时间或添加wait_for_selector步骤。
Q：如何清除浏览器登录状态？A：删除用户数据目录（如Windows：%USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile）。
Q：支持哪些浏览器？A：支持Chromium、Firefox和WebKit三大浏览器引擎。