Midscene.js 与 AI 大模型的交互机制解析

📝 面试求职： 「面试试题小程序」 ，内容涵盖 测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

---

引言

在 UI 自动化测试领域，Midscene.js 通过巧妙的设计实现了与 AI 大模型的无缝对话。本文将深入解析 Midscene.js 是如何与 AI 大模型进行交互的。

▍交互的核心流程

Midscene.js 与 AI 大模型的交互主要包含三个核心场景：

1. 任务规划（Planning）

2. 元素识别（Element Recognition）

3. 数据提取（Data Extraction）

发送给 AI 的内容结构

每次与 AI 交互时，Midscene.js 会构建如下结构的提示词：

{
  role: 'system',
  content: systemPrompt  // 系统角色定义和任务目标
},
{
  role: 'user',
  content: [
    {
      type: 'image_url',
      image_url: {
        url: screenshotBase64,  // 页面截图
        detail: 'high'
      }
    },
    {
      type: 'text',
      text: userInstructionPrompt  // 用户指令和页面描述
    }
  ]
}

其中 userInstructionPrompt 包含：

- 页面尺寸信息

- 页面元素树结构

- 元素位置和内容信息

- 任务背景上下文

- 用户当前指令

AI 响应的结构化数据

任务规划响应：​​​​​​​

{
  actions: [
    {
      type: string,     // 动作类型
      locate: {         // 元素定位信息
        prompt: string, // 元素描述
        position?: {    // 坐标定位
          x: number,
          y: number
        },
        id?: string    // 元素ID定位
      },
      param: any      // 动作参数
    }
  ],
  taskWillBeAccomplished: boolean,
  furtherPlan?: {     // 后续计划
    whatHaveDone: string,
    whatToDoNext: string
  }
}

元素识别响应：​​​​​​​

{
  elements: [
    {
      id: string,     // 元素ID
      reason?: string, // 选中原因
      text?: string   // 元素文本
    }
  ],
  errors?: string[]   // 错误信息
}

▍不同模型的交互特点

通用 LLM 模型（如 GPT-4）

- 能够"看到"截图内容

- 返回元素 ID

- 需要额外脚本将 ID 映射为坐标

- 优点：通用性强

- 缺点：延迟较高，成本较高

专用模型（如 UI-TARS）

- 直接处理截图

- 直接返回执行动作和坐标

- 响应更快，成本更低

- 专门针对 UI 自动化优化

▍性能优化机制

缓存策略

Midscene.js 实现了文件级别的缓存机制：

- 缓存任务规划结果

- 缓存元素识别结果

- 不缓存 aiQuery 结果（用于验证）

缓存条件

缓存命中需满足：

1. 相同的测试文件和标题

2. 相同的包名和版本

3. 页面 URL 和尺寸一致

4. 目标元素保持不变

▍实践建议

1. 提示词编写

- 保持指令简洁明确

- 一次只做一件事

- 提供详细的元素描述

2. 性能优化

- 合理使用缓存机制

- 选择合适的模型

- 适时使用专用模型

3. 调试技巧

- 使用可视化报告

- 通过 Playground 调试

- 利用 aiQuery 验证结果

▍总结

Midscene.js 通过精心设计的交互机制，实现了与 AI 大模型的高效协作。无论是通用 LLM 还是专用模型，都能通过统一的接口进行交互，同时通过缓存机制提升性能，为 UI 自动化测试提供了强大而灵活的解决方案。

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】
​​​​
​​​​