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")*

相关推荐
鹏程十八少16 分钟前
4.Android 30分钟手写一个简单版shadow, 从零理解shadow插件化零反射插件化原理
android·前端·面试
亿元程序员24 分钟前
这款值68亿的游戏,你不实战一下吗?安排!
前端
摸鱼的春哥1 小时前
Agent教程15:认识LangChain(中),状态机思维
前端·javascript·后端
明月_清风1 小时前
告别遮挡:用 scroll-padding 实现优雅的锚点跳转
前端·javascript
明月_清风1 小时前
原生 JS 侧边栏缩放:从 DOM 监听到底层优化
前端·javascript
风象南8 小时前
我把大脑开源给了AI
人工智能·后端
Johny_Zhao10 小时前
OpenClaw安装部署教程
linux·人工智能·ai·云计算·系统运维·openclaw
飞哥数智坊10 小时前
我帮你读《一人公司(OPC)发展研究》
人工智能
万少10 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站12 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端