win11+vscode配置playwright-mcp-server

fiskeryang

已于 2025-04-03 11:29:52 修改

阅读量1.8k

点赞数 5

文章标签：测试工具

于 2025-04-02 16:37:22 首次发布

本文链接：https://blog.csdn.net/fiskeryang/article/details/146950963

版权

使用体验：能打开浏览器并执行一些基础操作，但元素定位问题比较大，想要它能智能识别元素还不太现实。并且找不到元素容易陷入死循环， token消耗飞快。。操作了几次十几万token就没了。
比如在输入指令时明确元素的定位，则操作比较顺利。如只给 “输入用户名 xxx 密码 xxx，点击登录”之类的文字。基本上会找不到元素，它会先先根据常见的id定位，报错后会再获取页面outerhtml，然后把整个outerhtml发送给大模型进行定位提取。能否正确提取就的看大模型的能力了。经常还会报接口错误，导致陷入死循环。

安装过程

先在官网按照说明尝试安装，因为后续需要claude desktop管理server所以放弃。

转而尝试使用文档中的vscode配置。但官方文档中的安装命令一直无法执行，
code --add-mcp ‘{“name”:“playwright”,“command”:“npx”,“args”:[“@executeautomation/playwright-mcp-server”]}’
提示–add-mcp 参数无法识别

后来发现发现vscode有个cline插件可以支持vscode管理mcpserver。
经过尝试后可行，这里把步骤记录下来。不过因为之前尝试了多种安装方式，具体的步骤有点混，这里仅凭记忆记录。

先配置Node.js环境，我机器上已经有相关环境所以略过，下面是我本机的node.js环境信息：都是较老的版本了

node -v
> v16.16.0
npm -v
> 8.15.0
npx -v
> 8.15.0

安装mcp_playwrightserver

# 安装命令
npm install -g @executeautomation/playwright-mcp-server

安装路径： C:\Users\fiskeryang\AppData\Roaming\npm\node_modules@executeautomation\playwright-mcp-server

# 校验安装
npm list

C:\Users\fiskeryang\AppData\Roaming\npm
├── @executeautomation/playwright-mcp-server@1.0.3
└── npm@8.15.0

安装vscode插件：Cline

安装完成后会在左侧菜单多出一个图标
在这里插入图片描述

还需要配置大模型的API，需要先准备好Api-key我这里用的是千问的API
点顶部的〓按钮进入配置页，点 Configure MCP Servers,会自动创建一个配置的Json文件。在其中command节点配置本地node.exe路径，args节点配置本地安装的mcp_playwrightserver的入口文件路径。
cline会自动尝试连接，连接成功则会显示下图的绿灯。

{
 "mcpServers": {
   "@executeautomation-playwright-mcp-server": {
     "disabled": false,
     "timeout": 60,
     "command": "C:\\Program Files\\nodejs\\node.exe",
     "args": [
       "C:\\Users\\fiskeryang\\AppData\\Roaming\\npm\\node_modules\\@executeautomation\\playwright-mcp-server\\dist\\index.js",
       "-y",
       "@smithery/cli@latest",
       "run",
       "@executeautomation/playwright-mcp-server",
       "--config",
       "\"{}\""
     ],
     "transportType": "stdio"
   }
 }
}