UI自动化测试现状
传统的UI自动化测试一直存在这些痛点：
1. 元素定位机制的先天缺陷
传统UI自动化高度依赖Selector API体系（包括ID选择器、类选择器、XPath等），这种基于DOM结构的定位方式造成了测试代码与前端业务代码的深度耦合，即当界面发生细微调整或浏览器环境切换时，测试脚本往往需要同步更新。
2. 测试执行的脆弱性特征
自动化测试过程中常遭遇网络波动、弹窗干扰、元素状态瞬变等偶发异常。传统脚本普遍缺乏智能等待机制和异常恢复策略，导致测试用例执行失败率很高，大大降低了自动化测试结果的可信度。
3. 前端工程的可测性要求
为实现精准元素定位，开发团队需实施属性埋点工程（如强制添加data-testid属性）。这给开发团队也带了额外的工作量。
4. 非标准元素的识别壁垒
传统自动化测试方法对Canvas、SVG、WebGL等现代图形技术存在天然盲区。以数据可视化大屏为例，基于Canvas渲染的图表元件无法通过常规选择器定位，导致核心业务模块缺乏有效测试覆盖。
5. 测试报告的可读性差
传统框架生成的报告普遍存在三大缺陷：①缺乏业务语义关联，仅展示元素定位层级；②错误堆栈信息专业化程度过高，非技术人员难以解读；③缺乏可视化的执行过程展示（如带有元素高亮的录屏），造成错误排查成本太高
6. 技术栈的陡峭学习曲线
主流框架（如Selenium、Playwright）要求掌握特有的框架语法。新晋测试工程师平均需要6-8周才能独立编写稳定脚本。且编写的脚本通常可读性较差，难以在团队内部形成有效的合作机制。
AI驱动的自动化解决方案
1. 元素定位机制革新
通过多模态AI模型实现语义级界面理解，测试脚本以自然语言指令（如”点击左上角语言切换按钮”）替代传统选择器。这种”目标驱动”模式使测试代码与DOM结构解耦，界面重构后无需修改脚本。
2. 智能容错机制
通过精细化的提示词调优，可实现智能等待和异常恢复机制，自动处理网络波动、弹窗干扰等异常场景。
3. 零代码埋点工程
多模态大模型自动提取页面语义信息，无需开发团队添加data-testid等属性。
4. 多模态元素识别
突破传统框架对Canvas/SVG等非标准元素的识别限制，通过视觉+语义融合技术实现复杂图形元素的精准操作。在数据大屏测试中，可自动识别图表中的数值区域。
5. 业务语义化报告
生成包含元素高亮录屏、JSON格式数据快照和自然语言错误描述的可视化报告。某金融审计项目使用后，错误排查效率提升65%。报告支持Playground模式进行交互式调试。
6. 多种开发模式支持
提供Chrome插件的桥接模式、YAML脚本和JavaScript API三种开发模式，测试工程师可通过自然语言指令快速编写脚本。Chrome插件的桥接模式支持轻量级交互，让用户快速在任意网页上体验 Midscene 的主要功能，而无需编写任何代码；YAML脚本通过结构化数据表达支持更灵活多样的测试场景，适合于小型测试项目脚本编写和执行一些简单的冒烟测试，让开发者可以专注于脚本本身而非测试框架；JavaScript API则无缝集成Playwright/Puppeteer等成熟的自动化框架，适用于中大型自动化测试框架搭建（如电商多端同步测试）。
Midscene.js介绍
网页自动化在数据抓取、UI 测试和业务流程优化中发挥着重要作用。然而，传统工具如 Selenium 和 Puppeteer 要求用户具备编程技能，编写复杂的选择器和脚本维护成本高昂。Midscene.js 通过自然语言接口革新了这一领域，用户只需描述任务（如“点击登录按钮”或“提取产品价格”），AI 即可自动执行，大幅降低技术门槛。
Midscene.js 由 web-infra-dev 团队开发，开源于 GitHub（GitHub- web-infra-dev/midscene），采用 MIT 许可。它支持多种 AI 模型，集成 Puppeteer 和 Playwright，提供丰富的功能。本文基于官网（Midscene.js）内容，全面解析其功能、模型、案例、技术细节和优化建议，为开发者提供详尽指南。
Midscene 的运行原理
简单来讲，Midscene 提取了用户界面的结构信息并发送到多模态 AI 服务进行推理。这个流程图展示了 Midscene 和 AI 的交互流程：
特性
● 自然语言互动 👆：只需描述你的目标和步骤，Midscene 会为你规划和操作用户界面。
● Chrome 插件体验 🖥️：通过 Chrome 插件，你可以立即开始体验，无需编写代码。
● Puppeteer/Playwright 集成 🔧：支持 Puppeteer 和 Playwright 集成，让你能够结合 AI 能力和这些自动化工具的强大功能，轻松实现自动化操作。
● 支持开源模型 🤖：支持开源模型 UI-TARS 和 千问 Qwen2.5-VL，相比 GPT-4o、Claude 等闭源模型，不仅在 UI 自动化场景下表现更加出色，还能更好地保护数据安全。
● 支持通用模型 🌟：支持 GPT-4o、Claude 等通用大模型，适配多种场景需求。
● 用可视化报告来调试 🎞️：通过我们的测试报告和 Playground，你可以轻松理解、回放和调试整个过程。
● 支持缓存 🔄：首次通过 AI 执行后任务会被缓存，后续执行相同任务时可显著提升执行效率。
● 完全开源 🔥：体验全新的自动化开发体验，尽情享受吧！
● 理解UI、JSON格式回答 🔍：你可以提出关于数据格式的要求，然后得到 JSON 格式的预期回应。
● 直观断言 🤔：用自然语言表达你的断言，AI 会理解并处理。
通过Chrome插件快速体验
安装与配置
前往Chrome扩展商店安装Midscene扩展，https://chromewebstore.google.com/detail/midscenejs/gbldofcpkknbggpkmbdaefngejllnief
配置模型环境
配置模型
配置完成后，可立即开始使用Midscene。它一共有四个关键操作Tab：
- Action: 与网页进行交互，这就是所谓的自动规划（Auto Planning）。
- Query: 从界面中提取 JSON 数据。
- Assert: 验证页面。
- Tap: 在某个元素上点击，这就是所谓的即时操作（Instant Action）。
开始体验
我们以百度搜索为示例，在浏览器先打开百度地址：https://www.baidu.com，在谷歌浏览器插件内输入以下内容
1 | 打开网址：https://www.baidu.com，输入搜索内容：Midscene.js，点击百度一下 |
点击Run，结果为：
我们可以很清晰的看到，执行过程，先进行元素定位，在进行操作，之后会产出一个报告，并可以下载。
模型选择与配置
Midscene.js 支持两种类型的 AI 模型：
- 通用多模态 LLM：接受文本和图像输入的模型。GPT-4o 是这种类型模型的代表。
- 支持视觉定位的 VL 模型：除了接受文本和图像输入外，这些模型还可以给出指定元素的坐标信息（Visual Grounding）。Midscene 已经适配了 Qwen-2.5-VL, Gemini-2.5-Pro 和 UI-TARS 作为这种类型的模型。
GPT-4o
GPT-4o 是 OpenAI 提供的通用 LLM 模型，支持图像输入。这是 Midscene.js 的默认模型。
我们推荐在 GPT-4o 中使用逐步指令（step-by-step）的提示词。
特性
- 易于上手：OpenAI 提供了非常友好的 API 接入，你只需要获取 API 密钥即可。
- 表现平稳：它在交互（Action）、断言（Assertion）和查询（Query）方面表现均比较良好。
在 Midscene.js 中使用时的限制
- 成本较高：Midscene 需要将截图和 DOM 树一起发送给模型，这会导致 token 消耗较高。例如，在 1280x800 分辨率下，eBay 首页需要 6000 个 token 输入，搜索结果页面则需要 9000 个 token 输入。因此，它的成本会显著高于其他模型。
- 内容限制：它无法处理跨域的
<iframe />或<canvas />标签中的内容。 - 分辨率限制：它无法处理分辨率超过 2000x768 的图像。超尺寸输入会导致输出质量下降。
- 小图标识别能力较差：它可能无法准确定位小图标。
- 不支持 Android 自动化：它不支持 Android 自动化。
配置
1 | OPENAI_API_KEY="......" |
Qwen-2.5-VL
从 0.12.0 版本开始，Midscene.js 支持千问 Qwen-2.5-VL 模型。
Qwen-2.5-VL 是一个专为图像识别设计的开源模型，由阿里巴巴开发。它提供了视觉定位（Visual Grounding）的能力，可以准确返回指定元素的坐标信息。无论是交互、断言还是查询，Qwen-2.5-VL 在 Midscene 的综合表现比较优秀。我们推荐使用 72B 版本。
Qwen-2.5-VL 具备操作规划（action planning）能力，可以自主控制应用程序，但我们仍然推荐开发者使用详细的提示词来驱动，以获得更稳定和可靠的结果。
特性
- 低成本：Qwen-2.5-VL 支持视觉定位（Visual Grounding），不需要发送 DOM 树给模型。和
gpt-4o相比，它可以节省 30% 到 50% 的 token 数量。在阿里云官方部署版本中，费用消耗可以下降 80% 以上。 - 高分辨率支持：Qwen-2.5-VL 支持更高的分辨率输入，足以满足大多数情况。
- 开源：这是一个开源模型，因此你可以选择使用云提供商已经部署好的版本，或者自己部署到你自己的服务器上。
在 Midscene.js 中使用时的限制
- 小图标识别能力较差：为了准确识别小图标、小元素，你可能需要开启
deepThink参数并调优描述，否则识别效果无法保证。 - 断言能力不足：在某些情况下，Qwen-2.5-VL 的断言能力可能不如
gpt-4o。
配置
除了常规配置，你还需要包含 MIDSCENE_USE_QWEN_VL=1 配置来启用 Qwen 2.5 模式。否则，它将使用默认的 gpt-4o 模式（这将使用更多的 token）。
1 | OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1" # 或任何其他提供商的接入点。 |
UI-TARS
UI-TARS 是一个专为 UI 自动化设计的开源模型。它仅以截图作为输入，并执行人类常用的交互（如键盘和鼠标操作），在 10 多个 GUI 基准测试中取得了顶尖性能。UI-TARS 是一个开源模型，并提供了不同大小的版本。
我们推荐在 UI-TARS 中使用目标驱动的提示词（target-driven prompt），如“使用用户名 foo 和密码 bar 登录”，它会逐步完成动作规划并执行。
特性
- 适用于探索性场景：UI-TARS 在开放性任务场景中表现出色，例如 “帮我发一条微博”，它能多次进行尝试，直到找到正确的操作步骤。
- 速度：以火山引擎部署的
doubao-1.5-ui-tars作为基准，它的返回速度快于其他模型。 - 原生图像识别：UI-TARS 有视觉定位（Visual Grounding）的能力，和 Qwen-2.5-VL 一样，在使用 UI-TARS 时， Midscene.js 不需要发送 DOM 树。
- 开源：UI-TARS 是一个开源模型，因此你可以选择部署到你自己的服务器上，你的数据将不再发送到云端。
在 Midscene.js 中使用时的限制
- 断言能力较差：在某些情况下，UI-TARS 的断言能力可能不如
gpt-4o。 - 无法固定操作路径：UI-TARS 具备较强的探索能力，它可能会主动多次尝试不同的操作路径，这可能会导致每次调用时操作路径不固定。
配置
除了常规配置，你还需要包含 MIDSCENE_USE_VLM_UI_TARS 参数来指定 UI-TARS 版本，支持的值为 1.0 1.5 DOUBAO（火山引擎版本）。否则，你会遇到一些 JSON 解析错误。
1 | OPENAI_BASE_URL="....." |
如果使用的是火山引擎平台的doubao-1.5-ui-tars 模型，设置配置参数为：
1 | # 注意 URL 最后填写到 /v3 结束即可 |
Gemini-2.5-Pro
Gemini-2.5-Pro 是 Google Cloud 提供的模型。它和 Qwen-2.5-VL 类似，但它是闭源的。
Midscene.js 从 v0.15.1 版本开始支持 Gemini-2.5-Pro 模型。
配置
1 | OPENAI_BASE_URL="https://generativelanguage.googleapis.com/v1beta/openai/" |