Midscene.js：用自然语言让AI替你操作所有设备的视觉驱动自动化神器

Midscene.js：用自然语言让AI替你操作所有设备的视觉驱动自动化神器

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

你是否厌倦了每天重复点击、填写表单、测试应用的枯燥工作？是否曾为不同平台需要学习不同的自动化工具而烦恼？Midscene.js 为你带来了一场自动化革命——只需用自然语言告诉AI要做什么，它就能像真人一样操作网页、Android、iOS、HarmonyOS等所有设备。

🔥 传统自动化的痛点，你中了几个？

痛点一：技术门槛高如天堑

传统自动化需要编写复杂的CSS选择器、学习各种API接口，对于非技术人员来说简直是天书。即使是有经验的开发者，也要花费大量时间调试和维护脚本。

痛点二：维护成本不断攀升

每次网站改版、APP更新，所有基于DOM结构的脚本都要重写。选择器一旦失效，整个自动化流程就会崩溃，维护成本惊人。

痛点三：平台限制束手束脚

网页自动化管不了原生APP，iOS脚本不能在安卓运行，跨平台测试需要编写多套完全不同的代码，效率极低。

痛点四：视觉元素无法识别

纯图标按钮、canvas画布、自定义控件，传统工具根本"看不见"。这些视觉元素在自动化测试中成了盲区。

🚀 Midscene.js：基于视觉AI的跨平台自动化解决方案

Midscene.js 采用纯视觉驱动的方式，通过AI分析屏幕截图来理解和操作界面。这意味着它不依赖DOM结构，不关心底层实现，只看屏幕上的内容——就像真人一样。

核心功能一：自然语言驱动，像对话一样简单

你不需要懂任何编程知识，只需要用大白话告诉AI要做什么。Midscene.js 能将你的自然语言指令转化为精确的操作步骤。

真实使用场景：

• "点击登录按钮"
• "在搜索框输入'iPhone 15'并搜索"
• "滚动到页面底部查看评论"
• "获取第一个商品的价格并保存到Excel"
• "打开设置，检查Android版本号"

传统方式 vs Midscene方式对比：

核心功能二：跨平台统一操作，一套方案搞定所有设备

Midscene.js 真正实现了"一次学习，处处可用"。无论是网页、移动端还是桌面应用，都能用同一套API和指令进行自动化。

Android设备自动化：

• 应用安装卸载测试
• 系统设置批量配置
• 应用功能回归测试
• 数据备份恢复操作

iOS设备自动化：

• 应用商店操作自动化
• 系统功能批量测试
• 多设备同步操作
• 性能监控与测试

核心功能三：智能桥接模式，人机协作无缝切换

有时候你需要完全自动化，有时候又想手动介入调试。Midscene.js 的桥接模式让你鱼与熊掌兼得。

桥接模式优势：

• 保留浏览器状态：Cookies、登录信息、插件配置全保留
• 人机协作自由切换：自动化过程中随时手动操作
• 本地SDK控制：通过终端命令远程控制浏览器
• 不影响正常使用：自动化在独立环境中运行

🛠️ 5分钟快速上手Midscene.js

第一步：安装Chrome扩展（最简单的方式）

从源码安装：

# 克隆项目 git clone https://gitcode.com/GitHub_Trending/mid/midscene cd apps/chrome-extension # 安装依赖 pnpm install # 构建扩展 pnpm run build

手动加载扩展：

1. 打开Chrome浏览器，访问chrome://extensions/
2. 开启右上角的"开发者模式"
3. 点击"加载已解压的扩展程序"
4. 选择项目中的dist目录

第二步：配置AI模型（让AI开始工作）

Midscene.js 支持多种AI模型，包括OpenAI、Ollama、UI-TARS等。配置非常简单：

环境变量配置：

# 在终端中设置 export MIDSCENE_OPENAI_API_KEY="你的API密钥" export MIDSCENE_OPENAI_BASE_URL="https://api.openai.com/v1"

扩展内配置：

1. 点击浏览器工具栏中的Midscene图标
2. 进入设置页面
3. 输入你的AI模型配置信息

第三步：开始你的第一个自动化任务

让我们从一个简单的电商价格监控开始：

1. 打开Midscene扩展面板
2. 输入指令："打开京东网站，搜索iPhone 15 Pro，获取第一个商品的价格"
3. 点击运行，看AI如何自动完成所有操作
4. 再试一个："打开淘宝，搜索同样商品，对比价格"

📋 实战案例：电商价格监控自动化系统

案例背景

小王是电商运营，每天需要监控10个平台、50个商品的价格变化。以前他需要：

• 手动打开10个网站
• 逐个搜索商品
• 记录价格数据
• 整理到Excel表格

每天花费3小时，还经常漏掉价格变动。

Midscene解决方案

步骤1：创建监控脚本

# price-monitor.yaml name: "电商价格监控系统" platforms: ["web"] tasks: - name: "监控京东价格" url: "https://jd.com" actions: - "搜索{{商品名称}}" - "获取第一个商品的价格" - "保存到价格记录表" - name: "监控淘宝价格" url: "https://taobao.com" actions: - "搜索{{商品名称}}" - "获取第一个商品的价格" - "保存到价格记录表"

步骤2：设置定时任务

# 每天上午10点执行监控 0 10 * * * cd /path/to/midscene && midscene run price-monitor.yaml

步骤3：查看监控报告Midscene.js 会自动生成详细的执行报告，包括：

• 每个平台的价格数据
• 价格变化趋势图
• 异常价格提醒
• 导出Excel表格

效果对比

🎯 进阶技巧：让自动化更智能高效

技巧1：条件分支处理复杂业务场景

Midscene.js 能像人一样做判断，处理不同的业务场景：

tasks: - name: "检查用户登录状态" action: evaluate script: "return document.querySelector('.user-menu') !== null" storeResultAs: "isLoggedIn" - name: "智能登录处理" if: "{{isLoggedIn}}" then: - action: click selector: ".logout-btn" else: - action: click selector: ".login-btn" - action: type selector: "#username" text: "{{用户名}}" - action: type selector: "#password" text: "{{密码}}"

技巧2：智能错误处理与重试机制

自动化难免遇到网络波动、页面加载慢等问题。Midscene.js 内置智能重试：

tasks: - name: "稳定点击提交按钮" action: click selector: ".submit-btn" retry: maxAttempts: 3 # 最多重试3次 delay: 2000 # 每次重试间隔2秒 conditions: # 重试条件 - "元素不存在" - "网络超时" - "页面未加载完成"

技巧3：数据提取与智能处理

Midscene.js 不仅能操作界面，还能提取和处理数据：

tasks: - name: "提取商品信息" action: extract target: ".product-list" fields: - name: "title" selector: ".product-title" - name: "price" selector: ".price" transform: "parseFloat" - name: "rating" selector: ".rating" transform: "parseFloat" output: "products.json" # 自动保存为JSON文件

🔧 常见问题与解决方案

Q1：扩展安装后无法正常工作？

解决方案：

1. 检查Chrome扩展页面是否有错误提示
2. 确保构建过程完整执行：pnpm install && pnpm run build
3. 尝试重启浏览器
4. 检查是否有其他扩展冲突

Q2：AI模型响应慢怎么办？

优化建议：

1. 使用更快的AI模型（如GPT-4 Turbo）
2. 优化提示词，减少歧义
3. 启用Midscene.js的缓存功能
4. 将大任务拆分为小步骤

Q3：如何调试自动化脚本？

调试步骤：

1. 使用Midscene.js的录制功能生成脚本
2. 在Playground中逐步执行查看效果
3. 查看详细的执行日志
4. 使用可视化回放功能定位问题

Q4：支持哪些平台和设备？

目前支持：

• ✅ 所有主流浏览器（Chrome、Firefox、Edge等）
• ✅ Android设备（需要开启USB调试）
• ✅ iOS设备（需要连接Mac）
• ✅ HarmonyOS设备
• ✅ 桌面应用（通过桥接模式）

📚 学习路径与资源

官方文档

• 快速开始指南：apps/site/docs/zh/quick-start.mdx
• API参考文档：apps/site/docs/zh/reference/
• 平台特定指南：apps/site/docs/zh/platforms/

社区支持

• Discord社区：获取实时帮助和最新动态
• GitHub Issues：提交问题和功能请求
• 官方示例仓库：学习最佳实践

进阶学习路径

1. 基础阶段：掌握自然语言指令编写
2. 中级阶段：学习YAML脚本编写和条件逻辑
3. 高级阶段：掌握桥接模式和API集成
4. 专家阶段：贡献代码和开发插件

🎉 立即开始你的自动化之旅

Midscene.js 不仅仅是一个工具，它是你工作效率的革命性提升。无论你是：

• 开发者：需要自动化测试和部署
• 运营人员：需要数据采集和监控
• 测试工程师：需要跨平台自动化测试
• 普通用户：想要自动化重复的网页操作

Midscene.js 都能为你节省大量时间，让你专注于更有价值的工作。

今天就开始行动：

1. 克隆项目：git clone https://gitcode.com/GitHub_Trending/mid/midscene
2. 安装扩展：按照上面的指南快速安装
3. 尝试第一个任务：从简单的网页操作开始
4. 逐步扩展：应用到更多场景和平台

不要再让重复劳动消耗你的时间和精力。让Midscene.js 成为你的AI助手，用自然语言控制所有设备，开启高效工作的新篇章！

小贴士：建议先从简单的日常任务开始，比如自动填写表单、批量下载文件等。随着熟练度的提高，逐步尝试更复杂的自动化场景。Midscene.js 社区中有大量现成的脚本模板和最佳实践，欢迎参考和学习。

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