Midscene.js：用自然语言让AI替你操作所有设备的完整指南
Midscene.js用自然语言让AI替你操作所有设备的完整指南【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene还在为重复的网页操作、APP测试、表单填写而烦恼吗每天花几个小时手动点击按钮、填写信息、检查结果不仅枯燥乏味还容易出错。现在Midscene.js为你提供了一套创新的跨平台自动化解决方案让你用自然语言就能控制所有设备。Midscene.js是一个基于视觉AI的跨平台自动化工具支持网页、Android、iOS、HarmonyOS和桌面应用彻底告别复杂的代码编写。想象一下你只需要告诉AI打开设置查看安卓版本或在eBay搜索栏输入关键词AI就能像真人一样操作设备完成所有繁琐任务。这就是Midscene带来的效率革命 为什么你需要Midscene.js传统自动化面临的技术困境作为一名开发者或测试工程师你一定遇到过这些问题场景一网站改版导致所有脚本失效昨天还能正常运行的自动化脚本今天因为页面结构调整就完全崩溃了。你不得不重新分析DOM结构更新所有CSS选择器这个过程既耗时又容易出错。场景二跨平台测试需要多套代码为网页写一套Playwright脚本为iOS写一套Appium代码为Android再写一套。每增加一个平台你的维护成本就翻倍增长。场景三视觉元素无法被传统工具识别纯图标按钮、canvas画布、自定义控件这些没有标准DOM结构的元素让传统自动化工具束手无策。场景四非技术人员无法参与自动化流程业务人员有明确的测试需求但不会写代码开发人员会写代码但不了解业务细节。这种沟通断层导致自动化测试难以落地。Midscene.js的技术方案Midscene.js采用纯视觉识别技术直接从屏幕截图理解界面不依赖DOM结构或可访问性树。这意味着零选择器维护- UI怎么变都能适配跨平台统一API- 一套代码支持所有设备真正的所见即所得- 只要人眼能看到Midscene就能操作自然语言驱动- 业务人员也能直接描述测试场景 Midscene.js的核心优势纯视觉识别告别脆弱的DOM依赖传统UI自动化工具严重依赖页面结构每次重构都需要更新选择器。Midscene.js基于多模态AI模型直接从屏幕截图理解界面实现了真正的所见即所得自动化。技术实现路径packages/core/src/agent/- 这里包含了Midscene的核心AI代理逻辑包括视觉识别、自然语言理解和动作执行。跨平台支持一套方案搞定所有设备无论是Web浏览器、Android设备、iOS系统、HarmonyOS还是桌面应用Midscene.js提供统一的API接口。这意味着你只需要学习一次就能应用到所有平台。平台支持源码Android自动化packages/android/src/iOS自动化packages/ios/src/Web自动化packages/web-integration/src/桌面应用packages/computer/src/自然语言交互降低自动化门槛不需要学习复杂的CSS选择器或XPath语法只需要用大白话描述你的操作意图。Midscene.js的AI模型会理解你的指令并转化为具体的界面操作。实际使用对比使用前// 传统方式需要精确的元素选择器 await page.click(button[data-testidsubmit-btn]); await page.fill(input[nameusername], testuser);使用后# Midscene方式自然语言描述 - 点击登录按钮 - 在用户名输入框填写testuser️ Midscene.js的三大应用场景场景一Web自动化测试与数据采集用户故事小王是电商公司的数据分析师每天需要从10个电商平台收集50个商品的价格数据。以前他需要手动操作现在使用Midscene.js配置Chrome扩展安装Midscene Chrome插件输入自然语言指令打开京东搜索iPhone 15获取前5个商品的价格和评价数自动化执行Midscene自动完成所有操作并返回结构化数据定时任务设置每天自动执行数据自动保存到数据库技术实现通过packages/web-integration/src/中的桥接模式Midscene可以控制浏览器执行复杂的Web操作同时保留所有浏览器状态cookies、登录信息等。场景二移动应用自动化测试用户故事小李是移动应用测试工程师需要测试应用在Android和iOS上的兼容性。以前他需要为两个平台分别编写测试脚本现在统一测试脚本使用YAML格式编写一次测试用例多设备并行执行同时连接Android和iOS设备视觉验证自动截图并验证UI显示效果回归测试每次版本更新自动运行完整测试套件核心功能源码packages/android/src/agent.ts和packages/ios/src/agent.ts包含了移动设备自动化的核心逻辑。场景三跨平台业务流程自动化用户故事某公司的客服团队需要处理来自网页、移动APP和桌面客户端的用户反馈。使用Midscene.js后统一处理流程无论来自哪个平台都使用相同的自动化流程智能路由根据问题类型自动分配到对应处理系统状态同步跨平台状态自动同步避免重复处理报表生成自动生成跨平台服务报表 5分钟快速上手指南第一步安装Chrome扩展零代码体验这是最简单的开始方式让你立即体验Midscene.js的强大功能从源码构建git clone https://gitcode.com/GitHub_Trending/mid/midscene cd apps/chrome-extension pnpm install pnpm run build加载扩展打开Chrome浏览器访问chrome://extensions/开启开发者模式点击加载已解压的扩展程序选择项目中的dist目录配置AI模型点击浏览器工具栏中的Midscene图标进入设置页面配置你的AI模型API密钥第二步配置AI模型核心准备Midscene.js支持多种多模态AI模型包括Qwen3.x、Doubao-Seed、GLM-4.6V、Gemini等。配置非常简单环境变量配置export MIDSCENE_OPENAI_API_KEY你的API密钥 export MIDSCENE_OPENAI_BASE_URLhttps://api.openai.com/v1官方文档路径apps/site/docs/zh/model-common-config.mdx- 这里详细介绍了所有支持的模型和配置方法。第三步编写你的第一个自动化脚本如果你更喜欢代码方式可以使用Midscene.js的JavaScript SDK安装依赖npm install midscene/web playwright --save-dev创建测试脚本import { createAgent } from midscene/web; const agent await createAgent({ platform: web, model: qwen-vl-plus }); // 用自然语言控制浏览器 await agent.ai(打开百度首页); await agent.ai(在搜索框输入Midscene.js); await agent.ai(点击搜索按钮); await agent.ai(获取第一个搜索结果);运行脚本node your-script.js完整示例源码apps/site/docs/zh/quick-start.mdx提供了详细的快速开始指南。 实战案例电商价格监控系统案例背景某电商公司的运营团队需要监控竞争对手的价格变化。传统方式需要人工每天检查10个平台耗时3-4小时且容易漏掉重要价格变动。Midscene.js解决方案技术架构数据采集层使用Midscene.js自动访问各电商平台自然语言指令用YAML定义采集规则定时任务通过cron job定期执行数据存储结果自动保存到数据库报警系统价格异常时自动通知YAML脚本示例name: 价格监控自动化 platforms: [web] tasks: - name: 京东价格监控 url: https://jd.com actions: - 搜索{{商品名称}} - 获取前10个商品的价格和标题 - 保存到价格数据库 - 如果价格下降超过10%发送邮件通知 - name: 淘宝价格监控 url: https://taobao.com actions: - 搜索{{商品名称}} - 获取前10个商品的价格和销量 - 保存到价格数据库实施效果对比指标传统人工方式Midscene.js自动化时间成本3-4小时/天5分钟/天准确性人工易出错100%准确及时性每天一次实时监控可扩展性难以增加平台轻松扩展新平台维护成本高需培训人员低脚本自动运行 进阶技巧与最佳实践技巧1智能错误处理与重试机制自动化过程中难免遇到网络波动或页面加载问题。Midscene.js内置了智能重试机制tasks: - name: 稳定操作流程 action: click target: 提交按钮 retry: maxAttempts: 3 delay: 2000 conditions: - 元素未找到 - 网络超时 - 页面未完全加载实现源码packages/core/src/task-runner.ts- 这里包含了任务执行和错误处理的核心逻辑。技巧2条件分支与智能决策Midscene.js可以像人类一样做出判断处理复杂的业务逻辑tasks: - name: 智能登录处理 action: evaluate script: 检查页面是否有用户菜单 storeResultAs: isLoggedIn - name: 根据状态执行不同操作 if: {{isLoggedIn}} then: - action: click target: 退出登录 else: - action: click target: 登录按钮 - action: type target: 用户名输入框 text: {{用户名}}技巧3数据提取与结构化输出Midscene.js不仅能操作界面还能提取和处理结构化数据tasks: - name: 提取商品信息 action: extract target: 商品列表 fields: - name: title selector: 商品标题 - name: price selector: 价格 transform: parseFloat - name: rating selector: 评分 transform: parseFloat outputFormat: json outputFile: products.json数据提取源码packages/shared/src/extractor/- 这里包含了各种数据提取和转换工具。 学习资源与社区支持官方文档与示例快速开始指南apps/site/docs/zh/quick-start.mdx平台特定指南apps/site/docs/zh/platforms/目录下的各个平台文档API参考文档apps/site/docs/zh/reference/示例项目项目中的packages/*/demo/目录包含各平台示例社区资源Discord社区获取实时帮助和技术支持GitHub Issues提交问题和功能请求示例仓库学习最佳实践和高级用法博客文章apps/site/docs/public/blog/目录下的技术文章学习路径建议入门阶段从Chrome扩展开始体验自然语言自动化基础阶段学习YAML脚本编写掌握基本自动化流程进阶阶段使用JavaScript SDK构建复杂自动化系统专家阶段贡献代码开发自定义插件和扩展 立即开始你的自动化之旅Midscene.js不仅仅是一个工具它是你工作效率的革命性提升。无论你是前端开发者需要自动化测试和部署测试工程师需要跨平台自动化测试数据分析师需要自动化数据采集运营人员需要业务流程自动化普通用户想要自动化重复的网页操作Midscene.js都能为你节省大量时间让你专注于更有价值的工作。今天就开始行动克隆项目git clone https://gitcode.com/GitHub_Trending/mid/midscene安装扩展按照快速指南安装Chrome扩展尝试第一个任务从简单的网页操作开始逐步扩展应用到更多场景和平台不要再让重复劳动消耗你的时间和精力。让Midscene.js成为你的AI助手用自然语言控制所有设备开启高效工作的新篇章小贴士建议先从简单的日常任务开始比如自动填写表单、批量下载文件等。随着熟练度的提高逐步尝试更复杂的自动化场景。Midscene.js社区中有大量现成的脚本模板和最佳实践欢迎参考和学习。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
