企业官网建设流程全解析

5 分钟跑通第一个 AI UI 自动化测试：Midscene.js 实战上手指南

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

Midscene.js 是一个面向 E2E 测试的 GUI Agent，靠截图就能让 AI 操作界面，不用你维护 CSS 选择器或 XPath，用自然语言描述操作即可。本文带你从安装 Chrome 扩展到跑通第一个界面自动化测试，适合没接触过 Midscene 的开发者阅读。

🚀 5 分钟快速体验

最轻的上手路径是 Chrome 扩展，不用搭任何项目。从 Chrome Web Store 安装 Midscene 扩展，打开设置页，填入模型配置这几项：

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

扩展和脚本用的是同一组配置字段。保存后打开任意网页，浏览器右侧会出现 Midscene 侧边栏，输入"点击登录按钮"，AI 就会理解当前页面、找到按钮并执行。

如何写出第一条自然语言指令

Midscene 把指令分成三类，各对应一个 API，选对类型比写得多花哨更重要。

• 规划并交互aiAct："搜索耳机，把第一件商品加入购物车"，AI 自己拆解步骤执行。
• 提取数据aiQuery："页面中的商品，{name: string, price: number}[]"，返回结构化数据。
• 检查界面aiAssert："页面顶部显示导航栏"，不成立时直接抛错。

第一次用时，把元素的位置和视觉特征写进描述里，比如"右上角的购物车图标"，定位会更稳。

如何从浏览器接入脚本：集成 Playwright

在扩展里验证过的指令，可以原样搬进脚本。安装依赖后，把 Playwright 的 page 交给 PlaywrightAgent：

// npm i -D @midscene/web playwright tsx const agent = new PlaywrightAgent(page); await agent.aiAct('type "Headphones" in search box, hit Enter');

想让脚本直接操作你桌面上的 Chrome（带着已登录的 cookie），可以开 Bridge 模式，由终端 SDK 连接扩展接管浏览器，详见 Playwright 集成文档。

如何用 YAML 写一个自动化流程

只想跑个流程，不想维护完整测试工程，就写一份.yaml文件，每一步一行自然语言：

page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 "今日天气"

结构细节见 YAML 脚本文档，同一份写法在 Web、Android、桌面端都能跑。

一个真实场景串讲

你想做什么：在 eBay 搜 "Headphones"，看第一件商品的名称和价格。

怎么告诉它：Playground 侧边栏里输入一句"type 'Headphones' in search box, hit Enter"。

它做了什么：Midscene 截图，让模型规划步骤，定位搜索框、输入、回车。结果出来后，用aiWaitFor等商品列表出现，再用aiQuery把名称和价格抽成 JSON 打印出来。整个过程还会生成一份 HTML 报告，每一步操作、每张截图都能回放，排查失败原因时不用翻日志。

常见问题

不写代码能用吗？能。Chrome 扩展就是零代码 Playground，交互、数据提取、界面检查靠输入自然语言就能体验。

AI 点偏了或者找不到元素怎么办？对较小或容易混淆的元素，在aiTap里启用deepLocate，多一次模型调用换定位精度。

只支持网页吗？不是，同一套 API 覆盖 Android、iOS、HarmonyOS 和桌面端，各配一个 Playground。

什么时候该用、什么时候别用

• 需要断言"用户实际看到的东西"（颜色、高亮、布局）时用，这些 DOM 里看不到。
• UI 频繁改版、不想每次追着改选择器时用。
• 纯后端的单次请求、固定接口调用别用：每次视觉操作都过模型调用，成本和延迟都高于直接定位。

Midscene.js 的价值在于把 UI 测试从"维护选择器"变成"写需求"：在 Chrome 扩展里验证过指令，就能原样搬进脚本复用。想继续深入，读一下快速开始就够上手了。

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