Midscene v0.14 - 新增即时操作接口和深度思考

Midscene.js 是 Web Infra 团队推出的 AI x UI 自动化框架。

从 Midscene v0.14.0 开始,我们引入了两个新功能:即时操作(Instant Actions)和深度思考(Deep Think)。

即时操作(Instant Actions)- 让交互表现更稳定

你可能已经熟悉我们的 .ai 接口。它是一个自动规划接口,用于与网页进行交互。例如,当进行搜索时,你可以这样做:

typescript 复制代码
await agent.ai('在搜索框中输入 "Headphones",按下回车键');

在接口的背后,Midscene 会调用 LLM 来规划步骤并执行它们。你可以在报告中看到整个过程。这是一个非常常见的 AI Agent运行模式。

与此同时,许多测试工程师希望有一个更快的方式来执行 UI 操作。当在 AI 模型中使用复杂 prompt 时,一些 LLM 模型可能规划出错误的步骤,或者返回元素的坐标不准确。这些不可预测的过程时常常会让人感受到挫败。

为了解决这个问题,我们引入了 aiTap(), aiHover(), aiInput(), aiKeyboardPress(), aiScroll() 接口。这些接口会直接执行指定的操作,而 AI 模型只负责底层任务,如定位元素等。使用这些接口后,整个过程可以明显更快和更可靠。

例如,上面的搜索操作可以重写为:

typescript 复制代码
await agent.aiInput('耳机', '搜索框');
await agent.aiKeyboardPress('Enter');

在报告中,你会看到现在已经没有了规划 (Planning) 过程:

使用这些接口的脚本看起来有点冗余(或者不太"智能"),但请相信,使用这些结构化的接口确实是一个节省时间的好方法,尤其是在操作已经非常明确的时候。

深度思考(Deep Think)- 让元素定位更准确

当使用 Midscene 与一些复杂的 UI 控件交互时,LLM 可能很难定位目标元素。我们引入了一个新的选项 deepThink(深度思考)到即时操作接口中。

启用 deepThink 的即时操作函数签名如下:

typescript 复制代码
await agent.aiTap('target', { deepThink: true });

deepThink 是一种策略。它会首先找到一个包含目标元素的区域,然后"聚焦"在这个区域中再次搜索元素。通过这种方式,目标元素的坐标会更准确。

让我们以 Coze.com 的工作流编辑页面为例。这个页面有许多自定义的图标在侧边栏。这对于 LLM 来说很难区分目标元素和它的周围元素。

在即时操作中使用 deepThink 后,脚本会变成这样(当然,你也可以使用 javascript 接口):

yaml 复制代码
tasks:
  - name: edit input panel
    flow:
      - aiTap: the triangle icon on the left side of the text "Input"
        deepThink: true
      - aiTap: the first checkbox in the Input form
        deepThink: true
      - aiTap: the expand button on the second row of the Input form (on the right of the checkbox)
        deepThink: true
      - aiTap: the delete button on the second last row of the Input form
        deepThink: true
      - aiTap: the add button on the last row of the Input form (second button from the right)
        deepThink: true

通过查看报告文件,你会看到 Midscene 已经找到了页面中的每个目标元素。

就像上面的例子一样,deepThink 的提示词需要遵循 编写提示词的技巧。这是确保结果稳定的关键。

deepThink 只适用于支持视觉定位的模型,如 qwen2.5-vl。如果你使用的是像 gpt-4o 这样的模型,deepThink 将无法发挥作用。

参考信息

1\] 编写提示词的技巧: [midscenejs.com/zh/promptin...](https://link.juejin.cn?target=https%3A%2F%2Fmidscenejs.com%2Fzh%2Fprompting-tips.html "https://midscenejs.com/zh/prompting-tips.html") \[2\] Midscene.js 官网: *[midscenejs.com/zh](https://link.juejin.cn?target=https%3A%2F%2Fmidscenejs.com%2Fzh "https://midscenejs.com/zh")* \[3\] GitHub - Midscene.js: *[github.com/web-infra-d...](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fweb-infra-dev%2Fmidscene "https://github.com/web-infra-dev/midscene")*

相关推荐
struggle20252 分钟前
Trinity三位一体开源程序是可解释的 AI 分析工具和 3D 可视化
数据库·人工智能·学习·3d·开源·自动化
Moment5 分钟前
面试官:ping 的详细流程是怎么样的?🙉🙉🙉
前端·后端·网络协议
天天扭码14 分钟前
前端必看 | 用EditInPlace实现B站个性签名设计
前端·javascript·dom
机器之心19 分钟前
免费用!阿里通义大模型上新,超逼真音视频生成SOTA!
人工智能
机器之心20 分钟前
「开源版GPT-4o」来了!这个17B国产模型生图效果比肩4o,还可商用
人工智能
江沉晚呤时36 分钟前
CAP 定理与 BASE 定理在 .NET Core 中的应用
java·服务器·开发语言·前端·.netcore
魔云连洲37 分钟前
用Webpack 基础配置快速搭建项目开发环境
前端·webpack·node.js
PuddingSama1 小时前
Android 视图转换工具 Matrix
android·前端·面试
OpenTiny社区1 小时前
TinyPro 1.2.0 正式发布:增加综合搜索,解决数据筛选难题,后端单测覆盖率再提升!
前端·vue.js·github
亦黑迷失1 小时前
实现 canvas 交互(元素的事件处理)
前端·typescript·canvas