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

Playwright MCP 的使用与调试技巧

摘要

本文将详细介绍 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 实现步骤
  1. 安装 Playwright MCP
npm install -g @playwright/mcp@latest
AI写代码bash1
  1. 启动 Playwright MCP
npx @playwright/mcp@latest --port 8931
AI写代码bash1
  1. 编写 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: 可以使用 nohupscreensystemd 等方式在后台运行。

8. 扩展阅读

  • Playwright 官方文档
  • Node.js 官方文档
  • Python 官方文档

总结

本文详细介绍了 Playwright MCP 的使用方法、调试技巧和最佳实践。通过实践案例和代码示例,帮助读者快速掌握 Playwright MCP 的核心功能。希望这些内容能为你的开发工作提供帮助。

在使用 Playwright MCP 时,需要注意以下关键点:

  1. 正确安装和配置:确保 Node.js 环境正确安装,并按照官方文档安装 Playwright MCP。

  2. 异常处理:在实际应用中,要添加完善的异常处理机制,确保程序的稳定性。

  3. 调试技巧:学会使用日志和调试模式来排查问题。

  4. 安全考虑:不要将调试端口暴露在公网环境中。

  5. 版本管理:定期更新 Playwright MCP 到最新版本,以获得最新的功能和安全修复。

通过遵循这些最佳实践,开发者可以更好地利用 Playwright MCP 来构建强大的自动化测试和数据抓取应用,特别是在 AI 应用开发领域。

参考资料

  • Playwright 官方文档
  • Node.js 官方文档
  • Python 官方文档

图表展示

架构图

mermaid-svg-uRp44ZabDA2w31jv {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-uRp44ZabDA2w31jv .error-icon{fill:#552222;}#mermaid-svg-uRp44ZabDA2w31jv .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-uRp44ZabDA2w31jv .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-uRp44ZabDA2w31jv .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-uRp44ZabDA2w31jv .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-uRp44ZabDA2w31jv .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-uRp44ZabDA2w31jv .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-uRp44ZabDA2w31jv .marker{fill:#333333;stroke:#333333;}#mermaid-svg-uRp44ZabDA2w31jv .marker.cross{stroke:#333333;}#mermaid-svg-uRp44ZabDA2w31jv svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-uRp44ZabDA2w31jv .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-uRp44ZabDA2w31jv .cluster-label text{fill:#333;}#mermaid-svg-uRp44ZabDA2w31jv .cluster-label span{color:#333;}#mermaid-svg-uRp44ZabDA2w31jv .label text,#mermaid-svg-uRp44ZabDA2w31jv span{fill:#333;color:#333;}#mermaid-svg-uRp44ZabDA2w31jv .node rect,#mermaid-svg-uRp44ZabDA2w31jv .node circle,#mermaid-svg-uRp44ZabDA2w31jv .node ellipse,#mermaid-svg-uRp44ZabDA2w31jv .node polygon,#mermaid-svg-uRp44ZabDA2w31jv .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-uRp44ZabDA2w31jv .node .label{text-align:center;}#mermaid-svg-uRp44ZabDA2w31jv .node.clickable{cursor:pointer;}#mermaid-svg-uRp44ZabDA2w31jv .arrowheadPath{fill:#333333;}#mermaid-svg-uRp44ZabDA2w31jv .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-uRp44ZabDA2w31jv .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-uRp44ZabDA2w31jv .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-uRp44ZabDA2w31jv .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-uRp44ZabDA2w31jv .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-uRp44ZabDA2w31jv .cluster text{fill:#333;}#mermaid-svg-uRp44ZabDA2w31jv .cluster span{color:#333;}#mermaid-svg-uRp44ZabDA2w31jv div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-uRp44ZabDA2w31jv :root

Playwright MCP

HTTP Server

Client Config

Browser Instances

Playwright API

流程图

mermaid-svg-WaxeFYwyoLJ2qOwG {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WaxeFYwyoLJ2qOwG .error-icon{fill:#552222;}#mermaid-svg-WaxeFYwyoLJ2qOwG .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WaxeFYwyoLJ2qOwG .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-WaxeFYwyoLJ2qOwG .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WaxeFYwyoLJ2qOwG .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WaxeFYwyoLJ2qOwG .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WaxeFYwyoLJ2qOwG .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WaxeFYwyoLJ2qOwG .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WaxeFYwyoLJ2qOwG .marker.cross{stroke:#333333;}#mermaid-svg-WaxeFYwyoLJ2qOwG svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WaxeFYwyoLJ2qOwG .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-WaxeFYwyoLJ2qOwG .cluster-label text{fill:#333;}#mermaid-svg-WaxeFYwyoLJ2qOwG .cluster-label span{color:#333;}#mermaid-svg-WaxeFYwyoLJ2qOwG .label text,#mermaid-svg-WaxeFYwyoLJ2qOwG span{fill:#333;color:#333;}#mermaid-svg-WaxeFYwyoLJ2qOwG .node rect,#mermaid-svg-WaxeFYwyoLJ2qOwG .node circle,#mermaid-svg-WaxeFYwyoLJ2qOwG .node ellipse,#mermaid-svg-WaxeFYwyoLJ2qOwG .node polygon,#mermaid-svg-WaxeFYwyoLJ2qOwG .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WaxeFYwyoLJ2qOwG .node .label{text-align:center;}#mermaid-svg-WaxeFYwyoLJ2qOwG .node.clickable{cursor:pointer;}#mermaid-svg-WaxeFYwyoLJ2qOwG .arrowheadPath{fill:#333333;}#mermaid-svg-WaxeFYwyoLJ2qOwG .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-WaxeFYwyoLJ2qOwG .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-WaxeFYwyoLJ2qOwG .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-WaxeFYwyoLJ2qOwG .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-WaxeFYwyoLJ2qOwG .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-WaxeFYwyoLJ2qOwG .cluster text{fill:#333;}#mermaid-svg-WaxeFYwyoLJ2qOwG .cluster span{color:#333;}#mermaid-svg-WaxeFYwyoLJ2qOwG div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-WaxeFYwyoLJ2qOwG :root

启动 Playwright MCP

监听端口

客户端配置

发送请求

处理请求

返回响应

思维导图

mermaid-svg-Z7XkSk7KkDWgtIec {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Z7XkSk7KkDWgtIec .error-icon{fill:#552222;}#mermaid-svg-Z7XkSk7KkDWgtIec .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Z7XkSk7KkDWgtIec .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-Z7XkSk7KkDWgtIec .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Z7XkSk7KkDWgtIec .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Z7XkSk7KkDWgtIec .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Z7XkSk7KkDWgtIec .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Z7XkSk7KkDWgtIec .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Z7XkSk7KkDWgtIec .marker.cross{stroke:#333333;}#mermaid-svg-Z7XkSk7KkDWgtIec svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Z7XkSk7KkDWgtIec .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-Z7XkSk7KkDWgtIec .cluster-label text{fill:#333;}#mermaid-svg-Z7XkSk7KkDWgtIec .cluster-label span{color:#333;}#mermaid-svg-Z7XkSk7KkDWgtIec .label text,#mermaid-svg-Z7XkSk7KkDWgtIec span{fill:#333;color:#333;}#mermaid-svg-Z7XkSk7KkDWgtIec .node rect,#mermaid-svg-Z7XkSk7KkDWgtIec .node circle,#mermaid-svg-Z7XkSk7KkDWgtIec .node ellipse,#mermaid-svg-Z7XkSk7KkDWgtIec .node polygon,#mermaid-svg-Z7XkSk7KkDWgtIec .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Z7XkSk7KkDWgtIec .node .label{text-align:center;}#mermaid-svg-Z7XkSk7KkDWgtIec .node.clickable{cursor:pointer;}#mermaid-svg-Z7XkSk7KkDWgtIec .arrowheadPath{fill:#333333;}#mermaid-svg-Z7XkSk7KkDWgtIec .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Z7XkSk7KkDWgtIec .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Z7XkSk7KkDWgtIec .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-Z7XkSk7KkDWgtIec .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-Z7XkSk7KkDWgtIec .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Z7XkSk7KkDWgtIec .cluster text{fill:#333;}#mermaid-svg-Z7XkSk7KkDWgtIec .cluster span{color:#333;}#mermaid-svg-Z7XkSk7KkDWgtIec div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Z7XkSk7KkDWgtIec :root

Playwright MCP

安装与启动

使用方法

调试技巧

常见问题

最佳实践

安装 Playwright MCP

启动 Playwright MCP

客户端配置

发送请求

常见错误

调试模式

TypeError: Cannot read properties of undefined

Cannot find module esm

代码检查

更新版本

联系社区

甘特图

mermaid-svg-1E1K0xmRU09ZHqq6 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-1E1K0xmRU09ZHqq6 .error-icon{fill:#552222;}#mermaid-svg-1E1K0xmRU09ZHqq6 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-1E1K0xmRU09ZHqq6 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-1E1K0xmRU09ZHqq6 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-1E1K0xmRU09ZHqq6 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-1E1K0xmRU09ZHqq6 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-1E1K0xmRU09ZHqq6 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-1E1K0xmRU09ZHqq6 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-1E1K0xmRU09ZHqq6 .marker.cross{stroke:#333333;}#mermaid-svg-1E1K0xmRU09ZHqq6 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-1E1K0xmRU09ZHqq6 .mermaid-main-font{font-family:"trebuchet ms",verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-1E1K0xmRU09ZHqq6 .exclude-range{fill:#eeeeee;}#mermaid-svg-1E1K0xmRU09ZHqq6 .section{stroke:none;opacity:0.2;}#mermaid-svg-1E1K0xmRU09ZHqq6 .section0{fill:rgba(102, 102, 255, 0.49);}#mermaid-svg-1E1K0xmRU09ZHqq6 .section2{fill:#fff400;}#mermaid-svg-1E1K0xmRU09ZHqq6 .section1,#mermaid-svg-1E1K0xmRU09ZHqq6 .section3{fill:white;opacity:0.2;}#mermaid-svg-1E1K0xmRU09ZHqq6 .sectionTitle0{fill:#333;}#mermaid-svg-1E1K0xmRU09ZHqq6 .sectionTitle1{fill:#333;}#mermaid-svg-1E1K0xmRU09ZHqq6 .sectionTitle2{fill:#333;}#mermaid-svg-1E1K0xmRU09ZHqq6 .sectionTitle3{fill:#333;}#mermaid-svg-1E1K0xmRU09ZHqq6 .sectionTitle{text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-1E1K0xmRU09ZHqq6 .grid .tick{stroke:lightgrey;opacity:0.8;shape-rendering:crispEdges;}#mermaid-svg-1E1K0xmRU09ZHqq6 .grid .tick text{font-family:"trebuchet ms",verdana,arial,sans-serif;fill:#333;}#mermaid-svg-1E1K0xmRU09ZHqq6 .grid path{stroke-width:0;}#mermaid-svg-1E1K0xmRU09ZHqq6 .today{fill:none;stroke:red;stroke-width:2px;}#mermaid-svg-1E1K0xmRU09ZHqq6 .task{stroke-width:2;}#mermaid-svg-1E1K0xmRU09ZHqq6 .taskText{text-anchor:middle;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-1E1K0xmRU09ZHqq6 .taskTextOutsideRight{fill:black;text-anchor:start;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-1E1K0xmRU09ZHqq6 .taskTextOutsideLeft{fill:black;text-anchor:end;}#mermaid-svg-1E1K0xmRU09ZHqq6 .task.clickable{cursor:pointer;}#mermaid-svg-1E1K0xmRU09ZHqq6 .taskText.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-1E1K0xmRU09ZHqq6 .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-1E1K0xmRU09ZHqq6 .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163!important;font-weight:bold;}#mermaid-svg-1E1K0xmRU09ZHqq6 .taskText0,#mermaid-svg-1E1K0xmRU09ZHqq6 .taskText1,#mermaid-svg-1E1K0xmRU09ZHqq6 .taskText2,#mermaid-svg-1E1K0xmRU09ZHqq6 .taskText3{fill:white;}#mermaid-svg-1E1K0xmRU09ZHqq6 .task0,#mermaid-svg-1E1K0xmRU09ZHqq6 .task1,#mermaid-svg-1E1K0xmRU09ZHqq6 .task2,#mermaid-svg-1E1K0xmRU09ZHqq6 .task3{fill:#8a90dd;stroke:#534fbc;}#mermaid-svg-1E1K0xmRU09ZHqq6 .taskTextOutside0,#mermaid-svg-1E1K0xmRU09ZHqq6 .taskTextOutside2{fill:black;}#mermaid-svg-1E1K0xmRU09ZHqq6 .taskTextOutside1,#mermaid-svg-1E1K0xmRU09ZHqq6 .taskTextOutside3{fill:black;}#mermaid-svg-1E1K0xmRU09ZHqq6 .active0,#mermaid-svg-1E1K0xmRU09ZHqq6 .active1,#mermaid-svg-1E1K0xmRU09ZHqq6 .active2,#mermaid-svg-1E1K0xmRU09ZHqq6 .active3{fill:#bfc7ff;stroke:#534fbc;}#mermaid-svg-1E1K0xmRU09ZHqq6 .activeText0,#mermaid-svg-1E1K0xmRU09ZHqq6 .activeText1,#mermaid-svg-1E1K0xmRU09ZHqq6 .activeText2,#mermaid-svg-1E1K0xmRU09ZHqq6 .activeText3{fill:black!important;}#mermaid-svg-1E1K0xmRU09ZHqq6 .done0,#mermaid-svg-1E1K0xmRU09ZHqq6 .done1,#mermaid-svg-1E1K0xmRU09ZHqq6 .done2,#mermaid-svg-1E1K0xmRU09ZHqq6 .done3{stroke:grey;fill:lightgrey;stroke-width:2;}#mermaid-svg-1E1K0xmRU09ZHqq6 .doneText0,#mermaid-svg-1E1K0xmRU09ZHqq6 .doneText1,#mermaid-svg-1E1K0xmRU09ZHqq6 .doneText2,#mermaid-svg-1E1K0xmRU09ZHqq6 .doneText3{fill:black!important;}#mermaid-svg-1E1K0xmRU09ZHqq6 .crit0,#mermaid-svg-1E1K0xmRU09ZHqq6 .crit1,#mermaid-svg-1E1K0xmRU09ZHqq6 .crit2,#mermaid-svg-1E1K0xmRU09ZHqq6 .crit3{stroke:#ff8888;fill:red;stroke-width:2;}#mermaid-svg-1E1K0xmRU09ZHqq6 .activeCrit0,#mermaid-svg-1E1K0xmRU09ZHqq6 .activeCrit1,#mermaid-svg-1E1K0xmRU09ZHqq6 .activeCrit2,#mermaid-svg-1E1K0xmRU09ZHqq6 .activeCrit3{stroke:#ff8888;fill:#bfc7ff;stroke-width:2;}#mermaid-svg-1E1K0xmRU09ZHqq6 .doneCrit0,#mermaid-svg-1E1K0xmRU09ZHqq6 .doneCrit1,#mermaid-svg-1E1K0xmRU09ZHqq6 .doneCrit2,#mermaid-svg-1E1K0xmRU09ZHqq6 .doneCrit3{stroke:#ff8888;fill:lightgrey;stroke-width:2;cursor:pointer;shape-rendering:crispEdges;}#mermaid-svg-1E1K0xmRU09ZHqq6 .milestone{transform:rotate(45deg) scale(0.8,0.8);}#mermaid-svg-1E1K0xmRU09ZHqq6 .milestoneText{font-style:italic;}#mermaid-svg-1E1K0xmRU09ZHqq6 .doneCritText0,#mermaid-svg-1E1K0xmRU09ZHqq6 .doneCritText1,#mermaid-svg-1E1K0xmRU09ZHqq6 .doneCritText2,#mermaid-svg-1E1K0xmRU09ZHqq6 .doneCritText3{fill:black!important;}#mermaid-svg-1E1K0xmRU09ZHqq6 .activeCritText0,#mermaid-svg-1E1K0xmRU09ZHqq6 .activeCritText1,#mermaid-svg-1E1K0xmRU09ZHqq6 .activeCritText2,#mermaid-svg-1E1K0xmRU09ZHqq6 .activeCritText3{fill:black!important;}#mermaid-svg-1E1K0xmRU09ZHqq6 .titleText{text-anchor:middle;font-size:18px;fill:#333;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#mermaid-svg-1E1K0xmRU09ZHqq6 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 2023-01-01 2023-01-08 2023-01-15 2023-01-22 2023-01-29 2023-02-05 安装 Playwright MCP 启动 Playwright MCP 客户端配置 发送请求 常见错误 调试模式 代码检查 更新版本 联系社区 安装与启动 使用方法 调试技巧 最佳实践 Playwright MCP 实施计划

饼图

在这里插入图片描述

时序图

mermaid-svg-L5uSiVq1Ttn9PY2K {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-L5uSiVq1Ttn9PY2K .error-icon{fill:#552222;}#mermaid-svg-L5uSiVq1Ttn9PY2K .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-L5uSiVq1Ttn9PY2K .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-L5uSiVq1Ttn9PY2K .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-L5uSiVq1Ttn9PY2K .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-L5uSiVq1Ttn9PY2K .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-L5uSiVq1Ttn9PY2K .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-L5uSiVq1Ttn9PY2K .marker{fill:#333333;stroke:#333333;}#mermaid-svg-L5uSiVq1Ttn9PY2K .marker.cross{stroke:#333333;}#mermaid-svg-L5uSiVq1Ttn9PY2K svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-L5uSiVq1Ttn9PY2K .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-L5uSiVq1Ttn9PY2K text.actor>tspan{fill:black;stroke:none;}#mermaid-svg-L5uSiVq1Ttn9PY2K .actor-line{stroke:grey;}#mermaid-svg-L5uSiVq1Ttn9PY2K .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-L5uSiVq1Ttn9PY2K .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-L5uSiVq1Ttn9PY2K #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-L5uSiVq1Ttn9PY2K .sequenceNumber{fill:white;}#mermaid-svg-L5uSiVq1Ttn9PY2K #sequencenumber{fill:#333;}#mermaid-svg-L5uSiVq1Ttn9PY2K #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-L5uSiVq1Ttn9PY2K .messageText{fill:#333;stroke:#333;}#mermaid-svg-L5uSiVq1Ttn9PY2K .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-L5uSiVq1Ttn9PY2K .labelText,#mermaid-svg-L5uSiVq1Ttn9PY2K .labelText>tspan{fill:black;stroke:none;}#mermaid-svg-L5uSiVq1Ttn9PY2K .loopText,#mermaid-svg-L5uSiVq1Ttn9PY2K .loopText>tspan{fill:black;stroke:none;}#mermaid-svg-L5uSiVq1Ttn9PY2K .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-L5uSiVq1Ttn9PY2K .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-L5uSiVq1Ttn9PY2K .noteText,#mermaid-svg-L5uSiVq1Ttn9PY2K .noteText>tspan{fill:black;stroke:none;}#mermaid-svg-L5uSiVq1Ttn9PY2K .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-L5uSiVq1Ttn9PY2K .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-L5uSiVq1Ttn9PY2K .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-L5uSiVq1Ttn9PY2K .actorPopupMenu{position:absolute;}#mermaid-svg-L5uSiVq1Ttn9PY2K .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));}#mermaid-svg-L5uSiVq1Ttn9PY2K .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-L5uSiVq1Ttn9PY2K .actor-man circle,#mermaid-svg-L5uSiVq1Ttn9PY2K line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-L5uSiVq1Ttn9PY2K :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 开发者 MCP客户端 PlaywrightMCP 浏览器 初始化客户端 发送连接请求 返回服务器信息 显示连接结果 发送操作指令 转发操作请求 控制浏览器执行操作 返回操作结果 返回结果 显示操作结果 开发者 MCP客户端 PlaywrightMCP 浏览器

http://www.hskmm.com/?act=detail&tid=22142

相关文章:

  • 实用指南:零基础学AI大模型之LangChain-PromptTemplate
  • 文件上传攻击全面指南:从侦察到防御
  • 2025年陕西洋房楼盘,西安城西品质楼盘,沣东品牌楼盘住宅口碑推荐,地建嘉信臻境户型多元布局,满足全周期生活需求
  • asus nuc15 pro ultra7 255H 外接 fevm 雷电5显卡坞 BIOS设置
  • P11529 [THUPC 2025 初赛] 辞甲猾扎
  • 2025年陕西品牌楼盘,西安城西优质楼盘,西咸新区核心楼盘住宅口碑推荐,地建嘉信臻境距吾悦广场一路之隔,商业配套完善
  • ARC113E Rvom and Rsrev
  • 2025年西咸新区高端楼盘,西安刚需楼盘,沣东改善楼盘住宅口碑推荐,地建嘉信臻境3分钟通达高新,区位优势明显
  • P12704 Retribution
  • Sunny Pro 网络验证- 仅需一键,即可为您的exe添加高强度防破加密!
  • 一条mysql数据库更新语句
  • 浅谈递归入门(1) - 指南
  • python+uniapp基于微信小工具的医院陪诊预约系统
  • [深度学习] 大模型学习5-高效微调框架Unsloth使用指北
  • 【APK安全】组件安全核心风险与防御指南 - 详解
  • 前端-JavaScript简介JavaScript模块化 - 努力-
  • 基本地址变换机构
  • 2025工业网线厂家权威推荐榜:千兆/拖链/高柔/网线/六类/超五类/6类/超5类/千兆/超六类/8芯/4芯/成品/相机/视觉数据工业网线高强屏蔽与稳定传输实力之选
  • gitee 使用安装教程
  • VisualMimic——基于视觉的人形行走-操作控制:低层策略负责平衡控制且跟踪高层下发的指令、高层策略则基于自我中心视觉输入生成任务跟踪指令 - 实践
  • 基本分页存储管理的基本概念
  • luogu P6503 [COCI 2010/2011 #3] DIFERENCIJA
  • 详细介绍:自动化接口框架搭建分享-pytest第三部分
  • Solon Plugin 自动装配机制详解
  • 2025宅基地纠纷律所权威推荐榜:专业调解与胜诉保障实力之选
  • 2025上海骨灰盒哪里买优质厂家权威推荐榜:匠心工艺与品质服务之选
  • 实用指南:华为 HCIA-Datacom 备考:VRP 通用路由平台原理-实操
  • Voice Agent Camp 结营!完整项目名单公布丨超音速计划 2025
  • 2025上海寿衣哪里买权威推荐:优质供货商与暖心服务之选
  • AI 真能胜任专业工程师的工作吗?