我的第一篇playwright博文，用它我成功制作了5款网页自动化的工具，包括网页微信的自动回复等，确实好用！

一、Playwright 是谁开发的？

微软（Microsoft） 开发，2020 年 1 月发布。核心团队来自原 Google Puppeteer 核心成员。底层用 TypeScript 编写，开源协议 Apache 2.0。

二、Playwright 是什么？

跨浏览器 Web 自动化 / 端到端测试框架。

• 统一 API 控制 Chromium、Firefox、WebKit 三大引擎
• 自动等待、网络拦截、多上下文隔离、设备模拟、录制生成代码
• 支持 无头 / 有头 运行，适合测试、爬虫、RPA
• 官方提供 多语言绑定：JS/TS、Python、Java、.NET

三、Playwright MCP 是什么？

Playwright MCP = Playwright + Model Context Protocol（MCP）

• MCP 是 Anthropic 开源的 AI 工具调用协议，让 LLM 标准化调用外部工具
• Playwright MCP 是微软推出的 MCP 服务器，把 Playwright 封装成 AI 可调用的浏览器自动化服务
• 核心：LLM 用 结构化可访问性快照（Accessibility Tree） 操作网页，不用截图 / 视觉模型
• 用途：让 AI（Claude、Copilot 等）用自然语言操控浏览器、做测试、爬取、生成报告

📌 MCP 生态项目链接清单（可直接访问）

项目名称	官方链接	简介
MCP.so	https://mcp.so/	全球最大的 MCP 服务器聚合平台，收录超 1.7 万个服务器，提供一站式发现与部署。
阿里云百炼 MCP	https://help.aliyun.com/zh/model-studio/mcp-introduction	提供全生命周期 MCP 服务，支持通义千问等模型快速接入第三方工具。
HiMCP	—	信息暂缺，推测为 MCP 相关工具或服务。
Smithery.ai	https://smithery.ai/	MCP 资源聚合与集成平台，提供 CLI 工具和托管服务，简化 MCP 部署。
shareMCP	https://mcp.so/server/ShareMCP/AmeSora2022	MCP 导航站点，按功能分类整理 MCP 工具、服务和文档。
MCP Market	—	信息暂缺，推测为 MCP 服务器市场或目录。
PulseMCP	https://www.pulsemcp.com/	MCP 生态资源中心，提供服务器目录、教程、周报，追踪生态动态。
Glama MCP	https://glama.ai/mcp	MCP 服务器托管与发现平台，支持一键部署和跨客户端兼容。
cursor.directory	https://cursor.directory/mcp	Cursor IDE 的 MCP 服务器目录，提供一键安装到编辑器的功能。
Portkey.ai MCP	https://portkey.ai/features/mcp	MCP 网关，集中管理认证、访问和可观测性，支持 1600+ LLM 接入。
Cline's MCP Marketplace	https://cline.bot/mcp-marketplace	Cline VS Code 扩展的 MCP 应用商店，支持一键安装和自动配置。
MCP Hub	https://github.com/hemangjoshi37a/mcphub	跨平台 GUI 工具，用于发现、安装和管理 MCP 服务器，类似包管理器。
MCPServers	https://mcpservers.org/	MCP 服务器目录，提供官方和社区服务器的详细信息与安装指南。
Awesome MCP Servers	https://github.com/mandalatech/awesome-mcp-servers	社区维护的精选 MCP 服务器列表，覆盖开发、数据、协作等场景。

---

方式一：

iFlow CLI 原生支持 MCP 协议，能直接接入 Playwright MCP 做浏览器自动化。

一、快速安装（iFlow 官方推荐）

# 安装 iFlow 官方维护的 Playwright MCP
iflow mcp add-json 'playwright' '{"command":"npx","args":["-y","@iflow-mcp/playwright-mcp"]}'

二、接入官方 @playwright/mcp（我之前用的）

iflow mcp add-json 'playwright' '{"command":"npx","args":["@playwright/mcp@latest"]}'

三、验证与使用

1. 重启 iFlow CLI
2. 用自然语言调用：

帮我打开 https://example.com，截图首页并检查是否有404

四、常见问题

• 提示浏览器未安装：

npx playwright install

• 查看已装 MCP：

iflow mcp list

• 删除重配：

iflow mcp remove playwright

方式二：

Anthropic Claude 官方提供的 MCP 工具集成指令：

claude mcp add playwright npx @playwright/mcp@latest

1. 先安装 Playwright MCP

npx @playwright/mcp@latest

2. 如果你是要在 Claude Desktop MCP 里配置

在你的 claude_desktop_config.json 里加上：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

3. 重启 Claude Desktop，就能用 Playwright 了

如果提示没装浏览器，再执行：

npx playwright install