企业官网建设流程全解析

Midscene 新手指南：用自然语言完成 E2E 测试的 GUI Agent

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

Midscene 是一个面向 E2E 测试的开源 GUI Agent（图形界面智能体）。它只看截图、不读页面代码，由多模态大模型理解界面后替你点击、输入、断言。测试用例写成一句自然语言，页面重构后不用追着改选择器。它适合前端开发、测试工程师，以及想自动操作网页和 App 的人。

它能帮你做什么

• 前端开发，页面重构后回归：你不再需要维护一堆#login-btn式选择器。用例写"点击登录按钮"，Midscene 从截图中定位元素，样式和类名怎么改都不影响用例。
• 测试工程师，跑一条跨页下单流程：登录、搜索、加购、确认价格这些步骤，用一句aiAct描述即可，它会自己规划步骤、处理中间的弹窗和跳转。
• 产品或运营，验证"用户看到的样子"：颜色对不对、布局错不错、数据渲染全不全，这类问题 DOM 工具回答不了，Midscene 按截图断言，答的就是用户看到的。

核心功能

自然语言操作：aiAct

aiAct接收一句目标描述，自动完成"观察—规划—定位—执行"，直到目标达成。适合多步骤、有分支的流程，例如：

await agent.aiAct( '搜索耳机，将第一件商品加入购物车，并确认购物车数量变为 1' );

视觉断言与数据提取：aiAssert / aiQuery

aiAssert('页面顶部显示导航栏')条件不成立时直接抛错，错误信息里附模型给出的原因。aiQuery('商品列表，{name: string, price: number}[]')能从截图里提取结构化数据，连表格、<canvas>里的内容都能读。API 职责的详细解释见 基本概念。

YAML 脚本：一份文件跑完整流程

不写测试框架也能跑自动化，一个.yaml文件描述页面和步骤，用内置 CLI 即可执行：

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

非程序同事也能读懂这种用例。更多写法参考 YAML 脚本文档。

可回放的可视化报告

每次运行都会生成一份 HTML 报告：左侧是每步的规划、定位、耗时，右侧按时间轴回放截图。用例失败时直接打开报告定位到出错那一步，不用翻日志。

一套 API 覆盖多个平台

Web、Android、iOS、HarmonyOS、桌面应用，接口一致，换平台只换驱动方式。

五分钟上手 🚀

1. 准备模型：Midscene 依赖一个能定位 UI 元素的多模态模型（如 Qwen、豆包 Seed、UI-TARS，可自托管）。在 支持的模型与配置 里按供应商复制一组环境变量，包含 Base URL、API Key、模型名和模型家族 4 项。
2. 装 Chrome 扩展：从 Chrome 商店安装 Midscene 扩展，这是官方 Playground（试玩场），无需搭建项目。
3. 粘贴配置：打开浏览器侧边栏，点设置图标，把上一步的配置粘进去保存。
4. 跑第一条指令：打开任意网页，在侧边栏输入"点击登录按钮"，点 Run。看到页面上出现定位框和操作动画，就算跑通了。

前 3 步的详细步骤和常见问题，见 快速开始指南。

进阶技巧

• 给复杂任务加深度：aiAct支持deepThink（强化任务拆解）和deepLocate（小元素或多元素易混时提高定位精度），用{ deepThink: true, deepLocate: true }传入即可，代价是多几次模型调用、慢一点。
• Bridge 模式接管已登录浏览器：在扩展里开启 Bridge Mode，本地 SDK 就能连上你当前这个已登录、带 Cookie 的浏览器标签页，脚本和手工操作共用同一会话，登录态不用再模拟。
• 用环境变量配 SDK：走 SDK 时把配置写成环境变量即可：

MIDSCENE_MODEL_BASE_URL="https://ark.cn-beijing.volces.com/api/v3" MIDSCENE_MODEL_API_KEY="你的Key" MIDSCENE_MODEL_NAME="doubao-seed-2-1-turbo-260628" MIDSCENE_MODEL_FAMILY="doubao-seed"

横向对比

常见问题

必须用某家指定模型吗？不用。官方列出 Qwen、豆包 Seed、GLM、Gemini、UI-TARS 等多个家族，开源模型可以自托管。选型逻辑见模型策略文档，配置页给出每家现成的环境变量。

比选择器慢很多，能优化吗？能。固定且简单的操作用即时交互 API（aiTap、aiInput）只定位一个元素就执行；把aiAct留给多步骤、有分支的流程。这是官方推荐的性能取舍。

除了网页还能控制什么？只要能截图的界面：Android、iOS、HarmonyOS 真机或模拟器、Windows/macOS/Linux 桌面，甚至自定义程序。核心引擎源码在 packages/core/，各平台包在 packages 目录下，想接自定义界面可参考 integrate-with-any-interface 文档。

写在最后

Midscene 把"定位元素"这件事从代码问题变成了截图问题，用例维护成本、视觉断言能力、平台覆盖都是传统方案给不了的。慢一点是真实代价，换来的是用例能像文档一样被读懂、被长期维护。

建议你先按"五分钟上手"跑通 Chrome 扩展，再挑一条现有回归用例改写成aiAct，效果就一目了然了。

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