30 秒跑通 E2E 自动化测试Midscene.js 指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个 AI 驱动的 GUI 自动化测试框架像人一样看屏幕用自然语言操作界面。它解决传统 E2E 测试里选择器脆弱、多平台脚本重复、失败难排查的真问题你用白话描述操作它就能在 Web、Android、iOS 上自动执行并生成可视化报告。适合 QA 工程师、维护测试的前端开发以及没做过自动化的新手。它帮你省了什么如果你维护过 UI 自动化测试大概熟悉下面这几个痛选择器太脆弱。传统写法里每个按钮都要写 CSS 选择器或 XPath产品改一次界面脚本就成批失效修测试占掉你大半周。Midscene 靠截图做视觉定位来操作屏幕图标按钮、canvas画出来的内容、跨域 iframe 里的元素都可以直接用自然语言描述不用写选择器。多平台重复劳动。Web 用 Playwright、Android 用 Appium、iOS 用 WebDriverAgent一套 API 学三遍同一个流程写三份。Midscene 的 Agent API 在 Web、Android、iOS、HarmonyOS 和桌面端保持一致同一段提示词可以跨平台复用。失败没法追溯。测试只报 fail不告诉你当时屏幕长什么样排查只能手工重跑。Midscene 每次运行都会生成可交互的 HTML 报告截图、元素落点、AI 决策过程都能逐步查看。30 秒上手最快的路径不用建项目三步npm i -g midscene/cli # 安装命令行工具Node.js 需 20.19 # 同目录建 .env填 4 个模型配置变量写法见下文一个任务走通到底 midscene ./demo.yaml # 运行 YAML 脚本跑完后会在midscene_run/report/目录下生成 HTML 报告浏览器打开就能逐步回放。如果暂时不想碰命令行也可以先装 Chrome 扩展粘贴模型配置后直接在浏览器侧边栏验证指令效果。核心能力拆解视觉 GUI AgentaiAct它是什么模型根据截图决定点哪里、怎么操作你只描述目标。怎么用// 让 Agent 自主完成多步操作 await agent.aiAct(Search for headphones, then filter the results to under $100);得到什么多步流程被自动完成。界面改版后你只需要调整这句话不用改代码。自然语言断言与数据提取aiAssert / aiQuery它是什么校验用户看到的东西并从画面里提取结构化数据。怎么用// 断言检查布局与可见结果 await agent.aiAssert(Every product in the search results has a price below $100); // 提取直接返回 JSON 数组 const list await agent.aiQuery(页面中的商品{name: string, price: number}[]);得到什么断言覆盖颜色、高亮、布局状态连 canvas 绘制的内容也能校验提取结果可以直接喂给后续步骤或写进报告。跨平台同一套 Agent API它是什么上面的调用在 Web、Android、iOS、HarmonyOS、桌面端写法一致只有设备部分不同。怎么用Android 侧先确认adb devices能列出设备再实例化AndroidAgent具体流程见 Android 平台指南。得到什么一条流程在 Playground 验证通过后可以原样搬进脚本多端脚本共用同一批提示词。一个任务走通到底这里完整演示一个最常见的小任务打开搜索页搜索今日天气并断言结果里出现天气信息。第 1 步在运行目录的.env里写模型配置以豆包为例其他模型写法不同MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 MIDSCENE_MODEL_API_KEYyour-api-key MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 MIDSCENE_MODEL_FAMILYdoubao-seed第 2 步写脚本demo.yaml这就是全部流程page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果中展示了天气信息第 3 步一条命令运行midscene ./demo.yaml。跑完后打开midscene_run/report/里的报告整个过程可以回放截图、点击落点、AI 的规划、断言结果都逐步展示。断言失败时报告里能直接看到当时那一刻的界面和失败步骤在哪不用重跑盲猜。避坑与常见问题问adb devices列不出我的安卓手机在开发者选项里开启 USB 调试部分机型还要同时开USB 调试安全设置。数据线连上后在手机上点允许。确认列出了设备号先跑npx --yes midscene/android-playground粘贴模型配置用 Playground 验证连接问模型请求报 403 或连接被拒绝用本地 Ollama 时需要设置环境变量OLLAMA_ORIGINS*放行扩展访问。用云端服务时检查 API Key、服务地址、模型名三者是否一致。问点击坐标有偏移点错了按钮先升级到最新版本定位精度在新版本里持续改进。再考虑换视觉能力更强的模型。如果你用 Azure OpenAI 的 GPT-5可以设置screenshotShrinkFactor把截图预先缩小避开服务端缩放带来的坐标系偏移。问会往 AI 模型里发哪些数据主要是页面截图。调用aiAsk或aiQuery且传domIncluded: true时会附带 DOM 信息。公司有合规要求时可以自部署开源多模态模型来隔离数据。问运行时报Unsupported Node.js versionCLI 要求 Node.js 20.19、22.12 或 24升级后重装midscene/cli即可。写在最后Midscene.js 适合想减少选择器维护量的 QA、需要让同一条流程在多个平台跑起来的团队以及不想先学测试框架就写出第一条 UI 测试的新手。下一步建议读 快速开始 安装 Chrome 扩展体验零代码指令按 支持的模型与配置 选一个合适的模型遇到问题翻 常见问题。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 30 秒跑通 E2E 自动化测试：Midscene.js 指南
30 秒跑通 E2E 自动化测试Midscene.js 指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个 AI 驱动的 GUI 自动化测试框架像人一样看屏幕用自然语言操作界面。它解决传统 E2E 测试里选择器脆弱、多平台脚本重复、失败难排查的真问题你用白话描述操作它就能在 Web、Android、iOS 上自动执行并生成可视化报告。适合 QA 工程师、维护测试的前端开发以及没做过自动化的新手。它帮你省了什么如果你维护过 UI 自动化测试大概熟悉下面这几个痛选择器太脆弱。传统写法里每个按钮都要写 CSS 选择器或 XPath产品改一次界面脚本就成批失效修测试占掉你大半周。Midscene 靠截图做视觉定位来操作屏幕图标按钮、canvas画出来的内容、跨域 iframe 里的元素都可以直接用自然语言描述不用写选择器。多平台重复劳动。Web 用 Playwright、Android 用 Appium、iOS 用 WebDriverAgent一套 API 学三遍同一个流程写三份。Midscene 的 Agent API 在 Web、Android、iOS、HarmonyOS 和桌面端保持一致同一段提示词可以跨平台复用。失败没法追溯。测试只报 fail不告诉你当时屏幕长什么样排查只能手工重跑。Midscene 每次运行都会生成可交互的 HTML 报告截图、元素落点、AI 决策过程都能逐步查看。30 秒上手最快的路径不用建项目三步npm i -g midscene/cli # 安装命令行工具Node.js 需 20.19 # 同目录建 .env填 4 个模型配置变量写法见下文一个任务走通到底 midscene ./demo.yaml # 运行 YAML 脚本跑完后会在midscene_run/report/目录下生成 HTML 报告浏览器打开就能逐步回放。如果暂时不想碰命令行也可以先装 Chrome 扩展粘贴模型配置后直接在浏览器侧边栏验证指令效果。核心能力拆解视觉 GUI AgentaiAct它是什么模型根据截图决定点哪里、怎么操作你只描述目标。怎么用// 让 Agent 自主完成多步操作 await agent.aiAct(Search for headphones, then filter the results to under $100);得到什么多步流程被自动完成。界面改版后你只需要调整这句话不用改代码。自然语言断言与数据提取aiAssert / aiQuery它是什么校验用户看到的东西并从画面里提取结构化数据。怎么用// 断言检查布局与可见结果 await agent.aiAssert(Every product in the search results has a price below $100); // 提取直接返回 JSON 数组 const list await agent.aiQuery(页面中的商品{name: string, price: number}[]);得到什么断言覆盖颜色、高亮、布局状态连 canvas 绘制的内容也能校验提取结果可以直接喂给后续步骤或写进报告。跨平台同一套 Agent API它是什么上面的调用在 Web、Android、iOS、HarmonyOS、桌面端写法一致只有设备部分不同。怎么用Android 侧先确认adb devices能列出设备再实例化AndroidAgent具体流程见 Android 平台指南。得到什么一条流程在 Playground 验证通过后可以原样搬进脚本多端脚本共用同一批提示词。一个任务走通到底这里完整演示一个最常见的小任务打开搜索页搜索今日天气并断言结果里出现天气信息。第 1 步在运行目录的.env里写模型配置以豆包为例其他模型写法不同MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 MIDSCENE_MODEL_API_KEYyour-api-key MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 MIDSCENE_MODEL_FAMILYdoubao-seed第 2 步写脚本demo.yaml这就是全部流程page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果中展示了天气信息第 3 步一条命令运行midscene ./demo.yaml。跑完后打开midscene_run/report/里的报告整个过程可以回放截图、点击落点、AI 的规划、断言结果都逐步展示。断言失败时报告里能直接看到当时那一刻的界面和失败步骤在哪不用重跑盲猜。避坑与常见问题问adb devices列不出我的安卓手机在开发者选项里开启 USB 调试部分机型还要同时开USB 调试安全设置。数据线连上后在手机上点允许。确认列出了设备号先跑npx --yes midscene/android-playground粘贴模型配置用 Playground 验证连接问模型请求报 403 或连接被拒绝用本地 Ollama 时需要设置环境变量OLLAMA_ORIGINS*放行扩展访问。用云端服务时检查 API Key、服务地址、模型名三者是否一致。问点击坐标有偏移点错了按钮先升级到最新版本定位精度在新版本里持续改进。再考虑换视觉能力更强的模型。如果你用 Azure OpenAI 的 GPT-5可以设置screenshotShrinkFactor把截图预先缩小避开服务端缩放带来的坐标系偏移。问会往 AI 模型里发哪些数据主要是页面截图。调用aiAsk或aiQuery且传domIncluded: true时会附带 DOM 信息。公司有合规要求时可以自部署开源多模态模型来隔离数据。问运行时报Unsupported Node.js versionCLI 要求 Node.js 20.19、22.12 或 24升级后重装midscene/cli即可。写在最后Midscene.js 适合想减少选择器维护量的 QA、需要让同一条流程在多个平台跑起来的团队以及不想先学测试框架就写出第一条 UI 测试的新手。下一步建议读 快速开始 安装 Chrome 扩展体验零代码指令按 支持的模型与配置 选一个合适的模型遇到问题翻 常见问题。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考