当前位置：首页 > news >正文

Midscene.js：零代码AI自动化，5分钟搞定跨平台UI测试

news 2026/8/2 21:33:16

Midscene.js：零代码AI自动化，5分钟搞定跨平台UI测试

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

还在为繁琐的UI测试和重复操作烦恼吗？Midscene.js 是一款革命性的AI驱动UI自动化工具，让你用自然语言描述就能控制任何平台——从浏览器到移动端，再到桌面应用。告别复杂的代码和脆弱的选择器，迎接真正的视觉驱动自动化新时代。🚀

🌟 为什么你需要Midscene.js？

传统的UI自动化工具依赖DOM结构或可访问性树，每次页面重构都可能导致测试失败。Midscene.js 采用完全不同的思路——基于视觉识别和AI理解，像真人一样"看"屏幕并执行操作。

传统工具 vs Midscene.js 对比

对比维度	传统自动化工具	Midscene.js AI自动化
技术门槛	需要编程和选择器知识	零代码，自然语言操作
维护成本	页面变化导致脚本失效	AI自动适应UI变化
覆盖范围	受限于DOM结构	支持任何可见元素
跨平台支持	通常只支持Web	Web、Android、iOS、桌面全支持

🎯 三大核心功能，满足不同场景需求

1. 自然语言自动化：像对话一样测试

Midscene.js 最强大的功能就是自然语言驱动测试。你不需要编写复杂的代码，只需要用简单的指令描述操作：

点击操作："点击登录按钮"、"选择第三个选项"
输入操作："在搜索框输入'Midscene教程'"
验证操作："检查页面是否显示'成功'提示"

实际应用场景：假设你需要测试电商网站的购买流程，传统方法需要编写数十行代码，而Midscene.js只需要：

"打开购物网站"
"搜索iPhone 15"
"点击第一个商品"
"加入购物车"
"验证购物车数量增加"

AI会自动理解你的意图并执行所有操作，同时生成详细的测试报告。

2. 桥接模式：本地脚本与浏览器的完美结合

桥接模式浏览器控制让你可以通过本地终端直接控制浏览器，实现脚本与手动操作的无缝切换：

// 简单几行代码就能控制浏览器 const agent = new AgentOverChromeBridge(); await agent.connectCurrentTab(); await agent.ai('搜索Midscene.js教程并点击第一个结果');

桥接模式的优势：

保持浏览器状态：Cookies、登录状态、插件配置全部保留
人机协作：自动化过程中可随时手动介入
环境隔离：不影响正常浏览体验
灵活切换：脚本控制和手动操作随意切换

3. Playground环境：实时调试与验证

Midscene.js 提供交互式Playground环境，让你在安全的环境中测试和调试自动化脚本：

Playground核心功能：

实时反馈：立即看到操作结果
错误调试：快速定位问题所在
脚本录制：自动记录手动操作生成脚本
多平台支持：Web、Android、iOS统一界面

📱 跨平台自动化：一站式解决方案

Android设备自动化

Midscene.js 支持完整的Android自动化测试，从系统设置到应用操作，全部可以通过自然语言控制：

Android自动化场景：

应用测试：安装、卸载、功能验证
系统操作：网络设置、蓝牙连接、权限管理
数据操作：联系人管理、短信发送、文件传输
性能监控：CPU使用率、内存占用、电池状态

iOS设备自动化

同样强大的iOS自动化能力，支持iPhone和iPad设备的全面控制：

iOS自动化特色：

系统级操作：控制设置、通知、权限
应用测试：App Store下载、应用内购买测试
多设备同步：批量操作多台iOS设备
真机测试：支持USB连接的真实设备

🛠️ 5分钟快速上手指南

第一步：安装与配置

安装Chrome扩展：

访问Chrome应用商店搜索"Midscene"
点击"添加到Chrome"完成安装
或从源码构建：git clone https://gitcode.com/GitHub_Trending/mid/midscene

配置AI模型： Midscene.js 支持多种AI模型，包括OpenAI、Ollama等。只需设置环境变量：

export MIDSCENE_OPENAI_API_KEY="your-api-key" export MIDSCENE_OPENAI_BASE_URL="https://api.openai.com/v1"

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

打开目标网页：访问你想要自动化的网站
启动Midscene扩展：点击浏览器工具栏中的Midscene图标
输入指令：在侧边栏中输入自然语言指令
执行操作：点击"Run"按钮，看AI如何工作

第三步：进阶功能探索

录制回放功能：

开启录制模式
手动执行一次完整流程
Midscene自动生成可复用的YAML脚本
随时回放执行，无需重复操作

批量处理能力：

// 同时处理多个任务 const tasks = [ { url: "https://site1.com", action: "采集数据" }, { url: "https://site2.com", action: "验证功能" }, { url: "https://site3.com", action: "执行测试" } ]; await Promise.all(tasks.map(async (task) => { const agent = new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(task.url); await agent.ai(task.action); }));

🔧 常见问题与解决方案

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

解决方案：

确保Chrome浏览器版本是最新的
检查是否有其他扩展冲突
尝试重新加载扩展或重启浏览器
查看扩展的错误日志

Q2：AI响应慢或不准确？

优化建议：

尝试不同的AI模型提供商
使用更明确的指令描述
启用缓存功能减少重复请求
将复杂任务拆分为多个简单步骤

Q3：跨平台测试遇到问题？

排查步骤：

确保设备连接正常（Android需开启USB调试）
检查网络连接状态
验证设备权限设置
查看详细错误日志定位问题

Q4：如何集成到CI/CD流程？

集成方案：

# GitHub Actions配置示例 name: E2E Tests on: [push] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 - run: npm install @midscene/web - run: midscene ./tests/e2e.yaml

🚀 最佳实践与技巧

1. 编写高效的指令

避免模糊描述：

❌ "点击那个按钮"
✅ "点击蓝色的登录按钮"
✅ "点击右上角的用户头像"

使用具体位置：

❌ "填写表单"
✅ "在用户名输入框输入'testuser'"
✅ "在密码输入框输入'password123'"

2. 利用条件判断处理复杂场景

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"

3. 创建可复用的脚本模板

将常用操作保存为模板，实现一键复用：

# 登录模板 name: "通用登录模板" variables: username: "{{username}}" password: "{{password}}" steps: - action: waitForSelector selector: "input[type='text']" - action: type text: "{{username}}" - action: type selector: "input[type='password']" text: "{{password}}" - action: click selector: "button[type='submit']"