MCP协议：标准化AI与工具的“对话”
MCP协议通过定义统一的通信标准，让LLM能够无缝调用外部工具（如浏览器、数据库、本地文件）。其核心价值体现在：
标准化交互：开发者只需实现一次MCP Server，即可适配所有支持MCP的客户端（如WindSurf、Cline）。动态灵活性：支持实时生成指令，例如根据页面状态动态调整操作流程。安全性：内置权限控制，防止LLM越权访问敏感数据。以Playwright的MCP Server为例，其工作流程如下：指令接收：LLM发送自然语言描述（如“点击登录按钮”）。指令解析：将自然语言转化为Playwright的API调用（如page.click("#login")）。结果返回：将操作结果（截图、日志等）反馈给LLM。Playwright+mcp如何实现浏览器自动化？接下来带着大家去体验下。
环境搭建
安装Python环境：确保Python版本≥3.7（推荐3.8+）pip install playwrightpython -m playwright install#版本不匹配playwright install --force chrome安装Playwright Test for VSCode插件：在VS Code扩展商店搜索并安装"Playwright Test for VSCode"
部署MCP Server：
npx @playwright/mcp@latest#或者npm install -g @playwright/mcp启动npx @playwright/mcp@latest
客户端配置（以VSCode Cline为例）
安装Cline插件
安装后
直接执行
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'勾选这这个
然后点击右上角
点击installed
配置：
配置启动参数：
{ "mcpServers": { "playwright": { "command": "npx", "args": [ "@playwright/mcp@latest" ] } }}如果链接不上去可以
{ "mcpServers": { "memory": { "command": "cmd", "args": [ "/c", "npx", "-y", "@playwright/mcp@latest" ], "timeout": 300 } }}然后输入允运行后，可以看到已经链接成功，有这么多tools
然后就可以在本地进行测试了
备注，如果没有大模型可以参考：配置国内开源的。
配置后体验。在对话框输入了一段话：打开百度，搜索你好，并且截图。
看下模型怎么给我们出来的，拆分了步骤，并且生成了playwright mcp服务端可以执行的对应的步骤，然后进行执行，目前每执行一步都会让你确认。
上面是微软的，但是感觉微软的封装的没有那么多。网上还有一个
https://github.com/executeautomation/mcp-playwright安装方式如下
npm install -g @executeautomation/playwright-mcp-server
配置
{ "mcpServers": { "playwright": { "command": "npx", "args": ["-y", "@executeautomation/playwright-mcp-server"] } }}如果启动有问题，可以试下下面的启动方式
"mcpServers": { "@executeautomation-playwright-mcp-server": { "command": "node.exe", "args": [ "你的路径/node_modules/@executeautomation/playwright-mcp-server/dist/index.js", "-y", "@smithery/cli@latest", "run", "@executeautomation/playwright-mcp-server", "--config", "\"{}\"" ] } }}这个配置后，大概有，封装的更完善
有了playwright-mcp，可以让浏览器自动化变成了特别简单的AI对话，人人都可以写浏览器自动化，部署后，开发写完代码，本地就可以进行简单的对话来验证是否完成，产品验收也只需要简单的AI对话即可实现，测试工程师，也不再编写复杂的代码，即可通过对话AI实现浏览器自动化。后续会有更多的版本迭代，越来越简单。AI时代，mcp加持下，人人都是AI时代的工具人。
粤ICP备17114055号