最详细的playwright mcp 时序图

系统初始化阶段

1. 用户 首先启动主机应用程序（如Claude Desktop、VS Code或Cursor）并配置好Playwright MCP服务器。

2. 主机应用程序（MCP Host）随后创建一个 MCP Client（协议客户端）实例。

3. MCP Client 与 Playwright MCP Server（浏览器自动化服务器）建立连接（通过STDIO或SSE等方式）。

4. Playwright MCP Server 接收到连接后，启动一个浏览器实例（如Chromium、Firefox或WebKit）。

5. 浏览器 启动就绪后，向服务器返回确认信息。

6. 服务器接着向客户端返回连接建立成功的消息。

7. 最后，客户端通知主机应用程序，MCP服务器现已可用。至此，系统初始化完成。

工具发现阶段

1. 为了了解可用的功能，MCP Host 向 MCP Client 请求可用的工具列表。

2. MCP Client 向 Playwright MCP Server 发送 tools/list 请求。

3. Playwright MCP Server 返回一个工具清单，其中通常包含 browser_navigate（浏览器导航）、browser_click（点击元素）、browser_snapshot（获取页面快照）等一系列自动化工具。

4. MCP Client 将这份工具列表传递给 MCP Host。

5. MCP Host 将这些工具作为可用的功能上下文注册或提供给大语言模型（LLM）。LLM从而知晓它可以使用哪些工具来执行任务。

用户交互与任务执行阶段

1. 用户 向 MCP Host 提出一个具体的任务请求，例如“访问某个网站并截图”。

2. MCP Host 将这个用户请求连同之前注册的工具上下文信息一起转发给 大语言模型（LLM）。

3. LLM 理解任务后，生成一个分步骤的执行计划，决定需要调用哪些工具以及调用的顺序。

（基于LLM的计划，开始执行具体操作）

• 浏览器导航：

  1. MCP Host 根据LLM的计划，指示 MCP Client 调用 browser_navigate 工具。

  2. MCP Client 向 Playwright MCP Server 发送 tools/call 请求，调用 browser_navigate 功能，并传入参数（如 {"url": "https://example.com"}）。

  3. Playwright MCP Server 控制浏览器执行 page.goto("https://example.com") 操作。

  4. 浏览器 完成导航后，将结果返回给服务器。

  5. 服务器将导航结果和页面状态信息返回给客户端。

  6. 客户端将工具执行结果上报给主机。

  7. 主机将最新的执行状态更新给LLM，以便其进行下一步决策。

• 页面快照获取（用于分析）：

  1. LLM 可能需要分析页面结构来决定下一步操作，因此它会通过 MCP Host 请求获取页面快照。

  2. MCP Host 指示 MCP Client 调用 browser_snapshot 工具。

  3. MCP Client 向服务器发送 tools/call 请求来调用 browser_snapshot。

  4. Playwright MCP Server 命令浏览器获取页面的可访问性树或元素结构信息。

  5. 浏览器 将页面结构数据返回给服务器。

  6. 服务器将结构化的页面数据处理后返回给客户端。

  7. 客户端将数据传递给主机。

  8. 主机将这些关键的页面结构信息提供给LLM。

• 元素交互（如点击）：

  1. LLM 根据分析到的快照信息，生成具体的交互指令（例如“点击登录按钮”），并发送给 MCP Host。

  2. MCP Host 指示 MCP Client 调用 browser_click 工具。

  3. MCP Client 向服务器发送 tools/call 请求，调用 browser_click 并传入目标元素参数（如 {"element": "登录按钮", "ref": "button[data-id='login']"}）。

  4. Playwright MCP Server 控制浏览器定位到指定元素并执行点击操作。

  5. 浏览器 完成点击后，向服务器返回确认。

  6. 服务器将交互结果返回给客户端。

  7. 客户端将操作执行状态上报给主机。

  8. 主机再次将页面状态的变化更新给LLM。

• 屏幕截图：

  1. LLM 在任务需要时（或作为最终步骤），通过 MCP Host 请求进行页面截图。

  2. MCP Host 指示 MCP Client 调用 browser_take_screenshot 工具。

  3. MCP Client 向服务器发送 tools/call 请求来调用 browser_take_screenshot。

  4. Playwright MCP Server 命令浏览器对当前页面进行截图。

  5. 浏览器 将截取的图片数据返回给服务器。

  6. 服务器处理截图（如保存为文件），并将文件路径或图片数据返回给客户端。

  7. 客户端将截图结果传递给主机。

  8. 主机将截图信息提供给LLM。

结果返回阶段

1. 大语言模型（LLM） 在收到所有操作结果（包括截图）后，生成最终的任务总结和结果报告，并返回给 MCP Host。

2. MCP Host 将完整的结果（例如截图文件和对执行过程的说明）呈现给用户。

清理阶段（可选）

1. 当用户结束会话时，会通知 MCP Host。

2. MCP Host 向 MCP Client 发出关闭连接的请求。

3. MCP Client 与 Playwright MCP Server 断开连接。

4. Playwright MCP Server 收到断开信号后，控制浏览器实例关闭。

5. 浏览器 关闭后，向服务器返回确认。

6. 服务器通知客户端连接已完全关闭。

7. 客户端最终通知主机，所有资源都已清理完成。