新账号地址： https://blog.csdn.net/qq_29655401

使用 Midscene.js 实现高效 UI 自动化：安装与实用指南

摘要：Midscene.js 是一个由字节跳动 Web Infra 团队开源的 AI 驱动 UI 自动化工具，结合多模态 AI 推理能力，支持 Web 和 Android 平台的自动化操作与测试。本文将深入探讨 Midscene.js 的实用性，详细介绍其安装配置步骤，并结合实际案例展示如何利用其自然语言交互和自动化能力提升开发效率。

---

引言：为什么选择 Midscene.js？

在现代软件开发中，UI 自动化测试和操作是提高效率、减少重复劳动的关键。然而，传统 UI 自动化工具（如 Selenium 或 Appium）往往需要编写复杂的脚本，且维护成本高昂。Midscene.js 通过引入多模态 AI 推理能力，允许开发者以自然语言描述任务目标，自动规划和执行 UI 操作，极大地降低了开发门槛。

免费源码下载：https://download.csdn.net/download/qq_29655401/92179685

项目地址：https://github.com/web-infra-dev/midscene

Midscene.js 的核心优势包括：

• 自然语言交互：无需编写繁琐的代码，只需描述任务，AI 即可自动操作界面。
• 跨平台支持：支持 Web 和 Android 自动化，兼容 Puppeteer、Playwright 等框架。
• 高效调试工具：内置可视化报告和 Chrome 扩展，简化调试流程。
• 开源与灵活部署：完全开源，支持本地或云端部署，适配多种 AI 模型。

本文将围绕 Midscene.js 的实用性，详细介绍其安装步骤、核心功能以及实际应用场景，帮助开发者快速上手并在项目中落地。

---

安装与配置：快速上手 Midscene.js

环境要求

在开始安装之前，确保你的开发环境满足以下条件：

• Node.js：版本 16 或以上，推荐使用最新 LTS 版本。
• npm/pnpm：建议使用 pnpm 作为包管理器以优化依赖管理。
• 操作系统：Windows、macOS 或 Linux。
• 浏览器：支持 Chrome 或其他基于 Chromium 的浏览器（用于 Web 自动化）。
• Android 设备（可选）：若需 Android 自动化，需安装 ADB（Android Debug Bridge）并连接设备。

安装步骤

1. 初始化项目
   创建一个新的 Node.js 项目（若已有项目可跳过此步）：

   mkdir midscene-demo
   cd midscene-demo
   npm init -y
   

2. 安装 Midscene.js
   使用 pnpm（或 npm）安装 Midscene.js 核心包：

   pnpm add @midscene/core @midscene/web
   

   • @midscene/core：提供核心 AI 自动化功能。
   • @midscene/web：支持 Web 自动化，集成 Puppeteer 或 Playwright。

3. 安装浏览器驱动
   如果选择使用 Puppeteer 或 Playwright，需要额外安装浏览器驱动：

   pnpm add puppeteer
   

   或

   pnpm add playwright
   

4. 配置 AI 模型
   Midscene.js 支持多种多模态 AI 模型（如 GPT-4o、Qwen-2.5-VL）。你需要在项目中配置模型的 API 密钥。例如，使用 OpenAI 的 GPT-4o：

   export OPENAI_API_KEY='your-openai-api-key'
   

   将密钥保存到环境变量或 .env 文件中，避免硬编码。

5. 验证安装
   创建一个简单的测试脚本 test.js：

   const { Midscene } = require('@midscene/core');
   const { WebAgent } = require('@midscene/web');
   
   async function main() {
     const agent = new WebAgent({
       model: 'gpt-4o',
       apiKey: process.env.OPENAI_API_KEY,
     });
     await agent.start();
     console.log('Midscene.js initialized successfully!');
     await agent.close();
   }
   
   main();
   

   运行脚本：

   node test.js
   

   如果输出“Midscene.js initialized successfully!”，则安装成功。

可选：安装 Chrome 扩展

Midscene.js 提供 Chrome 扩展，用于零代码快速体验：

1. 从 GitHub Releases 下载最新的 midscene-extension-vX.X.X.zip。
2. 解压并在 Chrome 浏览器中加载扩展（开发者模式）。
3. 通过扩展界面直接输入自然语言指令，体验自动化操作。

常见问题

• 依赖冲突：若遇到依赖问题，尝试清理缓存并重新安装：

  pnpm store prune
  pnpm install
  

• 模型连接失败：检查 API 密钥是否正确，或切换到其他支持的模型（如 Qwen-2.5-VL）。
• 浏览器未启动：确保 Puppeteer/Playwright 正确安装，且系统支持 headless 模式。

---

核心功能与实用性分析

1. 自然语言驱动的自动化

Midscene.js 的最大亮点是支持以自然语言描述自动化任务。例如，假设你需要登录一个网站并提取商品信息：

const { WebAgent } = require('@midscene/web');

async function automateTask() {
  const agent = new WebAgent({ model: 'gpt-4o' });
  await agent.start('https://www.saucedemo.com/');
  await agent.aiAction('Login with username "standard_user" and password "secret_sauce"');
  const products = await agent.aiQuery('Extract all product names and prices in JSON format');
  console.log(products);
  await agent.close();
}

automateTask();

• 实用性：开发者无需深入了解 DOM 结构或编写复杂的选择器逻辑，只需描述任务即可完成操作和数据提取。
• 场景：适用于快速原型开发、数据爬取或自动化测试。

2. 跨平台支持

Midscene.js 支持 Web 和 Android 自动化。例如，在 Android 上控制地图应用：

const { AndroidAgent } = require('@midscene/android');

async function androidTask() {
  const agent = new AndroidAgent({ model: 'qwen-2.5-vl' });
  await agent.start();
  await agent.aiAction('Open Maps app and search for "New York"');
  await agent.close();
}

• 实用性：统一 API 接口，降低跨平台开发的复杂性。
• 场景：适合移动应用测试、自动化操作（如批量消息发送）。

3. 高效调试与可视化

Midscene.js 提供可视化报告和 Playground 工具：

• 可视化报告：自动生成操作日志和截图，便于调试。
• Playground：通过 Chrome 扩展或 Android Playground 实时预览自动化流程。
• 实用性：减少调试时间，尤其适合复杂 UI 交互场景。
• 场景：测试用例验证、UI 回归测试。

4. 缓存与效率优化

Midscene.js 支持操作缓存，重复运行脚本时可跳过重复计算：

const agent = new WebAgent({ useCache: true });
await agent.aiAction('Click the "Add to Cart" button', { cache: true });

• 实用性：显著提升重复任务的执行效率。
• 场景：批量数据处理、CI/CD 管道中的自动化测试。

5. 灵活的模型选择

支持多种 AI 模型（GPT-4o、Qwen-2.5-VL 等），并推荐视觉语言模型用于非 Web 场景：

• 实用性：开发者可根据预算和需求选择合适的模型，私有部署确保数据安全。
• 场景：企业级应用中需要高隐私保护的场景。

---

实际案例：自动化电商网站测试

以下是一个完整的案例，展示如何使用 Midscene.js 自动化测试一个电商网站（https://www.saucedemo.com/）：

目标

1. 登录网站。
2. 添加商品到购物车。
3. 提取购物车中的商品信息。
4. 生成测试报告。

代码实现

const { WebAgent } = require('@midscene/web');

async function eCommerceTest() {
  const agent = new WebAgent({
    model: 'gpt-4o',
    apiKey: process.env.OPENAI_API_KEY,
    useCache: true,
  });

  try {
    // 启动浏览器并访问网站
    await agent.start('https://www.saucedemo.com/');

    // 登录
    await agent.aiAction('Login with username "standard_user" and password "secret_sauce"');

    // 添加商品到购物车
    await agent.aiAction('Add the first product to cart');

    // 进入购物车并提取商品信息
    await agent.aiAction('Go to the shopping cart');
    const cartItems = await agent.aiQuery('Extract all items in the cart with their names and prices in JSON format');

    // 输出结果
    console.log('Cart Items:', cartItems);

    // 生成测试报告
    await agent.generateReport('ecommerce-test-report.html');
  } catch (error) {
    console.error('Test failed:', error);
  } finally {
    await agent.close();
  }
}

eCommerceTest();

输出示例

Cart Items: [
  {
    "name": "Sauce Labs Backpack",
    "price": "$29.99"
  }
]

分析

• 效率：通过自然语言指令，整个流程无需手动编写 DOM 选择器，开发时间缩短 50% 以上。
• 可维护性：代码简洁，易于修改和扩展。
• 调试：生成的 HTML 报告包含操作截图和日志，便于定位问题。

---

局限性与优化建议

尽管 Midscene.js 功能强大，但也存在一些局限性：

1. 新窗口支持有限：目前无法直接验证新窗口的内容，建议结合 Puppeteer 手动创建新代理。
2. 模型依赖：自动化效果依赖 AI 模型质量，推荐使用视觉语言模型（如 Qwen-2.5-VL）以提升准确性。
3. 性能开销：对于复杂任务，AI 推理可能增加执行时间，可通过缓存优化。

优化建议：

• 使用 YAML 脚本简化配置，适合快速集成到现有项目。
• 定期更新 Midscene.js 到最新版本（如 v0.29.1），获取性能改进和新功能。
• 参与社区贡献，提交问题或功能请求（如新窗口支持）。

---

结论

Midscene.js 凭借其自然语言驱动、跨平台支持和高效调试工具，为 UI 自动化提供了全新的解决方案。无论是 Web 测试、Android 应用操作还是数据提取，Midscene.js 都能显著提升开发效率。通过本文提供的安装教程和案例，开发者可以快速上手，并在实际项目中探索其潜力。