ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-size: 18px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">大家好，很高兴又见面了，我是"前端技术进阶"ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial; ">1.什么是 MCPingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-size: 18px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">MCP（Model Context Protocol，简称 MCP）是将 AI 模型连接到数据源和工具的标准方式，其允许 AI 访问其最初训练范围之外的信息和功能，MCP 就像 AI 系统的通用连接器。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-size: 18px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">就像标准端口让不同的设备协同工作一样，MCP 让不同的 AI 模型连接到相同的工具和数据源。这意味着开发人员可以构建一次工具，并使其与任何支持 MCP 的 AI 模型一起工作，类似于 AI 应用程序的 USB-C 端口。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-size: 18px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">AI 模型擅长生成内容和推理，但受到训练数据的限制，而 MCP 通过在需要时让它们访问外部资源来解决此问题。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;letter-spacing: normal;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial; ">2.什么是 Playwright MCPingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-size: 18px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">Playwright MCP 是一种模型上下文协议服务器，其使用 Playwright 提供浏览器自动化功能。此服务器使 LLM 能够通过结构化的可访问性快照与网页进行交互，无需屏幕截图或视觉调整模型。ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-size: 18px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">Playwright MCP 主要特点包括：- 快速轻量：使用 Playwright 的可访问性树，而不是基于像素的输入
- LLM 友好：无需视觉模型，仅基于结构化数据运行。
- 确定性工具应用程序：避免基于屏幕截图的方法常见的歧义。
ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-size: 18px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">Playwright MCP 的典型用例包括：ingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;font-size: 18px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: normal;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;background-color: rgb(255, 255, 255);text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;">下面是典型的 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';
constserver = createServer({
launchOptions: {headless:true}
});
transport =newSSEServerTransport("/messages", res);
server.connect(transport)
|
