Midscene.js：用AI视觉模型轻松实现跨平台智能自动化

Midscene.js用AI视觉模型轻松实现跨平台智能自动化【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene你是否曾经为繁琐的UI自动化测试而头疼面对动态网页、移动端应用、桌面软件传统的基于DOM的自动化工具总是力不从心。现在这一切都将改变——Midscene.js通过AI视觉模型让机器真正看懂屏幕实现跨平台智能自动化。痛点场景为什么传统自动化工具总让你失望想象一下这些场景你花了半天时间写的Selenium脚本因为网页结构微调就完全失效移动端应用更新后所有元素定位器都需要重新编写Canvas游戏界面中传统工具根本无法识别和操作元素跨平台测试需要维护多套完全不同的自动化框架这些正是Midscene.js要解决的痛点。它采用纯视觉路线让AI成为你的眼睛和手指只需告诉它要做什么剩下的交给视觉语言模型。核心价值AI视觉驱动的革命性自动化Midscene.js的核心创新在于将视觉语言模型与自动化执行引擎深度集成。不同于传统工具依赖DOM结构它直接分析屏幕截图理解界面元素的视觉特征和功能语义。三大核心优势真正的跨平台能力Web浏览器支持Chrome、Firefox、Safari等主流浏览器移动设备Android和iOS原生应用自动化桌面应用Windows、macOS、Linux跨平台支持特殊界面Canvas、游戏界面、嵌入式系统自然语言交互用人类语言描述操作点击登录按钮、在搜索框输入关键词AI自主规划操作序列无需编写复杂定位器智能理解界面上下文适应动态变化零代码快速上手Chrome扩展即开即用Playground交互式环境可视化操作报告Bridge模式通过本地SDK控制桌面浏览器实现无侵入式自动化操作五分钟快速入门立即体验AI自动化魔力方法一Chrome扩展零代码体验最简单的方式是通过Chrome扩展快速开始从Chrome应用商店安装Midscene.js扩展打开任意网页点击扩展图标在输入框中描述你想要的操作观看AI自动执行你的指令方法二开发者快速集成如果你更喜欢代码方式几行JavaScript就能开始// 安装核心包 npm install midscene/web // 创建自动化代理 import { createWebAgent } from midscene/web; const agent await createWebAgent({ model: qwen3-vl, // 使用开源视觉模型 browserType: chromium }); // 开始自动化操作 await agent.goto(https://example.com); await agent.aiTap(登录按钮); await agent.aiType(用户名, 用户名输入框); await agent.aiType(密码123, 密码输入框); await agent.aiTap(登录确认按钮);方法三克隆完整项目深度体验# 克隆项目到本地 git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene # 安装依赖 npm install # 启动Android Playground cd apps/android-playground npm run dev # 或者启动Web Playground cd apps/playground npm run dev核心功能详解从基础到进阶视觉驱动的元素定位Midscene.js最大的突破是视觉定位技术。当需要操作界面元素时// 传统方式依赖脆弱的DOM选择器 await page.click(#login-btn); // 元素ID一变就失效 // Midscene方式视觉识别语义理解 await agent.aiTap(登录按钮); // AI识别按钮位置并点击 await agent.aiType(搜索关键词, 搜索框); // 识别输入框并输入 await agent.aiSwipe(从屏幕底部向上滑动); // 手势操作智能规划与决策AI不仅能执行单个操作还能自主规划复杂任务// 复杂任务自动完成购物流程 await agent.aiAct(在电商网站搜索无线耳机按价格从低到高排序选择第一个商品加入购物车); // 条件判断智能处理不同情况 const hasLoginPrompt await agent.aiBoolean(页面是否显示登录提示); if (hasLoginPrompt) { await agent.aiTap(稍后登录); } else { await agent.aiTap(开始浏览); } // 循环处理批量操作列表 const items await agent.aiQuery(商品列表包含名称和价格); for (const item of items) { if (item.price 100) { await agent.aiTap(商品${item.name}); await agent.aiTap(加入购物车); } }跨平台统一API无论操作什么平台API保持高度一致// Web浏览器自动化 const webAgent await createWebAgent(); await webAgent.goto(https://shop.example.com); await webAgent.aiTap(购物车图标); // Android设备自动化 const androidAgent await createAndroidAgent(); await androidAgent.launchApp(com.example.app); await androidAgent.aiTap(设置按钮); // iOS设备自动化 const iosAgent await createIOSAgent(); await iosAgent.aiSwipe(从屏幕右侧向左滑动); await iosAgent.aiType(Hello, 消息输入框);Android Playground通过网页界面远程控制Android设备支持自然语言指令操作实战案例解决真实业务问题案例1电商价格监控自动化class PriceMonitor { constructor() { this.agent null; this.priceHistory new Map(); } async setup() { this.agent await createWebAgent({ model: ui-tars, useCache: true }); } async monitorProduct(url, productName) { await this.agent.goto(url); // 智能搜索商品 await this.agent.aiTap(搜索框); await this.agent.aiType(productName); await this.agent.aiTap(搜索按钮); // 提取价格信息 const productInfo await this.agent.aiQuery(第一个商品的价格、名称和库存状态); // 价格变化检测 const priceChange this.calculatePriceChange(productName, productInfo.price); if (Math.abs(priceChange) 10) { // 价格变化超过10% await this.sendAlert(${productName}价格变化${priceChange}%); } return productInfo; } async batchMonitor(products) { const results []; for (const product of products) { try { const info await this.monitorProduct(product.url, product.name); results.push({ ...product, ...info }); } catch (error) { console.error(监控${product.name}失败, error); } } return results; } }案例2跨平台应用回归测试class CrossPlatformTester { constructor() { this.testSuites { login: this.testLogin.bind(this), search: this.testSearch.bind(this), checkout: this.testCheckout.bind(this) }; } async runAllTests() { const platforms [web, android, ios]; const results {}; for (const platform of platforms) { console.log(开始测试${platform}平台...); results[platform] {}; for (const [testName, testFunc] of Object.entries(this.testSuites)) { try { const agent await this.createAgent(platform); const success await testFunc(agent); results[platform][testName] success ? 通过 : 失败; } catch (error) { results[platform][testName] 错误${error.message}; } } } return this.generateReport(results); } async testLogin(agent) { await agent.aiTap(登录入口); await agent.aiType(testexample.com, 邮箱输入框); await agent.aiType(password123, 密码输入框); await agent.aiTap(登录按钮); const loginSuccess await agent.aiBoolean(显示登录成功或欢迎回来); return loginSuccess; } }案例3无障碍辅助自动化class AccessibilityAssistant { constructor() { this.commandMap new Map([ [打开微信, () this.openWeChat()], [发送消息, (params) this.sendMessage(params)], [阅读屏幕, () this.readScreenContent()] ]); } async processVoiceCommand(command) { // 解析语音命令 const { action, params } this.parseCommand(command); // 执行对应操作 if (this.commandMap.has(action)) { return await this.commandMap.get(action)(params); } else { // 使用AI理解自然语言指令 return await this.agent.aiAct(command); } } async readScreenContent() { // 提取屏幕上的文本信息 const content await this.agent.aiQuery(屏幕上所有可见文本内容); // 转换为语音输出 return this.textToSpeech(content); } async openWeChat() { await this.agent.aiTap(微信图标); await this.agent.aiTap(通讯录); await this.agent.aiTap(最近联系人); return 微信已打开显示最近联系人; } }Playground交互式测试环境支持实时调试和自然语言指令执行进阶技巧提升自动化效率与稳定性智能缓存策略Midscene.js内置智能缓存大幅提升重复任务执行速度const agent await createWebAgent({ useCache: true, cacheDir: ./midscene-cache, cacheTTL: 3600, // 缓存1小时 cacheStrategy: aggressive // 激进缓存模式 }); // 缓存命中率监控 const cacheStats agent.getCacheStats(); console.log(缓存命中率${cacheStats.hitRate}%); console.log(平均响应时间${cacheStats.avgResponseTime}ms);错误处理与重试机制async function robustOperation(operation, options {}) { const { maxRetries 3, delay 1000, onRetry (error, attempt) console.log(第${attempt}次重试${error.message}) } options; for (let attempt 1; attempt maxRetries; attempt) { try { return await operation(); } catch (error) { if (attempt maxRetries) { throw new Error(操作失败已重试${maxRetries}次${error.message}); } onRetry(error, attempt); // 等待后重试 await new Promise(resolve setTimeout(resolve, delay * attempt)); // 可选刷新界面状态 if (error.type element_not_found) { await agent.refreshScreenshot(); } } } } // 使用重试机制 await robustOperation( () agent.aiTap(可能不稳定的按钮), { maxRetries: 5, onRetry: (error, attempt) { console.log(按钮点击失败第${attempt}次重试...); // 可以在这里添加额外的恢复逻辑 } } );性能优化技巧批量操作减少AI调用async function batchProcess(agent, operations) { // 先收集所有需要的信息 const screenshots await Promise.all( operations.map(op agent.captureArea(op.region)) ); // 批量分析 const analyses await Promise.all( screenshots.map((screenshot, index) agent.analyzeImage(screenshot, operations[index].description) ) ); // 批量执行 for (const analysis of analyses) { if (analysis.confidence 0.85) { await agent.executeAction(analysis.action); } } }模型选择策略const modelStrategies { 简单任务: qwen3-vl, // 开源模型成本低 复杂界面: ui-tars, // 字节优化模型准确率高 实时交互: gemini-3-flash, // 响应速度快 多语言场景: doubao-1.6-vision // 多语言支持 }; function selectOptimalModel(task) { if (task.complexity low) return qwen3-vl; if (task.language ! zh) return doubao-1.6-vision; if (task.requiresRealTime) return gemini-3-flash; return ui-tars; }资源管理class AgentPool { constructor() { this.pool new Map(); this.maxIdleTime 300000; // 5分钟 } async getAgent(platform, config) { const key ${platform}-${JSON.stringify(config)}; if (!this.pool.has(key)) { const agent await this.createAgent(platform, config); this.pool.set(key, { agent, lastUsed: Date.now(), usageCount: 0 }); } const entry this.pool.get(key); entry.lastUsed Date.now(); entry.usageCount; // 定期清理空闲代理 this.cleanupIdleAgents(); return entry.agent; } cleanupIdleAgents() { const now Date.now(); for (const [key, entry] of this.pool.entries()) { if (now - entry.lastUsed this.maxIdleTime) { entry.agent.cleanup(); this.pool.delete(key); } } } }可视化调试与报告系统Midscene.js提供了强大的可视化调试工具让自动化过程透明可控。实时操作报告每次执行都会生成详细的交互式报告// 生成HTML报告 const report await agent.generateReport({ title: 电商自动化测试报告, include: [screenshots, timeline, metrics], outputPath: ./reports/test-run.html }); // 或者在Playground中实时查看 await agent.openPlayground(); // 打开内置调试界面时间轴回放操作报告可视化展示自动化执行过程支持时间轴回放和步骤分析报告系统提供时间轴视图按时间顺序展示所有操作屏幕截图每个步骤的界面状态性能指标响应时间、成功率等数据错误分析失败步骤的详细诊断内置调试工具在apps/report/src/components/目录中你可以找到完整的报告组件// 自定义报告组件 import { Timeline, DetailPanel, ScreenshotViewer } from midscene/report; function CustomReport({ executionData }) { return ( div classNamereport-container Timeline steps{executionData.steps} / DetailPanel details{executionData.details} / ScreenshotViewer screenshots{executionData.screenshots} / /div ); }企业级部署与集成Docker容器化部署# Midscene.js Docker部署示例 FROM node:18-alpine # 安装系统依赖 RUN apk add --no-cache \ chromium \ ffmpeg \ tzdata # 设置环境变量 ENV CHROME_BIN/usr/bin/chromium-browser ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOADtrue ENV NODE_ENVproduction # 创建工作目录 WORKDIR /app # 复制依赖文件 COPY package*.json ./ RUN npm ci --onlyproduction # 复制应用代码 COPY . . # 创建非root用户 RUN addgroup -g 1001 -S nodejs \ adduser -S midscene -u 1001 # 设置权限 RUN chown -R midscene:nodejs /app USER midscene # 启动应用 CMD [node, dist/index.js]CI/CD集成示例# GitHub Actions配置 name: Midscene Automation Tests on: push: branches: [ main ] pull_request: branches: [ main ] jobs: e2e-tests: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - name: Setup Node.js uses: actions/setup-nodev3 with: node-version: 18 - name: Install dependencies run: npm ci - name: Install Chrome run: | sudo apt-get update sudo apt-get install -y chromium-browser - name: Run Midscene tests run: | npm run test:e2e npm run test:android npm run test:ios - name: Upload test reports uses: actions/upload-artifactv3 with: name: midscene-reports path: | reports/ test-results/ - name: Deploy to test environment if: success() run: | npm run deploy:staging监控与告警class MonitoringSystem { constructor() { this.metrics { successRate: 1.0, averageLatency: 0, totalOperations: 0, failedOperations: 0 }; } async monitorHealth() { const healthChecks [ this.checkModelAvailability(), this.checkBrowserConnectivity(), this.checkStorageAccess(), this.checkNetworkLatency() ]; const results await Promise.allSettled(healthChecks); const status { timestamp: new Date().toISOString(), overall: healthy, checks: {}, metrics: this.metrics }; for (const [index, result] of results.entries()) { status.checks[check_${index}] result.status; if (result.status rejected) { status.overall degraded; await this.sendAlert(健康检查${index}失败, warning); } } return status; } async sendAlert(message, severity warning) { // 集成到监控系统 console.log([${severity.toUpperCase()}] ${new Date().toISOString()}: ${message}); if (severity critical) { // 发送紧急通知 await this.notifyOnCall(message); } } }社区生态与扩展自定义技能开发Midscene.js支持自定义技能开发在packages/core/src/skill/中创建// 自定义电商比价技能 export class PriceComparisonSkill { async execute(agent, params) { const { productName, websites } params; const results []; for (const website of websites) { await agent.goto(website); await agent.aiType(productName, 搜索框); await agent.aiTap(搜索按钮); const productInfo await agent.aiQuery(第一个商品的价格、名称和评分); results.push({ website, name: productInfo.name, price: parseFloat(productInfo.price.replace(¥, )), rating: productInfo.rating, timestamp: new Date() }); } return this.analyzeResults(results); } analyzeResults(results) { const sorted results.sort((a, b) a.price - b.price); return { cheapest: sorted[0], mostExpensive: sorted[sorted.length - 1], averagePrice: results.reduce((sum, r) sum r.price, 0) / results.length, recommendations: sorted.slice(0, 3), // 推荐前3个 allResults: results }; } }MCP服务集成将AI操作暴露为MCP工具与其他AI系统集成// 在packages/mcp/src/server.ts中定义MCP工具 const midsceneTools [ { name: click_element, description: 点击屏幕上的指定元素, inputSchema: { type: object, properties: { description: { type: string, description: 元素的描述如登录按钮、搜索框 }, confidence: { type: number, description: 置信度阈值0-1之间, default: 0.8 } }, required: [description] }, execute: async (params) { return await agent.aiTap(params.description, params.confidence); } }, { name: extract_text, description: 从屏幕中提取文本信息, inputSchema: { type: object, properties: { area: { type: string, description: 区域描述如页面标题、商品价格区域 }, format: { type: string, enum: [text, json, table], default: text } }, required: [area] }, execute: async (params) { return await agent.aiQuery(params.area, { format: params.format }); } } ];与现有测试框架集成// 集成到Playwright测试框架 import { test, expect } from playwright/test; import { createWebAgent } from midscene/web; test(混合测试传统定位AI视觉, async ({ page }) { // 传统Playwright操作 await page.goto(https://example.com/login); // Midscene AI视觉操作 const agent await createWebAgent(); await agent.attachToPage(page); // 混合使用两种方式 await page.waitForLoadState(networkidle); await agent.aiTap(登录按钮); // AI填写表单 await agent.aiType(testexample.com, 邮箱输入框); await agent.aiType(password123, 密码输入框); // 传统方式验证 await expect(page).toHaveURL(/dashboard/); // AI方式验证 const isLoggedIn await agent.aiBoolean(显示用户已登录状态); expect(isLoggedIn).toBeTruthy(); // 截图对比 const screenshot await agent.captureScreenshot(); expect(screenshot).toMatchSnapshot(logged-in-state.png); }); test(Canvas游戏自动化测试, async ({ page }) { const agent await createWebAgent(); await agent.attachToPage(page); // 传统工具无法操作Canvas但Midscene可以 await agent.goto(https://example.com/game); await agent.aiTap(开始游戏按钮); await agent.aiTap(角色选择区域); await agent.aiTap(确认按钮); // 验证游戏状态 const score await agent.aiQuery(当前得分); expect(parseInt(score)).toBeGreaterThan(0); });最佳实践与性能调优1. 模型选择指南使用场景推荐模型特点适用条件简单任务Qwen3-VL开源免费响应快预算有限简单界面复杂界面UI-TARS准确性高支持复杂布局企业级应用高精度要求实时交互Gemini-3-Flash低延迟响应迅速交互式应用实时操作多语言Doubao-1.6-Vision多语言支持国际化应用高精度Gemini-3-Pro准确性最高关键业务场景2. 缓存策略优化const optimizedAgent await createWebAgent({ useCache: true, cacheConfig: { strategy: adaptive, // 自适应策略 ttl: { simple: 300, // 简单操作缓存5分钟 complex: 1800, // 复杂操作缓存30分钟 critical: 3600 // 关键操作缓存1小时 }, maxSize: 1GB, // 最大缓存大小 compression: true // 启用压缩 } }); // 手动管理缓存 await optimizedAgent.clearCache(); // 清空缓存 await optimizedAgent.warmupCache([常见操作序列]); // 预热缓存 const cacheStats await optimizedAgent.getCacheStats(); // 获取统计信息3. 错误处理模式class ResilientAutomation { constructor(agent) { this.agent agent; this.retryConfig { maxAttempts: 3, backoffFactor: 2, initialDelay: 1000 }; } async executeWithResilience(operation, context {}) { let lastError; for (let attempt 1; attempt this.retryConfig.maxAttempts; attempt) { try { return await operation(); } catch (error) { lastError error; if (attempt this.retryConfig.maxAttempts) { break; } // 根据错误类型采取不同恢复策略 await this.recoverFromError(error, context); // 指数退避 const delay this.retryConfig.initialDelay * Math.pow(this.retryConfig.backoffFactor, attempt - 1); await this.delay(delay); } } throw this.enhanceError(lastError, context); } async recoverFromError(error, context) { switch (error.type) { case element_not_found: // 元素未找到刷新页面重试 await this.agent.refresh(); break; case timeout: // 超时增加等待时间 await this.agent.wait(2000); break; case network_error: // 网络错误检查连接 await this.checkConnectivity(); break; default: // 通用恢复重新截图 await this.agent.refreshScreenshot(); } } }开始你的智能自动化之旅Midscene.js为UI自动化带来了革命性的变化。无论你是测试工程师、开发者还是自动化爱好者都可以通过以下步骤开始第一步选择适合你的入门方式零代码体验安装Chrome扩展立即开始浏览器自动化快速集成通过npm安装midscene/web几行代码集成到现有项目完整项目克隆仓库探索所有高级功能第二步从简单任务开始// 最简单的自动化脚本 const agent await createWebAgent(); await agent.goto(https://baidu.com); await agent.aiType(Midscene.js, 搜索框); await agent.aiTap(百度一下按钮); const results await agent.aiQuery(搜索结果列表); console.log(找到结果, results);第三步逐步深入探索packages/目录中的各个模块查看apps/中的示例应用阅读docs/中的详细文档参与社区讨论分享你的用例第四步贡献与反馈Midscene.js是一个开源项目欢迎贡献提交Issue报告问题提交Pull Request改进代码分享你的使用案例参与文档翻译总结智能自动化的未来已来Midscene.js通过AI视觉模型彻底改变了UI自动化的游戏规则。它不再依赖脆弱的DOM结构而是让机器真正看懂界面实现真正的跨平台自动化。无论你是要自动化Web测试、移动端应用、桌面软件还是构建复杂的业务工作流Midscene.js都能提供强大而灵活的解决方案。从简单的点击操作到复杂的业务流程从单平台测试到跨平台部署Midscene.js都能轻松应对。现在就开始你的智能自动化之旅让AI成为你的得力助手释放生产力专注于更有价值的创造性工作【免费下载链接】midsceneAI-powered, vision-driven UI automation for every platform.项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考