链载Ai

标题: 微软最新 Playwright MCP 服务器强势来袭？ [打印本页]

作者: 链载Ai 时间: 2 小时前
标题: 微软最新 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;">大家好，很高兴又见面了，我是"前端技术进阶"

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

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

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

{
"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)

欢迎光临链载Ai (https://www.lianzai.com/)