Midscene.js终极实战：3步构建跨平台视觉UI自动化工作流

【免费下载链接】midscene AI-powered, vision-driven UI automation for every platform. 项目地址: https://gitcode.com/GitHub_Trending/mid/midscene

Midscene.js是一款革命性的AI驱动视觉UI自动化工具，让自然语言成为你的自动化编程语言。无论你是测试工程师、开发者还是自动化爱好者，都能通过简单的指令实现Web、Android、iOS和桌面应用的智能操作。告别复杂的DOM选择器和坐标定位，Midscene.js基于纯视觉路线，让AI成为你的全能操作员。

🚀 为什么选择Midscene.js？

传统的UI自动化工具依赖DOM结构或坐标定位，难以应对跨平台、动态界面和Canvas等复杂场景。Midscene.js采用视觉语言模型驱动的纯视觉路线，通过屏幕截图识别界面元素，实现真正的跨平台自动化。这种设计带来了三大核心优势：

1. 零代码快速体验 - 通过Chrome扩展即可立即开始使用
2. 自然语言编程 - 用简单语言描述任务，AI自动执行
3. 全平台覆盖 - Web、Android、iOS、HarmonyOS、桌面应用全覆盖

📦 3步快速上手

第1步：环境准备与安装

克隆项目并安装依赖，这是开始Midscene.js之旅的第一步：

git clone https://gitcode.com/GitHub_Trending/mid/midscene
cd midscene
npm install

如果你只想快速体验，可以直接安装核心包：

npm install @midscene/web

第2步：选择你的自动化模式

Midscene.js提供两种自动化风格，满足不同场景需求：

自动规划模式 - AI自主规划并执行完整流程，适合简单任务：

await aiAct('点击登录按钮，输入用户名和密码，然后提交表单');

工作流风格 - 将复杂逻辑拆分为多个步骤，适合精细化控制：

const searchResults = await agent.aiQuery('搜索结果列表')
for (const result of searchResults) {
  const isRelevant = await agent.aiBoolean(`检查${result}是否包含"教程"`)
  if (isRelevant) {
    await agent.aiTap(result)
  }
}

第3步：配置视觉语言模型

在项目根目录的midscene_prompt.md文件中配置AI模型参数。Midscene.js支持多种视觉语言模型：

• Qwen3-VL - 开源模型，适合本地部署
• Doubao-1.6-vision - 字节跳动高性能模型
• UI-TARS - 专门优化的UI自动化模型
• Gemini-3-Pro - Google最新视觉模型

Midscene.js Android Playground：通过网页界面远程控制Android设备，模拟真实用户操作

🔧 核心功能模块详解

Web自动化：浏览器智能控制

Midscene.js提供三种Web自动化方案，满足不同需求：

1. Puppeteer集成 - 直接集成到现有Puppeteer项目
2. Playwright集成 - 与Playwright框架无缝对接
3. Bridge模式 - 通过本地终端控制桌面浏览器

Bridge模式：通过本地SDK控制桌面Chrome浏览器，实现真正的无头操作

移动端自动化：Android与iOS全覆盖

Android设备控制 - 通过packages/android/src/模块：

import { createAndroidAgent } from '@midscene/android';
const agent = await createAndroidAgent({ deviceId: 'your-device-id' });
await agent.aiTap('设置图标');
await agent.aiScrollTo('关于手机');

iOS自动化 - 使用packages/ios/src/模块控制iOS设备和模拟器，支持真机和模拟器的完整操作链。

报告与可视化：调试从未如此简单

Midscene.js生成详细的操作报告，位于apps/report/src/components/：

• 时间轴交互 - 显示操作序列和时序关系
• 详情面板 - 展示每个步骤的详细信息和截图
• 全局悬浮预览 - 提供实时预览和错误诊断

可视化操作报告：生成并展示完整的操作日志和执行步骤，便于追踪自动化任务全过程

🎯 实际应用场景

场景1：电商网站自动化测试

自动化测试电商网站的完整购物流程：

1. 用户登录与身份验证
2. 商品搜索与筛选
3. 购物车管理与结算
4. 订单状态跟踪

场景2：移动应用回归测试

为移动应用提供全面的回归测试方案：

• 应用启动与权限处理
• 核心功能流程验证
• 多设备兼容性测试
• 性能与稳定性监控

场景3：数据采集与监控

自动化采集网页数据，支持：

• 定期监控价格变化
• 内容更新检测
• 竞品分析数据收集
• 舆情监控与报告生成

⚡ 性能优化技巧

缓存机制加速执行

利用Midscene.js的缓存功能显著提升脚本执行速度：

const agent = await createWebAgent({
  useCache: true,
  cacheDir: './midscene-cache'
});

智能模型选择策略

根据任务复杂度选择合适的视觉模型：

• 简单任务：使用qwen3-vl降低成本
• 复杂界面：使用ui-tars提高准确性
• 实时操作：使用gemini-3-flash提升响应速度

错误处理与重试机制

async function reliableOperation(operation, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await operation();
    } catch (error) {
      if (i === maxRetries - 1) throw error;
      await new Promise(resolve => setTimeout(resolve, 1000));
    }
  }
}

🛠️ 进阶功能与扩展

MCP集成：让AI操作更智能

Midscene.js提供MCP服务，将原子化的AI操作暴露为MCP工具，让上层智能体能够通过自然语言检查和操作UI。核心源码位于packages/mcp/src/server.ts。

自定义技能开发

在packages/core/src/skill/中创建自定义技能，扩展Midscene.js的能力边界：

export class CustomSkill {
  async execute(agent, params) {
    // 实现你的自定义逻辑
    return await agent.aiAct(params.instruction);
  }
}

扩展插件系统

通过packages/shared/src/extractor/中的提取器模块扩展功能：

• 文本提取 - 从复杂界面中提取结构化数据
• 图像处理 - 处理截图和视觉识别结果
• 数据解析 - 转换和验证提取的数据

Playground界面：在浏览器中模拟网页操作，支持点击、查询、断言等完整功能

📊 最佳实践指南

1. 逐步验证策略

在每个关键操作后添加验证步骤，确保自动化流程的可靠性：

await agent.aiTap('提交按钮');
const success = await agent.aiBoolean('确认提交成功提示出现');
if (!success) {
  await agent.aiTap('重试按钮');
}

2. 异常处理机制

为常见异常情况添加处理逻辑：

• 网络超时与重连
• 元素未找到的备选方案
• 界面状态变化的适应性处理

3. 日志记录与监控

使用packages/shared/src/logger.ts记录详细执行日志，结合可视化报告分析性能瓶颈和错误模式。

4. 版本控制与协作

将自动化脚本纳入版本控制系统，支持团队协作和持续集成。

🎉 开始你的自动化之旅

Midscene.js让AI驱动的UI自动化变得前所未有的简单。无论你是想自动化重复性工作、构建智能测试系统，还是探索AI在UI操作中的可能性，Midscene.js都是你的理想选择。

立即行动：

1. 安装Chrome扩展快速体验零代码自动化
2. 阅读官方文档了解详细API和使用方法
3. 查看示例项目学习最佳实践和高级技巧
4. 加入社区获取技术支持和交流经验

通过这3个简单步骤，你已经掌握了使用Midscene.js构建智能UI自动化工作流的核心技能。现在就开始你的自动化之旅，让AI成为你的高效助手，释放创造力，专注于更有价值的工作！

核心源码：packages/core/src/ 示例项目：apps/playground/src/

【免费下载链接】midscene AI-powered, vision-driven UI automation for every platform. 项目地址: https://gitcode.com/GitHub_Trending/mid/midscene