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

Midscene.js完整教程：让AI成为你的浏览器操作员

news 2026/4/24 21:28:19

Midscene.js完整教程：让AI成为你的浏览器操作员

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

你是否曾经幻想过，只需要用简单的语言告诉电脑"帮我填写这个表单"或"在这个网站上搜索商品"，它就能自动完成所有操作？Midscene.js正是这样一个革命性的工具，它让AI成为你的浏览器操作员，通过视觉驱动的方式实现跨平台UI自动化。

为什么你需要Midscene.js？

想象一下这些场景：每天需要重复填写相同的表单、测试网站功能需要大量手动操作、或者需要在多个设备间同步操作。传统自动化工具要么需要编写复杂代码，要么无法处理动态变化的界面。Midscene.js通过AI视觉理解能力，解决了这些痛点。

核心功能价值矩阵

功能模块	解决的问题	适用场景
视觉驱动自动化	无需依赖DOM结构，直接"看懂"屏幕	动态网页、移动应用、桌面软件
自然语言控制	用简单指令替代复杂代码	非技术人员快速上手、快速原型开发
跨平台支持	统一API支持多种平台	Web、Android、iOS、HarmonyOS、桌面应用
智能缓存机制	减少重复AI调用，提升效率	批量操作、重复任务执行
实时操作反馈	可视化操作过程和结果	调试、教学演示、结果验证

快速上手：5分钟完成第一个自动化任务

环境准备

首先，确保你已安装Node.js环境。然后通过以下命令安装Midscene.js：

npm install @midscene/web

或者使用Yarn：

yarn add @midscene/web

基础示例：自动搜索商品

让我们从一个简单的电商搜索任务开始。假设你想在eBay上搜索"Headphones"：

import { WebAgent } from '@midscene/web'; // 创建代理实例 const agent = new WebAgent(); // 打开目标网站 await agent.goto('https://www.ebay.com'); // 使用自然语言指令搜索商品 await agent.aiAction('在搜索框中输入"Headphones"并点击搜索按钮'); // 获取搜索结果 const results = await agent.aiQuery('获取所有商品标题和价格'); console.log('搜索结果:', results);

就是这么简单！Midscene.js会自动识别搜索框的位置，输入文字，点击搜索按钮，然后解析搜索结果。

Midscene.js网页自动化界面，左侧为操作面板，右侧为浏览器窗口

进阶技巧：掌握核心功能

1. 移动端自动化

Midscene.js不仅支持网页，还能控制Android和iOS设备。以下是连接Android设备的示例：

import { AndroidAgent } from '@midscene/android'; // 连接Android设备 const agent = new AndroidAgent(); await agent.connect(); // 在设备上执行操作 await agent.aiAction('打开设置应用'); await agent.aiAction('查看设备信息'); const deviceInfo = await agent.aiQuery('获取MIUI版本和存储信息'); console.log('设备信息:', deviceInfo);

Midscene.js Android控制界面，左侧为操作步骤，右侧为设备屏幕投影

2. 智能断言和验证

自动化测试中，验证操作结果至关重要。Midscene.js提供强大的断言功能：

// 验证页面是否包含特定元素 const hasLoginButton = await agent.aiAssert('页面上应该有登录按钮'); if (hasLoginButton) { console.log('登录按钮存在'); } // 验证文本内容 const priceText = await agent.aiQuery('获取商品价格文本'); await agent.assertTextContains(priceText, '$');

3. 操作录制与回放

Midscene.js可以录制你的操作并生成可重用的脚本：

// 开始录制 await agent.startRecording(); // 执行一系列操作 await agent.click('搜索框'); await agent.type('Midscene.js'); await agent.click('搜索按钮'); // 停止录制并保存 const recording = await agent.stopRecording(); await agent.saveRecording('search-midscene.yaml');

Midscene.js操作录制与回放功能演示

实战场景解决方案

场景一：电商价格监控

假设你需要监控多个电商平台的商品价格变化：

// 监控电商价格变化脚本 async function monitorPrices() { const agent = new WebAgent(); const products = [ { name: 'iPhone 15', url: 'https://www.amazon.com/dp/B0CHX1W1XY' }, { name: 'Samsung Galaxy', url: 'https://www.bestbuy.com/site/samsung-galaxy-s24' } ]; for (const product of products) { await agent.goto(product.url); const priceInfo = await agent.aiQuery('获取商品价格和库存状态'); // 保存数据并发送通知 await savePriceData(product.name, priceInfo); if (priceInfo.discount > 20) { await sendNotification(`${product.name}降价超过20%!`); } } }

场景二：表单批量填写

处理大量表单提交任务时，Midscene.js可以显著提升效率：

async function fillForms(formDataList) { const agent = new WebAgent(); for (const formData of formDataList) { await agent.goto(formData.url); // 智能填写各个字段 for (const [field, value] of Object.entries(formData.fields)) { await agent.aiAction(`在${field}字段中输入"${value}"`); } // 提交表单 await agent.aiAction('点击提交按钮'); // 验证提交结果 const success = await agent.aiAssert('应该显示提交成功消息'); console.log(`表单${formData.id}提交${success ? '成功' : '失败'}`); } }

场景三：跨平台测试

测试应用在不同平台的兼容性：

async function crossPlatformTest() { // 测试网页版 const webAgent = new WebAgent(); await webAgent.goto('https://app.example.com'); const webResult = await testLoginFlow(webAgent); // 测试Android版 const androidAgent = new AndroidAgent(); await androidAgent.connect(); await androidAgent.openApp('com.example.app'); const androidResult = await testLoginFlow(androidAgent); // 对比结果 compareResults(webResult, androidResult); }

避坑指南：常见问题解决

问题1：AI无法识别界面元素

症状：Midscene.js无法找到或识别指定的界面元素。

解决方案：

确保屏幕截图清晰可见
使用更具体的描述，如"右上角的蓝色登录按钮"而非"登录按钮"

调整截图质量设置：

await agent.aiAction('点击登录按钮', { screenshotOptions: { quality: 90, maxWidth: 1920 } });

问题2：操作执行缓慢

症状：自动化任务执行速度慢，影响效率。

优化策略：

启用智能缓存：
```
await agent.enableCache(true);
```
批量处理相似操作
减少不必要的截图次数

问题3：Android设备连接失败

症状：无法连接到Android设备执行操作。

排查步骤：

确保USB调试已开启（设置 > 开发者选项 > USB调试）
检查设备授权状态
使用正确的设备ID连接

Android开发者选项中USB调试设置界面

高级配置与优化

模型选择策略

Midscene.js支持多种AI模型，根据任务需求选择合适的模型：

// 简单任务使用轻量级模型 await agent.setModel('qwen-vl-mini'); // 复杂界面识别使用高性能模型 await agent.setModel('ui-tars-1.5'); // 自定义模型配置 await agent.setModelConfig({ provider: 'openai', model: 'gpt-4-vision-preview', apiKey: process.env.OPENAI_API_KEY });

环境变量配置

正确配置环境变量可以提升开发体验：

// 设置环境变量 process.env.MIDSCENE_MODEL = 'ui-tars-1.5'; process.env.OPENAI_API_KEY = 'your-api-key-here'; process.env.MIDSCENE_CACHE_DIR = './.midscene-cache';

Midscene.js环境变量配置界面

集成到现有工作流

与Playwright集成

Midscene.js可以与Playwright无缝集成，增强现有测试框架：

import { PlaywrightAgent } from '@midscene/web/playwright'; import { chromium } from 'playwright'; const browser = await chromium.launch(); const page = await browser.newPage(); const agent = new PlaywrightAgent(page); // 使用Midscene.js增强Playwright测试 await agent.goto('https://example.com'); await agent.aiAction('填写登录表单'); await agent.aiAssert('登录成功');

生成测试报告

Midscene.js可以生成详细的测试报告，便于团队协作和问题追踪：

// 配置测试报告 await agent.enableReporting({ outputDir: './reports', format: 'html', // 支持html、json、yaml格式 includeScreenshots: true, includeTimeline: true }); // 执行测试并生成报告 const report = await agent.runTest('用户登录流程'); console.log('测试报告已生成:', report.path);