推荐语

微软Playwright MCP服务器，AI模型与前端开发的新桥梁。

核心内容：
1. MCP：AI模型与数据源的新连接方式
2. Playwright MCP：浏览器自动化与LLM的交互
3. Playwright MCP的安装与配置指南

杨芳贤

53AI创始人/腾讯云(TVP)最具价值专家

大家好，很高兴又见面了，我是"前端技术进阶"

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)