尧图网页设计 
Midscene.js 快速上手指南5 步从模型配置到真机跑通 AI 自动化测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一款由 GUI Agent 驱动的 E2E 测试框架你用自然语言描述任务它截图分析界面后自动完成点击、输入和断言结束后生成可回放的 HTML 报告。本文带你按最容易到最贴近生产的顺序走通三个场景——Chrome 扩展里发第一条指令、操控 Android 真机、用本地脚本接管已登录的 Chrome。前置条件一个 Node.js 环境、Chrome 浏览器、一个具备 UI 定位能力的多模态模型 API Key。它是什么适合谁用Midscene.js 的操作逻辑仿照人使用软件的方式观察屏幕、按看到的内容操作、再检查呈现结果。它不写选择器、不依赖 DOM 语义靠元素的外观和位置定位所以纯图标按钮、自定义控件、canvas 内容都能处理。同一套 Agent APIaiAct、aiQuery、aiAssert等覆盖 Web、Android、iOS、HarmonyOS 和桌面应用适合两类人想把自然语言指令变成可维护测试脚本的测试工程师以及需要在现有 Playwright/Puppeteer 体系里补上视觉能力的开发者。图Midscene.js Chrome 扩展侧边栏执行 AI 指令并生成回放报告场景一Chrome 扩展里发第一条指令这是成本最低的验证方式不需要 clone 仓库、不需要建项目5 步以内跑通。配置模型设置 4 个环境变量指向你的多模态模型服务下文各场景通用。export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seed装扩展从 Chrome 应用商店安装 Midscene 插件浏览器右侧出现侧边栏。贴配置点侧边栏设置图标把上面 4 个值粘贴进设置页保存。发指令打开任意网页输入一句自然语言比如点击登录按钮。跑通后侧边栏会实时展示每一步的 AI 决策和页面截图执行完自动生成 HTML 报告每步的操作与断言结果都能回放。Playground 与midscene/webSDK 共享同一套代码实现在这里验证过的指令换成脚本行为完全一致。网页跑通之后下一个常见诉求是能不能不只管网页也控制手机 App。场景二连接 Android 真机入门真机场景AI 直接操作你手边的 Android 手机。开 USB 调试在开发者选项里打开USB 调试有USB 调试安全设置也一并打开数据线连接电脑。验证连接运行adb devices -l出现设备序列号即成功。起 Playground运行npx --yes midscene/android-playground弹窗打开投屏窗口。贴配置点窗口里的齿轮按钮粘贴 API Key 配置。图Midscene.js Android Playground 投屏窗口与指令面板下发指令输入打开浏览器搜索 SU7AI 自行规划执行。跑完后打开报告文件手机上的每次点击、滚动和断言都有截图留痕。这一步完成后把同样的指令交给midscene/androidSDK 就能写进正式测试脚本。真机跑通后另一个高频需求是脚本能不能复用我已登录的浏览器省掉一遍登录。场景三桥接模式脚本接管已登录的 Chrome进阶场景很多 Web 测试卡在登录态上桥接模式让本地 Node.js 脚本直接控制桌面 Chrome复用它的 cookies、插件和页面状态。装依赖在项目里安装midscene/web和tsx。建连接核心 API 就两行——import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com);确认授权运行npx tsx demo.ts后扩展弹出确认窗点 Allow 或 Always Allow。跑流程aiAct、aiAssert等调用与浏览器内用法完全相同。图Midscene.js 桥接模式下脚本控制桌面 Chrome脚本运行后桌面 Chrome 会新开标签页自动执行你还能在旁边手动补操作属于自动化里典型的人在回路协作。注意桥接模式的模型配置要写在终端Node.js 侧不是浏览器侧。三种界面都覆盖后剩下的问题是挂了怎么快速定位和卡住了怎么排查。常见问题排查扩展冲突报Cannot access a chrome-extension:// URL其他扩展向页面注入了 script 或 iframe。在开发者工具里找到该 URL 的扩展 ID到chrome://extensions禁用对应扩展刷新重试。设备已连接但无法控制报INJECT_EVENTS permission开发者选项里USB 调试安全设置未开启。补开该选项后重新连接。Ollama 本地模型报 403Ollama 默认拒绝扩展来源。设置环境变量OLLAMA_ORIGINS*放开限制。Android 输入文本后被清空Midscene 输入后默认发 ESC 隐藏键盘部分输入框尤其 WebView会响应 ESC。把设备参数改为keyboardDismissStrategy: back-first或用autoDismissKeyboard: false彻底关闭自动隐藏。配了 cache 却没生成缓存文件cache必须带id如果用的是read-only策略还需要手动调用agent.flushCache()才会落盘。下一步往哪走想把指令写进正式测试读 集成到 Playwright 指南模型配置、完整示例、测试运行器集成都在这篇里。想换平台平台指南目录 覆盖 iOS、HarmonyOS 和桌面端Windows/macOS/Linux的设备准备与 Playground 启动方式。想省钱提速缓存文档 讲清读写/只读/只写三种策略的取舍报告生成的核心逻辑在 packages/core/src/report-generator.ts想深入机制从这里入手。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene.js 快速上手指南：5 步从模型配置到真机跑通 AI 自动化测试
Midscene.js 快速上手指南5 步从模型配置到真机跑通 AI 自动化测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一款由 GUI Agent 驱动的 E2E 测试框架你用自然语言描述任务它截图分析界面后自动完成点击、输入和断言结束后生成可回放的 HTML 报告。本文带你按最容易到最贴近生产的顺序走通三个场景——Chrome 扩展里发第一条指令、操控 Android 真机、用本地脚本接管已登录的 Chrome。前置条件一个 Node.js 环境、Chrome 浏览器、一个具备 UI 定位能力的多模态模型 API Key。它是什么适合谁用Midscene.js 的操作逻辑仿照人使用软件的方式观察屏幕、按看到的内容操作、再检查呈现结果。它不写选择器、不依赖 DOM 语义靠元素的外观和位置定位所以纯图标按钮、自定义控件、canvas 内容都能处理。同一套 Agent APIaiAct、aiQuery、aiAssert等覆盖 Web、Android、iOS、HarmonyOS 和桌面应用适合两类人想把自然语言指令变成可维护测试脚本的测试工程师以及需要在现有 Playwright/Puppeteer 体系里补上视觉能力的开发者。图Midscene.js Chrome 扩展侧边栏执行 AI 指令并生成回放报告场景一Chrome 扩展里发第一条指令这是成本最低的验证方式不需要 clone 仓库、不需要建项目5 步以内跑通。配置模型设置 4 个环境变量指向你的多模态模型服务下文各场景通用。export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seed装扩展从 Chrome 应用商店安装 Midscene 插件浏览器右侧出现侧边栏。贴配置点侧边栏设置图标把上面 4 个值粘贴进设置页保存。发指令打开任意网页输入一句自然语言比如点击登录按钮。跑通后侧边栏会实时展示每一步的 AI 决策和页面截图执行完自动生成 HTML 报告每步的操作与断言结果都能回放。Playground 与midscene/webSDK 共享同一套代码实现在这里验证过的指令换成脚本行为完全一致。网页跑通之后下一个常见诉求是能不能不只管网页也控制手机 App。场景二连接 Android 真机入门真机场景AI 直接操作你手边的 Android 手机。开 USB 调试在开发者选项里打开USB 调试有USB 调试安全设置也一并打开数据线连接电脑。验证连接运行adb devices -l出现设备序列号即成功。起 Playground运行npx --yes midscene/android-playground弹窗打开投屏窗口。贴配置点窗口里的齿轮按钮粘贴 API Key 配置。图Midscene.js Android Playground 投屏窗口与指令面板下发指令输入打开浏览器搜索 SU7AI 自行规划执行。跑完后打开报告文件手机上的每次点击、滚动和断言都有截图留痕。这一步完成后把同样的指令交给midscene/androidSDK 就能写进正式测试脚本。真机跑通后另一个高频需求是脚本能不能复用我已登录的浏览器省掉一遍登录。场景三桥接模式脚本接管已登录的 Chrome进阶场景很多 Web 测试卡在登录态上桥接模式让本地 Node.js 脚本直接控制桌面 Chrome复用它的 cookies、插件和页面状态。装依赖在项目里安装midscene/web和tsx。建连接核心 API 就两行——import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com);确认授权运行npx tsx demo.ts后扩展弹出确认窗点 Allow 或 Always Allow。跑流程aiAct、aiAssert等调用与浏览器内用法完全相同。图Midscene.js 桥接模式下脚本控制桌面 Chrome脚本运行后桌面 Chrome 会新开标签页自动执行你还能在旁边手动补操作属于自动化里典型的人在回路协作。注意桥接模式的模型配置要写在终端Node.js 侧不是浏览器侧。三种界面都覆盖后剩下的问题是挂了怎么快速定位和卡住了怎么排查。常见问题排查扩展冲突报Cannot access a chrome-extension:// URL其他扩展向页面注入了 script 或 iframe。在开发者工具里找到该 URL 的扩展 ID到chrome://extensions禁用对应扩展刷新重试。设备已连接但无法控制报INJECT_EVENTS permission开发者选项里USB 调试安全设置未开启。补开该选项后重新连接。Ollama 本地模型报 403Ollama 默认拒绝扩展来源。设置环境变量OLLAMA_ORIGINS*放开限制。Android 输入文本后被清空Midscene 输入后默认发 ESC 隐藏键盘部分输入框尤其 WebView会响应 ESC。把设备参数改为keyboardDismissStrategy: back-first或用autoDismissKeyboard: false彻底关闭自动隐藏。配了 cache 却没生成缓存文件cache必须带id如果用的是read-only策略还需要手动调用agent.flushCache()才会落盘。下一步往哪走想把指令写进正式测试读 集成到 Playwright 指南模型配置、完整示例、测试运行器集成都在这篇里。想换平台平台指南目录 覆盖 iOS、HarmonyOS 和桌面端Windows/macOS/Linux的设备准备与 Playground 启动方式。想省钱提速缓存文档 讲清读写/只读/只写三种策略的取舍报告生成的核心逻辑在 packages/core/src/report-generator.ts想深入机制从这里入手。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考