Midscene.js：用自然语言重新定义UI自动化，告别繁琐代码时代

Midscene.js用自然语言重新定义UI自动化告别繁琐代码时代【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene还在为编写复杂的UI自动化脚本而烦恼吗Midscene.js通过AI驱动的视觉语言模型让开发者只需用自然语言描述操作意图即可自动完成Web、Android、iOS等多平台界面自动化任务。这个开源项目将视觉识别与自然语言处理结合为开发者提供了全新的自动化体验。三大核心功能从零代码到专业开发的全覆盖1. 浏览器扩展即插即用的零门槛自动化Midscene Chrome扩展让非技术用户也能轻松实现浏览器自动化。安装扩展后直接在任意网页侧边栏输入“点击搜索框并输入关键词”这样的自然语言指令AI就能理解并执行相应操作。图Midscene Chrome扩展界面支持在Google搜索结果页面上直接输入自然语言指令执行自动化操作扩展支持三种操作模式Action模式执行点击、输入、滚动等交互操作Query模式查询页面元素状态或提取数据Assert模式验证页面是否符合预期状态2. YAML脚本运行器结构化自动化的专业方案对于需要重复执行的复杂任务Midscene提供了YAML格式的脚本定义方式。开发者可以编写结构化脚本通过命令行工具批量执行web: url: https://www.bing.com tasks: - name: 搜索天气信息 flow: - ai: 在搜索框输入今日天气 - ai: 点击搜索按钮 - sleep: 3000 - aiAssert: 页面显示天气信息执行命令极其简单midscene ./weather-search.yaml3. Bridge模式本地脚本与浏览器的无缝桥接Bridge模式解决了自动化脚本与浏览器环境隔离的问题。通过本地运行的Node.js脚本开发者可以控制已安装Midscene扩展的Chrome浏览器import { AgentOverChromeBridge } from midscene/web; const agent new AgentOverChromeBridge(); await agent.connect(); await agent.ai(在Google搜索Midscene.js);图Midscene Bridge模式架构展示本地终端与浏览器扩展之间的通信机制技术架构视觉语言模型驱动的智能自动化纯视觉定位技术Midscene采用纯视觉pure-vision路线进行元素定位和交互完全基于截图分析无需DOM信息。这种设计带来了三大优势跨平台兼容性适用于Web、移动端、桌面应用甚至Canvas渲染的复杂界面Token效率提升相比传统DOM分析视觉识别消耗的Token更少成本更低执行速度优化减少DOM解析开销响应更迅速多模型支持策略项目支持多种视觉语言模型开发者可以根据需求灵活选择Qwen3-VL国产优秀视觉语言模型Doubao-1.6-vision字节跳动视觉模型gemini-3-pro/flashGoogle Gemini系列UI-TARS专为UI自动化优化的模型实际应用场景从测试到生产的多领域覆盖电商价格监控自动化传统价格监控需要编写复杂的爬虫代码处理反爬机制、页面结构变化等问题。使用Midscene只需简单配置web: url: https://www.taobao.com tasks: - name: 监控商品价格 flow: - ai: 在搜索框输入iPhone 15 - ai: 点击搜索按钮 - ai: 获取第一个商品的价格 - condition: if: price 5000 then: - log: 价格低于5000发送通知表单自动填充与验证对于需要频繁填写的注册表单、调查问卷等场景Midscene可以保存常用数据模板一键完成复杂表单填写web: url: https://example.com/register tasks: - name: 自动注册账号 flow: - ai: 在姓名字段输入${user.name} - ai: 在邮箱字段输入${user.email} - ai: 在密码字段输入${user.password} - ai: 勾选同意条款复选框 - ai: 点击提交按钮 - aiAssert: 显示注册成功提示跨平台应用测试Midscene支持Android和iOS设备自动化为移动应用测试提供了统一解决方案android: deviceId: s4ey59 tasks: - name: 测试地图导航功能 flow: - ai: 打开高德地图应用 - ai: 点击搜索框 - ai: 输入杭州西湖 - ai: 点击搜索按钮 - ai: 点击第一个搜索结果 - ai: 点击开始导航按钮 - aiAssert: 进入导航界面图Midscene Android Playground界面展示在Android设备上执行自动化操作的实时预览开发者体验优化从编写到调试的全流程支持可视化调试报告每次脚本执行后Midscene会生成详细的HTML报告包含操作步骤的时间线视图每一步的屏幕截图AI决策的详细日志执行性能统计数据Playground实时调试环境内置的Playground允许开发者在真实网页环境中测试自动化脚本图Midscene Playground界面支持在eBay页面上实时测试自动化脚本MCPModel Context Protocol集成Midscene提供MCP服务将自动化能力暴露为标准的MCP工具上层AI Agent可以直接调用// 在AI Agent中直接使用Midscene能力 const tools await getMidsceneTools(); const result await tools.aiAction(点击登录按钮);快速开始五分钟搭建自动化环境环境准备# 克隆项目 git clone https://gitcode.com/GitHub_Trending/mid/midscene cd mid/midscene # 安装依赖 pnpm install # 构建Chrome扩展 cd apps/chrome-extension pnpm run build扩展安装步骤打开Chrome浏览器访问chrome://extensions/启用右上角开发者模式点击加载已解压的扩展程序选择dist目录完成安装第一个自动化脚本创建first-automation.yaml文件web: url: https://www.baidu.com tasks: - name: 搜索测试 flow: - ai: 在搜索框输入Midscene.js - ai: 点击百度一下按钮 - sleep: 2000 - aiAssert: 页面显示搜索结果执行脚本npx midscene/cli ./first-automation.yaml性能优化与最佳实践缓存机制提升执行效率Midscene支持操作缓存重复执行相同脚本时可以直接复用之前的识别结果显著提升执行速度config: useCache: true # 启用缓存 cacheDuration: 3600 # 缓存有效期1小时 web: url: https://example.com tasks: - name: 缓存示例 flow: - ai: 点击登录按钮错误处理与重试策略自动化脚本内置智能错误处理元素定位失败自动重试3次每次间隔1秒网络超时自动刷新页面后继续执行验证失败记录详细日志并继续后续步骤多环境配置管理通过环境变量支持不同环境的配置分离# .env文件配置 MIDSCENE_MODEL_BASE_URLhttps://your-model-service.com/v1 MIDSCENE_MODEL_API_KEYyour-api-key MIDSCENE_MODEL_NAMEqwen3-vl行业应用案例电商运营自动化某电商团队使用Midscene实现了每日价格监控覆盖1000商品竞品数据自动采集促销活动自动报名库存预警自动通知软件测试自动化某SaaS公司使用Midscene进行跨浏览器兼容性测试移动端回归测试API与UI联动测试性能基准测试数据采集与分析研究机构使用Midscene自动化社交媒体数据采集学术论文信息提取市场趋势分析竞品功能对比未来展望AI自动化的发展方向Midscene.js代表了UI自动化领域的新趋势——从代码驱动转向意图驱动。随着AI技术的不断进步未来自动化将更加智能意图理解更精准AI不仅能执行指令还能理解业务上下文自适应学习能力系统能够从历史操作中学习优化执行策略多模态交互结合语音、手势等多模态输入方式分布式执行支持在多设备间协同完成复杂任务结语重新定义开发者的自动化工作流Midscene.js不仅仅是另一个自动化工具它代表了UI自动化范式的转变。通过将复杂的代码编写简化为自然语言描述开发者可以将更多精力集中在业务逻辑和创新上而不是繁琐的脚本维护。无论你是前端开发者需要自动化测试还是运营人员需要数据采集或是研究人员需要网页信息提取Midscene.js都能提供简单高效的解决方案。项目完全开源拥有活跃的社区支持正在不断演进以满足更多场景需求。现在就开始你的AI自动化之旅体验用自然语言控制数字世界的魔力。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考