Midscene.js教学案例集：从入门到精通实战项目

Midscene.js是一个创新的AI驱动的自动化框架，让AI成为你的浏览器操作员。本文将通过一系列实战案例，从基础安装到高级应用，帮助你全面掌握Midscene.js的核心功能和使用技巧。

1. 环境准备与基础安装

1.1 项目概述

Midscene.js（项目路径：GitHub_Trending/mid/midscene）是一个视觉驱动的AI自动化工具，支持Web、Android和iOS平台的自动化操作。其核心特点是通过自然语言描述目标和步骤，让AI自动规划并执行用户界面操作。

1.2 安装与配置

Midscene.js提供了多种安装方式，包括Chrome扩展、NPM包和源码编译。以下是通过NPM安装的基本步骤：

# 克隆仓库
git clone https://gitcode.com/GitHub_Trending/mid/midscene.git
cd midscene

# 安装依赖
npm install

# 构建项目
npm run build

核心CLI模块代码位于packages/cli/src/index.ts，你可以通过修改此文件自定义命令行行为。

2. 核心概念与基础API

2.1 三种核心API

Midscene.js提供三类核心API，满足不同自动化需求：

• 交互API：与用户界面交互的方法，如点击、输入等
• 数据提取API：从用户界面提取数据的方法
• 工具API：辅助功能，如aiAssert()、aiLocate()、aiWaitFor()等

详细API文档可参考官方文档。

2.2 两种自动化模式

Midscene.js支持两种自动化模式，适用于不同场景：

2.2.1 自动规划模式

AI自动规划步骤并执行，适用于简单场景：

await aiAction('点击所有记录，如果记录包含"completed"文本则跳过');

2.2.2 工作流模式

将复杂逻辑拆分为多个步骤，提高稳定性：

const recordList = await agent.aiQuery('string[], 记录列表')
for (const record of recordList) {
  const hasCompleted = await agent.aiBoolean(`检查记录"${record}"是否包含"completed"文本`)
  if (!hasCompleted) {
    await agent.aiTap(record)
  }
}

工作流模式的详细使用方法可参考使用JavaScript优化AI自动化代码。

3. 实战案例：Web自动化

3.1 Chrome扩展快速体验

Midscene.js提供了Chrome扩展，可快速体验Web自动化功能。扩展的核心代码位于apps/chrome-extension/src/components/playground/index.tsx。

使用步骤：

1. 在Chrome浏览器中打开chrome://extensions/
2. 启用"开发者模式"
3. 点击"加载已解压的扩展程序"，选择apps/chrome-extension目录

3.2 网页数据提取案例

以下案例展示如何使用Midscene.js从网页提取数据：

import { PlaygroundSDK } from '@midscene/playground';

// 创建SDK实例
const sdk = new PlaygroundSDK({
  type: 'local-execution',
  agent: agent,
});

// 提取产品列表
const products = await sdk.aiQuery('string[], 提取页面上所有产品名称');
console.log('产品列表:', products);

// 提取价格信息
const prices = await sdk.aiQuery('number[], 提取页面上所有产品价格');
console.log('价格列表:', prices);

Chrome扩展中的Playground组件实现了类似功能，详见apps/chrome-extension/src/components/playground/index.tsx。

4. 实战案例：移动应用自动化

4.1 Android自动化

Midscene.js通过ADB控制Android设备，实现自动化操作。核心代码位于packages/android/src/agent.ts。

简单示例：

// 连接Android设备
const agent = new AndroidAgent();
await agent.connect();

// 打开地图应用
await agent.aiAction('打开地图应用');

// 搜索地点
await agent.aiAction('搜索"北京天安门"');

4.2 iOS自动化

iOS自动化通过iOS Simulator实现，核心代码位于packages/ios/src/agent.ts。使用方法与Android类似，但需要配置iOS开发环境。

5. 高级应用：自定义Playground

Midscene.js提供了可定制的Playground组件，方便开发和测试自动化脚本。以下是自定义Playground的示例代码，基于apps/playground/src/App.tsx修改：

import { PlaygroundSDK } from '@midscene/playground';
import { UniversalPlayground } from '@midscene/visualizer';

function CustomPlayground() {
  // 创建SDK实例
  const playgroundSDK = new PlaygroundSDK({
    type: 'remote-execution',
    serverUrl: 'http://localhost:3000',
  });

  return (
    <UniversalPlayground
      playgroundSDK={playgroundSDK}
      config={{
        showContextPreview: true,
        layout: 'vertical',
        showVersionInfo: true,
      }}
      branding={{
        title: '我的自定义Playground',
        version: '1.0.0',
      }}
    />
  );
}

6. 调试与报告

Midscene.js提供可视化报告功能，帮助调试自动化脚本。报告生成代码位于packages/core/src/report.ts。

使用报告功能：

// 启用报告生成
const agent = new WebAgent({
  generateReport: true,
  reportPath: './reports',
});

// 执行自动化操作
await agent.aiAction('完成登录流程');

// 报告已自动生成在./reports目录下

报告查看器位于apps/report/src/App.tsx，可通过npm run report启动。

7. 总结与进阶学习

通过本文的案例，你已经掌握了Midscene.js的基本使用方法。要进一步提升，可以：

1. 探索tests目录中的测试案例
2. 参与社区项目，如midscene-ios或Midscene-Python
3. 学习官方博客中的高级技巧

Midscene.js持续发展，建议定期查看README.md获取最新信息。

如果本教程对你有帮助，请点赞、收藏并关注项目更新！下一期我们将介绍如何将Midscene.js与AI模型集成，实现更智能的自动化。