大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

1.什么是 MCP

MCP（Model Context Protocol，简称 MCP）是将 AI 模型连接到数据源和工具的标准方式，其允许 AI 访问其最初训练范围之外的信息和功能，MCP 就像 AI 系统的通用连接器。

就像标准端口让不同的设备协同工作一样，MCP 让不同的 AI 模型连接到相同的工具和数据源。这意味着开发人员可以构建一次工具，并使其与任何支持 MCP 的 AI 模型一起工作，类似于 AI 应用程序的 USB-C 端口。

AI 模型擅长生成内容和推理，但受到训练数据的限制，而 MCP 通过在需要时让它们访问外部资源来解决此问题。

2.什么是 Playwright MCP

Playwright MCP 是一种模型上下文协议服务器，其使用 Playwright 提供浏览器自动化功能。此服务器使 LLM 能够通过结构化的可访问性快照与网页进行交互，无需屏幕截图或视觉调整模型。

Playwright MCP 主要特点包括：

快速轻量：使用 Playwright 的可访问性树，而不是基于像素的输入
LLM 友好：无需视觉模型，仅基于结构化数据运行。
确定性工具应用程序：避免基于屏幕截图的方法常见的歧义。

Playwright MCP 的典型用例包括：

Web 导航和表单填写
从结构化内容中提取数据
由 LLM 驱动的自动测试
代理的通用浏览器交互

下面是典型的 Playwright MCP 的配置示例：

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

目前 Playwright MCP 在 Github 通过 Apache-2.0 协议开源，有超过 6k 的 star，NPM 周下载量 16k+，是一个值得关注的前端优质开源项目。

3.如何安装 Playwright MCP

开发者可以使用 VS Code CLI 安装 Playwright MCP 服务器：

// For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
// For VS Code Insiders
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

安装后，Playwright MCP 服务器将可与 VS Code 中的 GitHub Copilot 代理一起使用。Playwright MCP 将推出采用新配置文件的 Chrome 浏览器，位于以下位置：

- `%USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile` on Windows
- `~/Library/Caches/ms-playwright/mcp-chrome-profile` on macOS
- `~/.cache/ms-playwright/mcp-chrome-profile` on Linux

所有登录信息都将存储在该配置文件中，如果想清除离线状态，可以在会话之间将其删除。

同时 Playwright MCP 也支持在无头浏览器环境中使用，例如：

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

最后，开发者如果有需求，甚至可以通过编程方式接入：

import {createServer} from '@playwright/mcp';
const server = createServer({
  launchOptions: {headless: true}
});
transport = new SSEServerTransport("/messages", res);
server.connect(transport);

参考资料

https://github.com/microsoft/playwright-mcp

https://www.npmjs.com/package/@playwright/mcp

https://github.com/hyperdrive-eng/mcp-nodejs-debugger

https://blog.replit.com/everything-you-need-to-know-about-mcp

http://ai.gopubby.com/build-an-ai-app-that-can-browse-the-internet-using-microsofts-playwright-mcp-server-semantic-d7b41de1dcb9

https://www.youtube.com/watch?v=jkRzlCCRKFI

思凡资源网

微软最新 Playwright MCP 服务器强势来袭?

1.什么是 MCP

2.什么是 Playwright MCP

3.如何安装 Playwright MCP

参考资料