企业官网建设流程全解析

Midscene.js：让一句自然语言完成一次 GUI 端到端测试

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene

Midscene.js 是一个面向 E2E 测试的开源 GUI Agent SDK。你用自然语言写下操作目标和校验条件，它基于屏幕截图规划并操作界面，不需要编写任何选择器。它覆盖 Web、Android、iOS、HarmonyOS 与桌面应用，适合想降低 UI 自动化维护成本的开发者和测试同学。

先看效果：AI 替你操作页面

打开任意网页，在侧边栏输入一句「点击登录按钮」，Midscene 会先在截图中认出按钮，再完成点击；输入「页面顶部显示导航栏」，它会回答是或否。每次运行还会生成一份带截图、步骤耗时、可逐步回放的可视化报告。

Web Playground：输入「Click the search bar」，AI 在 eBay 页面完成点击

快速上手：一条命令装好，一句话跑起来

想从源码跑起来，先克隆仓库并安装依赖：

git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene && pnpm install

如果只想先体验效果，最轻的路径是官方 Chrome 扩展：安装后把多模态模型配置粘贴到扩展设置中，打开任意网页即可在侧边栏输入指令。官方给出三类常用指令：交互（aiAct）、提取数据（aiQuery）、校验界面（aiAssert），无需写一行代码。

想把它接进自己的流程，也可以直接用 YAML 描述测试，保存为.yaml文件后用midscene命令执行：

page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 "今日天气" - aiAssert: 结果显示天气信息

真实场景：从文档案例里挑三个给你看

Web 表单：自动填完 GitHub 注册页

你想做什么：验证注册流程的每个字段都能正常填写并通过前端校验。怎么完成：给出一条指令「填写 GitHub 注册表单并通过表单校验，但不要提交」。结果长什么样：Midscene 依次定位每个输入框、填入内容、处理字段校验，停在提交前，并输出完整回放报告，失败时能看清卡在哪一步。

Android 真机：查询系统版本

你想做什么：不写任何 ADB 命令，直接确认设备当前的 Android/系统版本。怎么完成：在 Android Playground 输入「Open the settings to check the current android version number」，它规划出打开设置、进入设备信息页的路径。结果长什么样：左侧面板逐步展示 Planning、定位、点击等动作，右侧实时投屏出「My device」页面，最终读出 MIUI 版本号。

Android Playground：自然语言指令驱动真机进入设备信息页

iOS 下单：把咖啡单下到处置页

你想做什么：验证电商下单主流程。怎么完成：用一句中文「打开美团，帮我下单一杯 manner 超大杯冰美式，加浓少冰，到结算页面让我确认」驱动真机。结果长什么样：Midscene 完成搜索、选品、加料等操作后停在结算页等待人工确认，整个过程同样留档为可回放报告。

与传统做法的区别

定位方式：传统工具依赖 CSS 选择器或无障碍树，纯图标按钮、<canvas>画布、跨域 iframe 对它们来说是不可见的；Midscene 只看截图，人眼能看到的元素它都能定位。

维护成本：选择器方案下，页面一重构用例就要跟着改；Midscene 不追踪任何标记，样式和类名变化不会让用例失效，校验依据的也是「看起来对不对」而不是「节点存不存在」。

上手门槛：写选择器要求你熟悉页面结构和自动化 API；用 Midscene，你只需要能写出会告诉同事的那句话，用例本身就是可读的中文或英文。

实战建议：四条能直接照做的经验

1. 目标元素较小或与周围元素容易混淆时，给aiTap、aiAct开启deepLocate，多一次定位调用能显著提高命中率。
2. 多步骤、带条件分支的复杂任务，开启aiAct的deepThink，以更多模型调用换取稳定性。
3. 扩展运行时报Cannot access a chrome-extension:// URL of different extension，是其他扩展注入页面导致的冲突：从开发者工具找到对应扩展 ID，在扩展管理页禁用后刷新重试。
4. 使用本地 Ollama 模型遇到 403 时，设置环境变量OLLAMA_ORIGINS="*"再重试；另外用agent.setAIActContext()提前交代业务背景（如遇到弹窗先关闭、价格单位是美元），能减少 AI 跑偏。

Chrome 扩展侧边栏：输入自然语言指令并查看定位结果

继续探索

• 核心视觉定位与模型调用实现：packages/core/src/ai-model/
• 中文文档的快速开始与各平台上手指南：apps/site/docs/zh/quick-start.mdx

项目正推出新一代 Test Runner（Beta），以自然语言为主线、可编程 Node 为辅，支持多环境并发与标准化报告。

Midscene.js 把 UI 测试从「维护选择器」变成了「描述目标」，你下一步可以装好 Chrome 扩展，用一句指令跑通第一个真实页面。

测试报告：每一步的截图、耗时与模型输出都可回放

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene