Playwright MCP 的使用与调试技巧

news/2025/10/1 12:15:29/文章来源:https://www.cnblogs.com/xiondun/p/19122328

摘要

本文将详细介绍 Playwright MCP 的使用方法、常见问题及解决方案，特别针对中国开发者，尤其是 AI 应用开发者。文章通过实践案例、代码示例、架构图、流程图等多种形式，帮助读者快速掌握 Playwright MCP 的核心功能，并提供调试技巧和最佳实践建议。

正文

1. Playwright MCP 简介

Playwright MCP 是一个用于启动和管理 Playwright 浏览器实例的工具，支持多种语言和框架。它为开发者提供了一个强大的工具，用于自动化测试和开发。在 AI 应用开发中，Playwright MCP 可以用于数据抓取、网页自动化交互等场景。

1.1 安装 Playwright MCP

在开始之前，确保你已经安装了 Node.js 和 npm。安装 Playwright MCP 的命令如下：

npm install -g @playwright/mcp@latest
AI写代码bash1

1.2 启动 Playwright MCP

启动 Playwright MCP 并监听指定端口：

npx @playwright/mcp@latest --port 8931
AI写代码bash1

启动后，你会看到类似以下的输出：

Listening on http://localhost:8931
Put this in your client config:
{"mcpServers": {"playwright": {"url": "http://localhost:8931/mcp"}}
}
AI写代码123456789

2. Playwright MCP 的使用

Playwright MCP 提供了一个 HTTP API，可以通过客户端配置与之通信。以下是一个简单的 Python 示例，展示如何使用 Playwright MCP。

2.1 安装依赖

在 Python 项目中，你需要安装 requests 库来发送 HTTP 请求：

pip install requests
AI写代码bash1

2.2 基础示例代码

以下是一个简单的 Python 脚本，展示如何与 Playwright MCP 通信：

import requests
import jsondef connect_to_playwright_mcp(mcp_url="http://localhost:8931/mcp"):"""连接到 Playwright MCP 服务器:param mcp_url: MCP 服务器地址:return: 服务器响应"""try:# 发送请求到 MCP 服务器response = requests.get(mcp_url, timeout=10)# 检查响应状态if response.status_code == 200:print("✅ 成功连接到 Playwright MCP 服务器")return response.json()else:print(f"❌ 连接失败，状态码: {response.status_code}")return Noneexcept requests.exceptions.RequestException as e:print(f"💥 连接过程中发生异常: {e}")return None# 使用示例
if __name__ == "__main__":mcp_response = connect_to_playwright_mcp()if mcp_response:print("服务器响应:")print(json.dumps(mcp_response, indent=2, ensure_ascii=False))
AI写代码python运行12345678910111213141516171819202122232425262728293031

2.3 高级使用示例

以下是一个更复杂的示例，展示如何使用 Playwright MCP 进行网页操作：

import requests
import json
import timeclass PlaywrightMCPClient:"""Playwright MCP 客户端类"""def __init__(self, base_url="http://localhost:8931"):"""初始化客户端:param base_url: MCP 服务器基础URL"""self.base_url = base_urlself.mcp_url = f"{base_url}/mcp"self.session = requests.Session()def get_server_info(self):"""获取服务器信息"""try:response = self.session.get(self.mcp_url, timeout=10)if response.status_code == 200:return response.json()else:print(f"获取服务器信息失败，状态码: {response.status_code}")return Noneexcept Exception as e:print(f"获取服务器信息时发生异常: {e}")return Nonedef navigate_to_page(self, url):"""导航到指定页面:param url: 目标URL"""try:# 这里简化了实际的MCP调用方式，实际使用中需要按照MCP协议进行print(f"正在导航到: {url}")# 模拟页面加载时间time.sleep(2)print("页面加载完成")return Trueexcept Exception as e:print(f"导航到页面时发生错误: {e}")return False# 使用示例
if __name__ == "__main__":# 创建客户端实例client = PlaywrightMCPClient()# 获取服务器信息server_info = client.get_server_info()if server_info:print("服务器信息:")print(json.dumps(server_info, indent=2, ensure_ascii=False))# 导航到示例页面client.navigate_to_page("https://example.com")
AI写代码python运行1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162

3. 调试技巧

在使用 Playwright MCP 时，可能会遇到一些问题。以下是一些调试技巧和常见问题的解决方案。

3.1 常见错误及解决方案

错误 1：TypeError: Cannot read properties of undefined (reading 'dispose')

原因：this._context 未定义，可能是因为上下文未正确初始化或已被销毁。
解决方案：在代码中添加检查，避免调用未定义的 dispose 方法。修改 browserServerBackend.js 文件：

if (this._context) {void this._context.dispose().catch(logUnhandledError);
}
AI写代码javascript运行123

错误 2：Cannot find module 'esm'

原因：未安装 esm 模块。
解决方案：安装 esm 模块：

npm install -g esm
AI写代码bash1

3.2 调试模式

如果需要调试 Playwright MCP，可以使用 Node.js 的调试模式：

node --inspect $(which npx) @playwright/mcp@latest --port 8931
AI写代码bash1

然后在浏览器中打开 chrome://inspect，连接到调试器并查看详细信息。

3.3 日志级别调整

为了更好地调试问题，可以调整日志级别：

# 设置详细日志级别
DEBUG=* npx @playwright/mcp@latest --port 8931# 或者只显示 Playwright 相关日志
DEBUG=playwright* npx @playwright/mcp@latest --port 8931
AI写代码bash12345

4. 实践案例

以下是一个实际应用场景，展示如何使用 Playwright MCP 进行自动化测试。

4.1 场景描述

假设你正在开发一个 AI 应用，需要自动化测试其前端界面。你可以使用 Playwright MCP 来启动浏览器实例，并通过 Python 脚本与之通信。

4.2 AI应用数据抓取示例

import requests
import json
import time
from typing import Optional, Dict, Listclass AIDataCollector:"""AI应用数据收集器 - 使用Playwright MCP"""def __init__(self, mcp_url: str = "http://localhost:8931/mcp"):"""初始化数据收集器:param mcp_url: Playwright MCP 服务器地址"""self.mcp_url = mcp_urlself.session = requests.Session()def collect_news_data(self, keywords: List[str]) -> Optional[List[Dict]]:"""收集新闻数据用于AI训练:param keywords: 关键词列表:return: 收集到的数据列表"""collected_data = []try:for keyword in keywords:print(f"正在收集关键词 '{keyword}' 的相关新闻...")# 模拟使用Playwright MCP访问新闻网站news_items = self._scrape_news_by_keyword(keyword)collected_data.extend(news_items)# 避免请求过于频繁time.sleep(1)print(f"✅ 数据收集完成，共收集到 {len(collected_data)} 条数据")return collected_dataexcept Exception as e:print(f"💥 数据收集过程中发生错误: {e}")return Nonedef _scrape_news_by_keyword(self, keyword: str) -> List[Dict]:"""根据关键词抓取新闻:param keyword: 搜索关键词:return: 新闻条目列表"""# 这里模拟实际的网页抓取过程# 在实际应用中，这里会通过Playwright MCP进行真实的网页操作mock_news = [{"title": f"关于 {keyword} 的最新进展","summary": f"这是关于 {keyword} 的一篇示例文章摘要...","url": f"https://example.com/news/{keyword}-latest","timestamp": time.time()},{"title": f"{keyword} 技术发展趋势分析","summary": f"对 {keyword} 技术发展趋势的深入分析...","url": f"https://example.com/news/{keyword}-trends","timestamp": time.time()}]print(f"  收集到 {len(mock_news)} 条相关新闻")return mock_newsdef save_data_to_file(self, data: List[Dict], filename: str = "ai_training_data.json"):"""将收集到的数据保存到文件:param data: 要保存的数据:param filename: 文件名"""try:with open(filename, 'w', encoding='utf-8') as f:json.dump(data, f, ensure_ascii=False, indent=2)print(f"✅ 数据已保存到 {filename}")except Exception as e:print(f"💥 保存数据时发生错误: {e}")# 使用示例
if __name__ == "__main__":# 创建数据收集器实例collector = AIDataCollector()# 定义要收集数据的关键词keywords = ["人工智能", "机器学习", "深度学习"]# 收集数据news_data = collector.collect_news_data(keywords)# 保存数据if news_data:collector.save_data_to_file(news_data, "ai_news_data.json")
AI写代码python运行12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697

4.3 实现步骤

安装 Playwright MCP：

npm install -g @playwright/mcp@latest
AI写代码bash1

启动 Playwright MCP：

npx @playwright/mcp@latest --port 8931
AI写代码bash1

编写 Python 测试脚本：

import requests
import json# Playwright MCP 的 URL
mcp_url = "http://localhost:8931/mcp"# 发送请求
response = requests.get(mcp_url)# 打印响应
print(response.json())
AI写代码python运行1234567891011

5. 注意事项

安全性：确保不要将调试端口暴露在公共网络上。
版本兼容性：确保使用的 Playwright 和 Node.js 版本兼容。
代码检查：在代码中添加必要的检查，避免调用未定义的属性。
资源管理：及时关闭浏览器实例，避免资源泄露。

6. 最佳实践

更新版本：定期更新 Playwright 和其依赖项。
联系社区：遇到问题时，及时联系 Playwright 社区寻求帮助。
调试模式：使用调试模式可以帮助你快速定位问题。
异常处理：在代码中添加完善的异常处理机制。
日志记录：记录关键操作的日志，便于问题排查。

6.1 健壮的MCP客户端实现

import requests
import json
import logging
from typing import Optional, Dict, Any
from requests.adapters import HTTPAdapter
from urllib3.util.retry import Retry# 配置日志
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)class RobustMCPClient:"""健壮的Playwright MCP客户端"""def __init__(self, base_url: str = "http://localhost:8931", timeout: int = 30):"""初始化客户端:param base_url: MCP服务器基础URL:param timeout: 请求超时时间（秒）"""self.base_url = base_urlself.mcp_url = f"{base_url}/mcp"self.timeout = timeout# 配置会话和重试策略self.session = requests.Session()retry_strategy = Retry(total=3,backoff_factor=1,status_forcelist=[429, 500, 502, 503, 504],)adapter = HTTPAdapter(max_retries=retry_strategy)self.session.mount("http://", adapter)self.session.mount("https://", adapter)def connect(self) -> Optional[Dict[Any, Any]]:"""连接到MCP服务器:return: 服务器响应或None"""try:logger.info(f"正在连接到MCP服务器: {self.mcp_url}")response = self.session.get(self.mcp_url, timeout=self.timeout)if response.status_code == 200:data = response.json()logger.info("✅ 成功连接到MCP服务器")return dataelse:logger.error(f"❌ 连接失败，状态码: {response.status_code}")return Noneexcept requests.exceptions.Timeout:logger.error("⏰ 连接超时")return Noneexcept requests.exceptions.ConnectionError:logger.error("🔌 连接错误，请检查MCP服务器是否正在运行")return Noneexcept Exception as e:logger.error(f"💥 连接过程中发生未知错误: {e}")return Nonedef close(self):"""关闭客户端连接"""self.session.close()logger.info("已关闭MCP客户端连接")# 使用示例
if __name__ == "__main__":client = RobustMCPClient()try:server_info = client.connect()if server_info:print(json.dumps(server_info, indent=2, ensure_ascii=False))finally:client.close()
AI写代码python运行1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283

7. 常见问题

Q1: 如何解决 TypeError: Cannot read properties of undefined (reading 'dispose') 错误？
- A1: 在代码中添加检查，避免调用未定义的 dispose 方法。
Q2: 如何解决 Cannot find module 'esm' 错误？
- A2: 安装 esm 模块：
```
npm install -g esm
AI写代码bash1
```
Q3: Playwright MCP 启动后无法访问怎么办？
- A3: 检查端口是否被占用，防火墙设置，以及是否正确指定了监听地址。
Q4: 如何在后台运行 Playwright MCP？
- A4: 可以使用 nohup、screen 或 systemd 等方式在后台运行。