尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
让AI替你点网页:Midscene.js 自然语言驱动 UI 自动化上手
让AI替你点网页Midscene.js 自然语言驱动 UI 自动化上手【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一款视觉驱动的 UI 自动化开源工具你只需用一句自然语言描述要做什么它就能驱动网页、安卓、iOS 和桌面应用完成点击、输入和数据提取全程不用写选择器。适合测试工程师、前端开发以及想自动化浏览器操作的新手。别再追着选择器跑了做过 UI 自动化的人多半都有过同一种痛苦页面一改选择器全废。图标按钮没有稳定的 classCanvas 画出来的控件压根读不到 DOM跨域 iframe 更是碰都碰不到。每上一次重构就有一批脚本跟着变红。Midscene.js 换了个思路。它不看 DOM只看截图。你把步骤用大白话写出来比如点击登录按钮它就自己盯着画面找到那个按钮再点下去。人眼能看见的它就能操作选择器这种东西从此可以不用维护。装个扩展先跑通一条指令不用搭项目装好 Chrome 扩展就能玩。它自带一个 Playground 侧边栏配置好一个多模态模型的 API Key 之后打开任意网页在侧边栏里输入一句指令回车就能看到 AI 在页面上动手。日常最常用的就三种指令执行操作点击登录按钮提取数据页面里的商品{name, price}[]断言界面页面顶部有导航栏跑通这一条你就已经体会到用说话代替写代码是什么感觉了。跟着场景走一遍把商品列表抓成一张数据表想把某个电商页的商品名称和价格都抓下来不用一行行写定位逻辑。用aiQuery告诉它你要什么结构const products await agent.aiQuery( 页面中的商品{name: string, price: number}[] );执行完products里就是一组结构化的对象直接喂给下游的表格或接口都行省掉了最烦人的解析环节。用一份 YAML 脚本跑通回归测试更省事的是把整个流程写成 YAML交给命令行工具跑。一个检查 Bing 搜索的脚本长这样page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - aiAssert: 结果中展示了天气信息命令行工具在packages/cli/里装好之后一条命令就能跑midscene ./bing-search.yaml它会自动跑完流程、输出进度最后生成一份可视化报告。你不用关心任何测试框架的搭建专注写流程本身就行。手机上跑同样的自然语言同一套写法也能驱动真机。YAML 里把page换成android或ios指向连上 adb 的设备打开地图、搜个地点、开始导航这类流程照样用自然语言写。相关能力分别在packages/android/和packages/ios/里。网页、手机、桌面走一套 API切换平台几乎不用改逻辑这是它最省心的地方。它凭什么不一样不靠 DOM靠截图定位。元素定位完全基于画面所以没有语义标记的图标按钮、Canvas 控件、跨域 iframe 都能点中。这套纯视觉的定位逻辑集中在packages/core/。一套 API 跨所有平台。网页、Android、iOS、HarmonyOS、桌面走的是同一组方法换个目标只改配置不用换语言也不用重新学一套 API。每一步都有可视化回放。跑完自动生成报告操作序列、截图、耗时一目了然哪一步出了问题翻报告就能定位不用反复复现。顺手就能用的技巧先用扩展验证再写进代码。在 Chrome 扩展里把一句指令调通再原样搬进 SDK 或 YAML省掉大量来回试错的成本。整段任务交给 aiAct关键节点用 aiAssert 兜底。大流程让它自主规划只在你真正关心的地方单独断言比全写死要稳得多。模型按任务选。简单页面用轻量多模态模型省钱复杂定位需求再上更强的模型配置统一写在.env里管理换模型只改一行。出发吧到这里你已经能看到 Midscene.js 的样子了一句人话替你把网页、手机、桌面都点一遍。想深入玩法读官方文档里的快速开始和 API 参考想直接抄作业看仓库里的示例脚本和 YAML demo有卡壳的地方去社区问一句通常很快有人回上手不难难的是把第一个流程跑通。现在就去试试吧。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

G-Helper 完整指南:3 步搞定华硕笔记本性能调校,不装 Armoury Crate

G-Helper 完整指南:3 步搞定华硕笔记本性能调校,不装 Armoury Crate

G-Helper 完整指南:3 步搞定华硕笔记本性能调校,不装 Armoury Crate 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProAr…

📅 2026/9/11 14:54:29
把 Issue 生命周期写进仓库:scientific-agent-skills 的 Markdown Issue 文档化模板与 Mermaid 根因分析

把 Issue 生命周期写进仓库:scientific-agent-skills 的 Markdown Issue 文档化模板与 Mermaid 根因分析

把 Issue 生命周期写进仓库:scientific-agent-skills 的 Markdown Issue 文档化模板与 Mermaid 根因分析 【免费下载链接】scientific-agent-skills Turn any AI agent into an AI Scientist. The #1 Agent Skills library for science, used by 190,000 scientists…

📅 2026/9/11 14:49:29
Petrel许可证云化迁移:从FLEXlm到DELFI的实战指南

Petrel许可证云化迁移:从FLEXlm到DELFI的实战指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/9/11 14:49:29
MORE NEWS

更多资讯

📰

目标检测入门:从原理到YOLO实战全解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

WezTerm 光标颜色完全掌控:深入解析 `force_reverse_video_cursor` 配置项

WezTerm 光标颜色完全掌控:深入解析 force_reverse_video_cursor 配置项 【免费下载链接】wezterm A GPU-accelerated cross-platform terminal emulator and multiplexer written by wez and implemented in Rust 项目地址: https://gitcode.com/GitHub_Trending…

📰

Vibe-Trading 数据工程实战:东方财富概念板块成分接口 dc_member 从调用到量化建模

Vibe-Trading 数据工程实战:东方财富概念板块成分接口 dc_member 从调用到量化建模 【免费下载链接】Vibe-Trading "Vibe-Trading: Your Personal Trading Agent" 项目地址: https://gitcode.com/GitHub_Trending/vi/Vibe-Trading 本文以 Vibe-Tra…

📰

G-Helper新手指南:3步找回发灰屏幕的色彩与性能

G-Helper新手指南:3步找回发灰屏幕的色彩与性能 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops with nearly the same functionality. Works with ROG Zephyrus, Flow, TUF, Strix, Scar, ProArt, Vivobook, Zenbook, Expertbo…

📰

Element Plus 暗黑模式(Dark Mode)完全指南:从 CSS 变量到源码级定制

Element Plus 暗黑模式(Dark Mode)完全指南:从 CSS 变量到源码级定制 【免费下载链接】element-plus 🎉 A Vue.js 3 UI Library made by Element team 项目地址: https://gitcode.com/GitHub_Trending/el/element-plus Ele…

📰

从聊天到干活:WorkBuddy 实战指南,把 AI 变成任务驱动的工作助手

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬