企业官网建设流程全解析

Midscene AI自动化实战指南：5步让AI接管你的浏览器和手机

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

想让AI替你登录网站、填完表单、把整个流程点到底，最后还要验证结果对不对——这就是 Midscene AI自动化 能干的事。它不靠CSS选择器找元素，而是像人一样"看屏幕"，从截图里理解界面，执行"搜索耳机"这样的自然语言指令。同一套 Agent API 还能用在 Android 和 iOS 上。下面几分钟带你跑通第一条自动化指令，再接进真实测试项目。

首次跑通：5步完成Web自动化

先装命令行工具，需要 Node 20.19+、22.12+ 或 24+：

npm i -g @midscene/cli

再在运行目录下创建.env配置模型，四行即可，注意没有export前缀：

MIDSCENE_MODEL_BASE_URL="https://your-model-service/v1" MIDSCENE_MODEL_API_KEY="your-api-key" MIDSCENE_MODEL_NAME="your-model-name" MIDSCENE_MODEL_FAMILY="your-model-family"

然后写一个 YAML 脚本，保存为bing-search.yaml，六行描述"打开必应、搜索天气、断言结果"：

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

接着一条命令执行它，控制台会输出 HTML 报告路径，打开就能看到执行细节：

midscene ./bing-search.yaml

完全不想写脚本的话，装一个 Midscene Chrome 扩展，在任意网页的侧边栏里直接输入指令就能体验 🚀

这条链路其实由四类能力拼成，拆开看你会更清楚什么时候该用哪个。

四种能力：操作、断言、提取、预演

视觉操作aiAct接收一个目标并自主规划，适合多步骤任务；视觉断言aiAssert描述期望外观即可校验颜色、布局、高亮是否正确；数据提取aiQuery把屏幕上的内容变成结构化数据。三者的最小长这样：

await agent.aiAct('搜索耳机，将第一件商品加入购物车'); await agent.aiAssert('选中的套餐有蓝色边框和勾号'); const items = await agent.aiQuery('{itemTitle: string, price: number}[]');

第四种是Playground 预演：在浏览器里零代码试跑上面三类指令，指令调通后原样粘进脚本，省掉反复改提示词的试错成本：

能力清楚了，下面用两个差异很大的场景把它们过一遍。

实战一：Web数据提取

目标：打开 eBay，搜索耳机，拿到商品列表和价格，并断言左侧有分类过滤器。

操作：安装@midscene/web和playwright，把已有的 Playwright page 交给PlaywrightAgent即可：

const browser = await chromium.launch({ headless: true }); const page = await browser.newPage(); await page.goto('https://www.ebay.com'); const agent = new PlaywrightAgent(page); await agent.aiAct('Type "Headphones" in the search box, hit Enter'); await agent.aiWaitFor('there is at least one headphone item on page'); const items = await agent.aiQuery('{itemTitle: string, price: number}[]'); await agent.aiAssert('There is a category filter on the left');

结果：items就是标题加价格的数组，全程没写一个选择器，断言直接看布局。集成细节见 packages/web-integration/。

实战二：Android操作

目标：在真机上打开地图应用，搜索"杭州西湖"。

1. 手机开启 USB 调试，adb devices确认能列出设备；
2. 写脚本，全程不需要选择器：

const devices = await getConnectedDevices(); const agent = new AndroidAgent(new AndroidDevice(devices[0].udid)); await agent.aiAct('打开地图应用'); await agent.aiInput('搜索框', { value: '杭州西湖' }); await agent.aiTap('搜索按钮');

3. 更稳的做法是先跑npx --yes @midscene/android-playground：镜像上指令验证通过，脚本里行为完全一致。

结果：设备镜像实时显示每一步执行进度，报告里还留着每步截图。想把它放进已有测试工程，只需在配置里改一行。

进阶：加一行reporter，给现有Playwright用例统一报告

如果项目里已经有 Playwright 测试用例，不必推倒重来——在playwright.config.ts里加一个 reporter：

reporter: [ ['list'], ['@midscene/web/playwright-reporter', { type: 'merged' }], ],

为什么用type: 'merged'：多个用例汇进一份 HTML 报告，定位失败更快；报告体积过大时改成'html-and-external-assets'让截图存成独立文件，但那样必须把报告目录用 HTTP 服务起来再打开。报告支持时间线回放，还可以用report-tool把多份报告合并成一份汇总：

跑的过程中遇到报错，先对一下这几个高频坑。

排错与延伸

• Node版本不受支持：CLI 报Unsupported Node.js version时，升级到 20.19+、22.12+ 或 24+ 后重装。
• .env 不生效：文件必须放在工具的运行目录下，变量名不带export前缀。
• Chrome 扩展冲突：看到Cannot access a chrome-extension:// URL of different extension，通常是别的扩展冲突——在开发者工具里找到页面注入的chrome-extension://iframe 或 script，禁用对应扩展后重试。
• 模型配置统一按KEY=VALUE每行一条粘贴到设置里：

延伸入口：

• 中文文档（模型配置、平台指南、YAML 脚本）：apps/site/docs/zh/
• 核心引擎与报告生成：packages/core/
• Android Agent 实现：packages/android/src/agent.ts

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