Playwright + MCP：用AI对话重新定义浏览器自动化，助力提效300%

📝 面试求职： 「面试试题小程序」 ，内容涵盖 测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

---

Playwright：跨浏览器自动化的“瑞士军刀”。Playwright是微软开源的自动化测试工具，其核心优势在于：

跨浏览器支持：原生兼容Chromium（Chrome/Edge）、Firefox、WebKit（Safari），无需手动安装驱动。
       高效稳定：
 自动等待机制：操作前自动等待元素加载，减少硬编码sleep。
 智能选择器：支持Shadow DOM穿透和动态元素定位，降低维护成本。
 多场景覆盖：支持文件上传下载、跨域操作、移动端模拟等复杂需求。

MCP协议：标准化AI与工具的“对话”

MCP协议通过定义统一的通信标准，让LLM能够无缝调用外部工具（如浏览器、数据库、本地文件）。其核心价值体现在：​​​​​​​

标准化交互：开发者只需实现一次MCP Server，即可适配所有支持MCP的客户端（如WindSurf、Cline）。
动态灵活性：支持实时生成指令，例如根据页面状态动态调整操作流程。
安全性：内置权限控制，防止LLM越权访问敏感数据。
以Playwright的MCP Server为例，其工作流程如下：
指令接收：LLM发送自然语言描述（如“点击登录按钮”）。
指令解析：将自然语言转化为Playwright的API调用（如page.click("#login")）。
结果返回：将操作结果（截图、日志等）反馈给LLM。

Playwright+mcp如何实现浏览器自动化？接下来带着大家去体验下。

环境搭建

安装Playwright：​​​​​​​

安装Python环境
：确保Python版本≥3.7（推荐3.8+）
pip install playwright
python -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时代的工具人。

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

​​
​​