Midscene.js重新定义跨平台UI自动化的智能视觉方案【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene你是否曾为编写和维护UI自动化测试而头疼当DOM结构变化时选择器失效当应用使用Canvas渲染时传统工具束手无策当需要测试跨域iframe或原生应用时现有方案力不从心。Midscene.js采用革命性的视觉驱动方法让UI自动化回归本质——像人类一样看界面用自然语言描述操作。架构核心视觉感知引擎的三大模块Midscene.js的核心创新在于完全摒弃了对DOM结构的依赖转而采用纯视觉识别技术。这一架构变革带来了前所未有的灵活性和稳定性。模块一多模态AI规划器Midscene.js内置的多模态AI规划器能够理解自然语言指令并将之转化为精确的UI操作序列。与传统基于选择器的自动化工具不同Midscene的规划器直接分析屏幕截图识别视觉元素的位置和状态。// 传统方式依赖选择器 await page.click(#submit-button); // Midscene方式视觉识别 await agent.aiAct(点击提交按钮);这种视觉驱动的识别方式带来了显著优势✅ 无视DOM结构变化 ✅ 支持Canvas和自定义渲染 ✅ 跨平台一致性模块二跨平台执行引擎Midscene.js的跨平台能力是其另一大亮点。通过统一的API接口开发者可以编写一次自动化脚本在Web、Android、iOS、HarmonyOS等多个平台上运行。图Android Playground界面展示左侧为自然语言指令序列右侧为设备屏幕实时预览技术实现上Midscene为每个平台提供了专门的适配器Web平台基于Chrome DevTools ProtocolAndroid平台集成scrcpy和ADBiOS平台通过WebDriverAgent实现桌面应用支持Windows、macOS、Linux模块三智能错误处理与重试机制传统UI自动化工具在元素定位失败时会直接报错而Midscene.js采用了更智能的策略。当目标元素无法找到时系统会上下文理解分析当前屏幕状态理解用户意图替代方案生成寻找可能的替代操作路径智能重试在合理范围内调整识别参数工作流程展示从自然语言到自动化执行流程一指令解析与规划用户输入自然语言指令如打开设置应用并检查Android版本号。Midscene.js的AI规划器首先解析指令意图然后生成详细的操作步骤# Midscene YAML配置示例 steps: - action: 打开设置应用 type: aiAct - action: 找到并点击关于手机 type: aiTap - query: 读取Android版本号 type: aiQuery output: androidVersion流程二视觉定位与执行系统截取当前屏幕通过视觉模型识别界面元素。与传统工具不同Midscene不依赖任何代码层面的选择器而是基于像素级的视觉特征进行匹配。图Playground环境中的视觉识别过程左侧显示UI上下文右侧展示识别结果流程三结果验证与报告生成每个操作步骤都会生成详细的执行报告包括操作前的屏幕截图识别到的目标元素位置执行结果状态执行耗时统计技术原理浅析视觉驱动的创新实现视觉识别引擎Midscene.js的核心技术突破在于其视觉识别引擎。该引擎基于多模态大模型能够语义理解理解界面元素的视觉语义如按钮、输入框、列表项上下文感知考虑元素在界面中的相对位置和视觉关系状态识别判断元素的交互状态如启用/禁用、选中/未选中跨平台抽象层为了实现真正的跨平台支持Midscene设计了统一的抽象层┌─────────────────────────────────────────┐ │ Midscene Core API │ ├─────────────────────────────────────────┤ │ Web Adapter │ Android Adapter │ │ ┌─────────────┼─────────────┐ │ │ │ iOS Adapter │ Desktop │ │ │ └─────────────┴─────────────┘ │ └─────────────────────────────────────────┘每个适配器都实现了相同的接口确保上层应用代码无需关心底层平台差异。对比分析Midscene与传统方案的差异维度传统UI自动化工具Midscene.js视觉方案元素定位依赖CSS选择器、XPath纯视觉识别无视DOM结构维护成本高选择器随UI变化失效低视觉识别稳定跨平台支持需要重写测试代码一套代码多平台运行Canvas支持有限或需要特殊处理原生支持无需额外配置学习曲线需要学习特定API自然语言零门槛上手调试体验控制台日志可视化回放报告Midscene.js的核心优势在于将UI自动化从代码驱动转变为视觉驱动这不仅是技术实现的变化更是思维模式的革新。进阶应用场景超越基础自动化场景一复杂业务流程自动化Midscene.js特别适合处理包含多个步骤的复杂业务流程。例如电商订单处理// 自动化电商订单处理流程 await agent.aiAct(登录到管理员后台); await agent.aiAct(进入订单管理页面); await agent.aiAct(筛选出待处理的订单); const orderCount await agent.aiQuery(待处理订单数量); for (let i 0; i orderCount; i) { await agent.aiAct(处理当前订单); await agent.aiAct(确认订单处理完成); }场景二视觉回归测试传统的像素对比测试对UI微小变化过于敏感而Midscene.js支持语义级的视觉验证// 验证关键视觉元素存在且正确 await agent.aiAssert(页面顶部显示公司Logo); await agent.aiAssert(主按钮显示为蓝色); await agent.aiAssert(错误提示信息为红色); await agent.aiAssert(购物车图标显示商品数量);场景三跨平台一致性验证对于需要在多个平台上保持UI一致性的应用Midscene.js提供了高效的验证方案# 跨平台UI一致性测试 platforms: [web, android, ios] testCases: - name: 登录界面验证 steps: - assert: 用户名输入框可见 - assert: 密码输入框可见 - assert: 登录按钮可用图Bridge模式允许通过本地终端远程控制浏览器实现脚本与手动操作的完美结合实施指南快速开始你的视觉自动化之旅第一步环境准备与安装Midscene.js支持多种部署方式从简单的Chrome扩展到完整的开发环境# 克隆项目 git clone https://gitcode.com/GitHub_Trending/mid/midscene cd mid/midscene # 安装依赖 pnpm install # 构建Chrome扩展 cd apps/chrome-extension pnpm run build第二步配置AI模型Midscene.js支持多种多模态模型包括开源选项// 配置模型参数 const agent await createAgent({ model: qwen2.5-vl-7b-instruct, // 或使用其他支持模型 apiKey: process.env.OPENAI_API_KEY, temperature: 0.1 // 控制输出的确定性 });第三步编写第一个自动化脚本从简单的Web自动化开始import { createAgent } from midscene/web; const agent await createAgent(); await agent.goto(https://example.com); await agent.aiAct(在搜索框中输入Midscene.js); await agent.aiAct(点击搜索按钮); const results await agent.aiQuery(搜索结果列表); console.log(找到结果:, results);第四步生成可视化报告Midscene.js会自动生成详细的执行报告// 生成HTML报告 const report await agent.generateReport({ format: html, includeScreenshots: true, showTimeline: true }); // 保存报告 await fs.writeFile(automation-report.html, report);生态整合与现有工具链的无缝对接Midscene.js的设计理念是增强而非替代因此提供了多种集成方案与Playwright/Puppeteer集成import { playwrightAdapter } from midscene/web; const browser await playwright.chromium.launch(); const page await browser.newPage(); const agent await createAgent({ adapter: playwrightAdapter(page) }); // 使用Midscene的视觉能力增强Playwright await agent.aiAct(点击这个看起来像提交按钮的元素);与CI/CD管道结合# GitHub Actions配置示例 name: Visual UI Tests on: [push, pull_request] jobs: visual-test: runs-on: ubuntu-latest steps: - uses: actions/checkoutv4 - uses: actions/setup-nodev4 - run: npm install midscene/web - run: npm test -- --reportermidscene与监控系统联动Midscene.js可以定期执行关键业务流程及时发现界面问题// 定时监控关键功能 setInterval(async () { try { await agent.aiAct(验证首页加载正常); await agent.aiAssert(所有核心功能按钮可见); console.log(系统状态正常); } catch (error) { // 发送告警 sendAlert(UI界面异常, error.message); } }, 5 * 60 * 1000); // 每5分钟检查一次资源指引与最佳实践官方文档资源快速开始指南docs/en/quick-start.mdxAPI参考文档docs/en/api.mdx平台适配指南docs/en/android-getting-started.mdx模型配置策略docs/en/model-strategy.mdx示例代码库Web自动化示例packages/web-integration/demo/Android测试脚本packages/android/demo/iOS自动化案例packages/ios/examples/YAML配置模板packages/core/src/yaml/最佳实践建议渐进式采用从简单的验证任务开始逐步扩展到复杂业务流程混合策略将视觉自动化与传统自动化结合使用模型选择根据任务复杂度选择合适的AI模型错误处理充分利用Midscene的智能重试机制报告优化定制化报告内容便于团队协作图Midscene Chrome扩展界面展示自然语言指令输入和实时执行反馈结语视觉自动化的未来已来Midscene.js代表了UI自动化测试的新方向——从基于代码的选择器到基于视觉的智能识别。这种转变不仅降低了自动化测试的维护成本更极大地扩展了自动化的适用范围。真正的UI自动化应该像人类一样工作看到什么就操作什么。Midscene.js让这一理念成为现实。无论你是前端开发者需要测试Web应用还是移动开发者需要验证多平台一致性或是QA工程师需要建立健壮的自动化测试套件Midscene.js都提供了强大而灵活的解决方案。现在就开始你的视觉自动化之旅体验无需维护选择器、无视UI变化、真正智能的UI自动化方案。从今天起让AI成为你的眼睛和双手专注于更有价值的创造性工作。【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考