AI驱动 WEB UI自动化---前端技术分享

AI驱动 WEB UI自动化---前端技术分享

一、背景：

自动化真正的痛点：调试和维护自动化脚本才是真正的痛点

二、有哪些浏览器自动化的方式？

1. Selenium WebDriver​ (需要WebDriver​，支持IE)

（2004年诞生），基于W3C WebDriver标准

优点：

​​广泛兼容性​​：支持Chrome、Firefox、Safari、IE及移动浏览器。

​​多语言生态​​：Java/Python/C#等主流语言均有完善库。

​​分布式测试​​：Selenium Grid支持跨机器并行执行

缺点：​​

​​环境配置复杂​​：需匹配浏览器版本与驱动程序（如ChromeDriver）。

​​稳定性挑战​​：需手动处理动态加载等待。

2. Puppeteer(2017年 Google node.js库)

由Google开发的Node.js库（2017年发布），基于Chrome DevTools Protocol直接控制Chrome/Chromium

链接：CDP

中文文档 英文文档

局限

​1. ​浏览器限制​​：支持Chromium内核（Chrome/Edge）,firefox部分支持。 ​2. ​资源消耗​​：每个实例独立浏览器进程，高并发需优化

3. Playwright （2020年微软）

• 微软2020年推出的跨浏览器自动化框架
• 跨浏览器:支持Chromium (通过Chrome DevTools Protocol)、WebKit（Safari 通过Remote Protocol）、Firefox（通过Remote Protocol） - 自动等待机制：智能等待元素可交互，减少timeout异常 - 多上下文隔离：同一浏览器实例支持多个独立会话（Cookies/LocalStorage隔离）
• 多语言支持：Python/Java/.NET/JS API设计一致

中文文档 英文文档

• playwright
• playwright-test

1. vscode 插件 Playwright Test for VSCode
2. 代码生成 npx playwright codegen playwright.dev
3. getByRole 浏览器的无障碍功能
4. 断言优化，生成运行报告
5. headed模式，ui模型

4. 浏览器插件 （使用现有浏览器，需启用插件，自己实现工具，有些功能无法实现）

通过浏览器扩展（如Chrome插件）注入脚本，实现轻量自动化

• Ui.Vision
• Selenium-IDE
• Puppeteer/web api
• Playwright/web api

优点：

使用当前浏览器，无需启新的浏览器实例

缺点：

脚本依赖浏览器插件，需手动安装

三、LLM如何去执行任务？

• 目前通用协议MCP

核心价值:

"MCP是智能体生态的​​最后一公里​​，将LLM从文本生成器升级为任务执行体。"

官方链接

js快速实现MCP

其他语言实现参考

• MCP服务端与MCP客户端数据传输：Stdio、SSE已弃用、StreamableHTTP
• MCP服务端与浏览器插件的通信：Stdio(nativeMessageHost)、websocket(桥接模式)

1. nativeMessageHost

   const nativePort = chrome.runtime.connectNative(HOST_NAME);

2. websocket

   import { Server, type Socket as ServerSocket } from 'socket.io';
   import { io as ClientIO, type Socket as ClientSocket } from 'socket.io-client';

• vscode添加MCP

• Cursor添加MCP

• Cherry Studio添加MCP

四、LLM如何调用MCP控制浏览器自动化？

1. puppeteer-mcp

github链接

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  }
}

工具（7）

• puppeteer_navigate
• puppeteer_screenshot
• puppeteer_click
• puppeteer_hover
• puppeteer_fill
• puppeteer_select
• puppeteer_evaluate

2. playwright-mcp

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

github链接

工具（28）

• browser_click
• browser_close
• browser_console_messages
• browser_drag
• browser_evaluate
• browser_file_upload
• browser_handle_dialog
• browser_hover
• browser_navigate
• browser_navigate_back
• browser_navigate_forward
• browser_network_requests
• browser_press_key
• browser_resize
• browser_select_option
• browser_snapshot
• browser_take_screenshot
• browser_type
• browser_wait_for
• browser_tab_close
• browser_tab_list
• browser_tab_new
• browser_tab_select
• browser_install
• browser_mouse_click_xy
• browser_mouse_drag_xy
• browser_mouse_move_xy
• browser_pdf_save

查找元素的两种模式

• 快照模式: 利用 Playwright 的可访问性树（Accessibility Tree）,无需依赖视觉模型

• 视觉模式: 使用截图，基于屏幕上的 X 和 Y 坐标

  mcp-puppeteer与mcp-playwright对比

> 来源：zhuanlan.zhihu.com/p/189156912...

#### 4. 浏览器插件与MCP (mcp-chrome)

github链接

{
  "mcpServers": {
    "chrome-mcp-server": {
      "type": "streamableHttp",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

23个工具

技术细节：

• npm install -g mcp-chrome-bridge
• postinstall钩子中完成：windows完成注册表注册

C:\Users\Administrator\AppData\Roaming\Google\Chrome\NativeMessagingHosts\com.chromemcp.nativehost.json

{
  "name": "com.chromemcp.nativehost",
  "description": "Node.js Host for Browser Bridge Extension",
  "path": "D:\\Programs\\nvm\\v22.16.0\\node_modules\\mcp-chrome-bridge\\dist\\run_host.bat",
  "type": "stdio",
  "allowed_origins": [
    "chrome-extension://hbdgbgagpkpjffpklnamcljpakneikee/"
  ]
}

• 插件与MCP服务通过NativeMessageChannel通信

• 插件发送连接请求，启动http服务

五、如何使用自然语言写脚本，并以以上几种方式控制浏览器自动化？

• MidScene.js，尝试结合AI提升自动化脚本的调试和维护体验

1. 自然语言写脚本
2. 与Puppeteer、Playwright、插件的结合方式执行脚本

MidScene.js 是由字节跳动 web-infra 团队推出的一个开源 ai 自动化测试工具，基于多模态大模型，通过针对页面的智能视觉解析来理解我们的自然语言指令，并进一步完成自动化操作。可以显著降低编写自动化测试脚本的复杂性，并更好适应页面结构和元素的变化，使自动化测试脚本的稳定性也有较大提升。官网地址： midscenejs.com/

中文文档： github链接：]

三大核心功能​

两种自动化风格

1. 自动规划

   • Midscene 将自动规划步骤并执行。这可能会比较慢，并且严重依赖 AI 模型的质量。

await aiAction('逐一点击所有记录。如果某个记录包含文本"completed"，则跳过它');

2. 工作流风格

   • 将复杂逻辑拆分为多个步骤，以提高自动化代码的稳定性。

const recordList = await agent.aiQuery('string[], 记录列表')
for (const record of recordList) {
  const hasCompleted = await agent.aiBoolean(`检查记录包含文本"completed"`)
  if (!hasCompleted) {
    await agent.aiTap(record)
  }
}

Android 自动化

Web 浏览器自动化

集成到 Puppeteer

1. 集成到 Puppeteer
2. 查看运行报告

集成到 Playwright

1. 与playwright集成

2. 与@playwright/test集成

3. 查看测试报告

Chrome 桥接模式（Bridge Mode）

使用 YAML 格式的自动化脚本

MCP 配置

{
  "mcpServers": {
    "mcp-midscene": {
      "command": "npx",
      "args": ["-y", "@midscene/mcp"],
      "env": {
        "MIDSCENE_MODEL_NAME": "REPLACE_WITH_YOUR_MODEL_NAME",
        "OPENAI_API_KEY": "REPLACE_WITH_YOUR_OPENAI_API_KEY",
        "MCP_SERVER_REQUEST_TIMEOUT": "800000"
      }
    }
  }
}

Midscene MCP 提供以下浏览器自动化工具：

优势：

1. 传统UI自动化的痛点
   • 选择器耦合度高、维护成本大、断言困难
2. MidScene.js的革新性
   • AI多模态理解：通过视觉+语义解析页面，替代XPath/CSS选择器
   • 自然语言交互：用中文/英文指令直接控制浏览器（如"在搜索框输入耳机并回车"），大大降低了自动化测试的门槛
   • 可视化报告功能，提供动画回放和调试Playground pixi.js实现回放动画效果

缺点：

• 依赖多模态模型 成本高 速度 准确性待考验