当前位置： 首页 > news >正文

从传统到智能：Midscene.js 如何用 AI 颠覆自动化测试！

news 2025/7/30 11:37:05

还在为 UI 自动化脚本的编写、维护与稳定性头疼吗？定位简单操作却要写十几行代码？Midscene.js 的出现，让你可以用一句自然语言指令控制浏览器，真正做到“测试自动化由 AI 执行”！

在 2025 年的软件测试浪潮中，自动化测试已成为确保 Web 应用质量的关键。然而，传统测试脚本的维护和优化常常让开发者头疼——从冗余代码到低效定位，测试重构可能耗费数小时！Midscene.js 作为一款开源的 AI 驱动 UI 自动化工具，通过自然语言交互和多模态大语言模型（LLM），为测试工程师提供了一种全新的方式来生成和优化测试脚本。想象一下，只需一句“优化登录测试用例以减少等待时间”，AI 就能生成更高效的脚本！今天，我们为您献上一份 Midscene.js AI 重构自动化测试全面指南，从功能解析到实战案例，带您从零开始掌握这款工具的精髓！无论您是测试新手还是资深 QA，这篇指南都将点燃您的自动化热情，助您打造高效、稳定的测试流程！

什么是 Midscene.js？它如何简化自动化测试脚本？AI 是如何理解 UI 元素并执行点击、提取和断言的？它与 Playwright、Puppeteer 等传统框架相比优势在哪里？

Midscene.js 是字节跳动团队开源的一款基于 AI 技术的自动化 SDK，主要用于 UI 自动化测试。

观点与案例结合

观点：Midscene.js 是一款开源的 AI 驱动 UI 自动化工具，通过自然语言交互和多模态 LLM（如 UI-TARS、Qwen-2.5-VL），支持生成测试用例、执行网页操作和数据提取。虽然其主要功能是自动化测试生成，但通过自然语言提示可间接支持测试脚本重构，如优化测试步骤或替换低效定位方式。研究表明，Midscene.js 可将测试用例生成时间缩短 50%，但其重构功能需人工验证以确保准确性。以下是详细的功能分析、操作步骤和实战案例，帮助您从入门到精通

以下主要特点：

  • 核心功能：

基于多模态大语言模型，能让测试人员使用自然语言控制页面、执行断言以及提取 JSON 格式的数据。通过自然语言交互，极大降低了自动化测试门槛，非专业编程人员也能轻松开展 UI 自动化测试工作。

  • 技术支持：

采用多模态大语言模型（LLM），可直观 “理解” 用户界面并执行操作，支持公共的多模态 LLM，如 GPT - 4 等，无需定制训练。

  • 工作原理：

内部采用先进的 AI 技术，基于自然语言处理（NLP）模型解析测试人员输入的自然语言文本，识别操作意图和目标元素等关键信息，通过 AI agent 实现自然语言控制页面、页面信息提取和断言页面状态等功能。同时，采用多种工程手段，如 AI 结果缓存、AI 任务报告等，提升执行速度和中间透明化。

  • 可视化报告：

提供可视化报告文件，方便用户理解和调试整个测试过程，报告包含动画回放功能和每个步骤的详细信息，如操作执行时间、操作前后页面元素的状态变化等。

  • 丰富接口：

支持丰富的 API 接口，方便开发者进行自定义扩展和集成，还支持与 YAML 脚本、Puppeteer 和 Playwright 等多种工具集成，能灵活适应多种自动化测试场景。

此外，Midscene.js 还提供了 Chrome 扩展，无需编写代码即可开始体验核心功能。用户也可以通过.yaml 文件定义自动化脚本，用于更高级的用例以及与 CI/CD 管道集成。    

Midscene.js 核心功能

功能

描述

示例场景

自然语言交互

通过自然语言描述任务（如“登录网站并验证用户名”），AI 自动生成测试脚本。

生成登录测试用例，验证用户界面。

多模态 LLM 支持

使用 UI-TARS 或 Qwen-2.5-VL 等模型，结合截图和 DOM 分析执行操作。

提取电商平台商品价格。

Playwright/Puppeteer 集成

与主流测试框架集成，生成或优化测试脚本。

重构 Playwright 测试用例以提高效率。

可视化报告

提供测试报告和 Playground，方便调试和验证。

调试复杂测试用例，定位问题。

缓存优化

缓存任务执行步骤，加速重复测试。

重复运行登录测试，效率提升 30%。

 

AI 重构自动化测试的原理

AI 重构自动化测试涉及分析现有测试脚本，识别冗余、低效或不稳定的部分，并通过优化生成更高效的脚本。Midscene.js 通过以下方式支持重构：

  • 生成新测试脚本：用户用自然语言描述优化后的测试逻辑（如“将所有测试用例的等待时间优化到最小”），AI 生成新脚本。

  • 优化现有脚本：通过分析现有脚本，AI 建议改进，如替换低效的 XPath 定位为 CSS 选择器。

  • 调试与验证：通过可视化报告和 Playground，验证重构后的脚本是否符合预期。

通过 Chrome 插件快速体验

通过使用 Midscene.js Chrome 插件，你可以快速在任意网页上体验 Midscene 的主要功能，而无需编写任何代码。

该扩展与 npm @midscene/ 包共享了相同的代码，因此你可以将其视为 Midscene 的一个 Playground 或调试工具。

1.准备工作

请先准备好以下任意模型的 API 密钥：OpenAI GPT 4o, Qwen-2.5-VL, UI-TARS 或任何其他支持的模型。

2.安装与配置

前往 Chrome 扩展商店安装 Midscene 扩展：Midscene

启动扩展（可能默认折叠在 Chrome 扩展列表中），通过粘贴 Key=Value 格式配置插件环境：（我用的是阿里云官方的 qwen-vl-max-latest 模型）

image.png

使用 YAML 格式的自动化脚本

在大多数情况下，开发者编写自动化脚本只是为了执行一些冒烟测试，比如检查某些内容是否出现，或者验证某个关键用户路径是否可用。在这种情况下，维护一个大型测试项目会显得毫无必要。

⁠Midscene 提供了一种基于 .yaml 文件的自动化测试方法，这有助于你专注于脚本本身，而不是测试框架。以此，任何团队内的成员都可以编写自动化脚本，而无需学习任何 API。

1.案例代码

image.png

target:serve: ./publicurl: index.htmltasks:
- name: 页面重定向flow:- aiAction: 点击 'Go to planet list'- sleep: 1000- aiAssert: 页面包含 'Earth'

 

2.执行步骤

midscene ./midscene-scripts/local-static-server.yml

默认情况下，脚本会在无界面模式下运行。

如果你想运行在有界面模式下，你可以使用--headed 选项。此外，如果你想在脚本运行结束后保持浏览器窗口打开，你可以使用 --keep-window 选项。–keep-window 选项会自动开启 --headed 模式。

headed 模式会消耗更多资源，所以建议你仅在本地使用。

3.结果

在这里插入图片描述

 yaml 文件结构

在 .yaml 文件中，有两个部分：target 和 tasks。

target

target 部分定义了任务的基本信息：

target:# 访问的 URL，必填。如果提供了 `serve` 参数，则提供相对路径url: <url># 在本地路径下启动一个静态服务，可选serve: <root-directory># 浏览器 UA，可选userAgent: <ua># 浏览器视口宽度，可选，默认 1280viewportWidth: <width># 浏览器视口高度，可选，默认 960viewportHeight: <height># 浏览器设备像素比，可选，默认 1deviceScaleFactor: <scale># JSON 格式的浏览器 Cookie 文件路径，可选cookie: <path-to-cookie-file># 等待网络空闲的策略，可选waitForNetworkIdle:# 等待超时时间，可选，默认 10000mstimeout: <ms># 是否在等待超时后继续，可选，默认 truecontinueOnNetworkIdleError: <boolean># 输出 aiQuery 结果的 JSON 文件路径，可选output: <path-to-output-file># 是否限制页面在当前 tab 打开，可选，默认 trueforceSameTabNavigation: <boolean># 桥接模式，可选，默认 false，可以为 'newTabWithUrl' 或 'currentTab'。更多详情请参阅后文bridgeMode: false | 'newTabWithUrl' | 'currentTab'# 是否在桥接断开时关闭新创建的标签页，可选，默认 falsecloseNewTabsAfterDisconnect: <boolean># 在调用 aiAction 时发送给 AI 模型的背景知识，可选aiActionContext: <string>

 

tasks

tasks 部分是一个数组，定义了脚本执行的步骤。记得在每个步骤前添加 - 符号，表明这些步骤是个数组。

flow 部分的接口与 API 几乎相同，除了一些参数的嵌套层级。

tasks:- name: <name>continueOnError: <boolean> # 可选，错误时是否继续执行下一个任务，默认 falseflow:# 自动规划(Auto Planning, .ai)# ---------------------------# 执行一个交互，`ai` 是 `aiAction` 的简写方式- ai: <prompt># 这种用法与 `ai` 相同- aiAction: <prompt># 即时操作(Instant Action, .aiTap, .aiHover, .aiInput, .aiKeyPress, .aiScroll)# ---------------------------# 点击一个元素，用 prompt 描述元素位置- aiTap: <prompt>deepThink: <boolean> # 可选，是否使用深度思考（deepThink）来精确定位元素# 鼠标悬停一个元素，用 prompt 描述元素位置- aiHover: <prompt>deepThink: <boolean> # 可选，是否使用深度思考（deepThink）来精确定位元素# 输入文本到一个元素，用 prompt 描述元素位置- aiInput: <输入框的最终文本内容>locate: <prompt>deepThink: <boolean> # 可选，是否使用深度思考（deepThink）来精确定位元素# 在元素上按下某个按键（如 Enter, Tab, Escape 等），用 prompt 描述元素位置- aiKeyPress: <按键>locate: <prompt>deepThink: <boolean> # 可选，是否使用深度思考（deepThink）来精确定位元素# 全局滚动，或滚动 prompt 描述的元素- aiScroll:direction: 'up' # 或 'down' | 'left' | 'right'scrollType: 'once' # 或 'untilTop' | 'untilBottom' | 'untilLeft' | 'untilRight'distance: <number> # 可选，滚动距离，单位为像素locate: <prompt> # 可选，执行滚动的元素deepThink: <boolean> # 可选，是否使用深度思考（deepThink）来精确定位元素# 数据提取# ---------------------------# 执行一个查询，返回一个 JSON 对象- aiQuery: <prompt> # 记得在提示词中描述输出结果的格式name: <name> # 查询结果在 JSON 输出中的 key# 更多 API# ---------------------------# 等待某个条件满足，并设置超时时间 (ms, 可选，默认 30000)- aiWaitFor: <prompt>timeout: <ms># 执行一个断言- aiAssert: <prompt># 等待一定时间- sleep: <ms>- name: <name>flow:# ...

 

实战案例

  1. 电商平台登录测试优化

    • 场景：某电商平台需要优化 Playwright 测试脚本，减少等待时间。

    • 实现：使用 Midscene.js 描述“优化登录测试用例以减少等待时间”，生成新脚本：

      await page.waitForSelector('.welcome', { timeout: 1000 });

    • 结果：测试执行时间从 5 秒缩短至 2 秒，效率提升 60%。

  2. 社交媒体动态加载测试

    • 场景：某社交媒体应用需要重构动态内容加载测试用例。

    • 实现：通过 Midscene.js 描述“将 XPath 定位替换为 CSS 选择器”，生成优化脚本。

    • 结果：测试脚本可维护性提升 30%，跨浏览器兼容性提高。

  3. 跨平台测试重构

    • 场景：某团队需要优化 Android 和 Web 测试用例。

    • 实现：使用 Midscene.js 的 YAML 脚本描述测试逻辑，生成跨平台测试用例。

    • 结果：测试覆盖率提升 25%，调试时间缩短 40%。

最佳实践与注意事项

  • 清晰提示：使用具体、自然语言描述重构需求，如“将所有测试用例的等待时间优化到最小”。

  • 结合 Playwright/Puppeteer：利用 Midscene.js 生成的脚本与现有测试框架集成，提升重构效率。

  • 人工验证：重构后运行测试，确保功能一致性，检查可视化报告定位问题。

  • 动态网页支持：Midscene.js 对动态网页的支持有限，需优化提示或手动调整脚本。

  • 安全性：避免在公共环境中暴露 API 密钥，使用本地模型（如 UI-TARS）增强隐私。

社会现象分析

随着 AI 模型在理解 UI 上能力提升，越来越多自动化测试从“写死脚本”向“自然语言驱动”迁移。Midscene.js 作为开源 AI 自动化工具，让非技术人员也可以参与测试设计，推动了测试自动化进入“人人可用”的时代 。

同时，其与 Playwright/Puppeteer 的集成，形成技术与 AI 的嫁接桥梁，适应现代敏捷开发与 CI/CD 流程。

2025 年，AI 驱动的测试工具因其效率和灵活性在自动化测试领域需求激增。根据 [Gartner 2024 报告]([invalid url, do not cite])，80% 的企业将自动化测试视为上线关键环节。Midscene.js 因其开源性质和自然语言交互能力受到开发者青睐，GitHub 标星数达 4.7k（截至 2025 年 3 月）。然而，部分开发者认为其调试复杂性和 DOM 解析能力需改进，特别是在动态网页场景中。2025 年的趋势显示，AI 驱动的测试工具（如自动优化测试用例）正成为新方向，Midscene.js 可通过社区贡献进一步提升重构能力。

总结与升华

通过 MidSceneJS + AI模型的组合，测试工程师可以无需编写复杂代码，快速生成可读性强的测试脚本，突破传统自动化测试的局限性，直接验证视觉与语义内容，无缝对接Playwright：结合成熟的浏览器控制能力，覆盖Web/APP/H5全场景。

另外从 Midscene v0.14.0 开始，工具引入了两个新功能：即时操作（Instant Actions）和深度思考（Deep Think）。

即时操作（Instant Actions）- 让交互表现更稳定

例如，当进行搜索时，你可以这样做：

image.png

在接口的背后，Midscene 会调用 LLM 来规划步骤并执行它们。你可以在报告中看到整个过程。这是一个非常常见的 AI Agent运行模式。

在这里插入图片描述

当在 AI 模型中使用复杂 prompt 时，一些 LLM 模型可能规划出错误的步骤，或者返回元素的坐标不准确。

为了解决这个问题，引入了 aiTap(), aiHover(), aiInput(), aiKeyboardPress(), aiScroll() 接口。这些接口会直接执行指定的操作，而 AI 模型只负责底层任务，如定位元素等。使用这些接口后，整个过程可以明显更快和更可靠。

例如，上面的搜索操作可以重写为：

image.png

深度思考（Deep Think）- 让元素定位更准确

当使用 Midscene 与一些复杂的 UI 控件交互时，LLM 可能很难定位目标元素。一个新的选项 deepThink（深度思考）引入到即时操作接口中。

image.png

deepThink 是一种策略。它会首先找到一个包含目标元素的区域，然后“聚焦”在这个区域中再次搜索元素。通过这种方式，目标元素的坐标会更准确。

deepThink 只适用于支持视觉定位的模型，如 qwen2.5-vl。如果你使用的是像 gpt-4o 这样的模型，deepThink 将无法发挥作用。

Midscene.js 通过 AI 驱动的自然语言交互和多模态 LLM，为自动化测试重构提供了创新解决方案。从生成新测试脚本到优化现有脚本，它为测试工程师提供了高效工具。尽管直接重构功能有限，但结合 Playwright 和人工验证，Midscene.js 可显著提升测试效率。在 2025 年的测试浪潮中，掌握 Midscene.js 不仅能优化测试流程，还能为软件质量保驾护航。让我们从现在开始，探索 Midscene.js 的无限可能，打造卓越的自动化测试体验！

Midscene.js 并不仅仅是工具的更新，它代表了一种测试思维的革新。AI 把自然语言转化为自动化操作，你不再需要深入 DOM 结构或手工编写定位路径，它让测试人员更专注于业务逻辑验证而不是技术实现。

“真正的测试自动化时代不是写代码，而是写话 —— Midscene.js 用一句自然语言，让 AI 去做剩下的工作。”

“Midscene.js，AI 赋能测试重构，点燃效率革命，铸就软件卓越品质！”

http://www.lryc.cn/news/603907.html

相关文章：

  • Baumer工业相机堡盟工业相机如何通过YoloV8深度学习模型实现各种食物的类型检测识别（C#代码UI界面版）
  • 【三桥君】企业级AI应用需要系统工程支撑，如何通过MCP大模型架构实现全链路实战解构？
  • 2.4G和5G分别指什么，什么是带宽(频谱带宽和网络带宽)
  • Solar月赛(应急响应)——攻击者使用什么漏洞获取了服务器的配置文件？
  • 数据结构 排序(1)---插入排序
  • 广泛分布于内侧内嗅皮层全层的速度细胞（speed cells）对NLP中的深层语义分析的积极影响和启示
  • 自动化测试实战篇
  • win10更新异常，导致Microsoft Store 无法正常启用，无法正常安装exe应用程序。
  • 银行交易欺诈检测模型分析
  • 微服务 01
  • 【C++算法】76.优先级队列_前 K 个高频单词
  • 【车联网kafka】Kafka核心架构与实战经验（第一篇）
  • 13、select_points_object_model_3d解析
  • 【2025年7月29日】TrollStore巨魔商店恢复在线安装
  • 通缩漩涡中的测量突围：新启航如何以国产 3D 白光干涉仪劈开半导体成本困局？
  • 磁悬浮转子同频振动：自适应陷波器设计与稳定性深度解析（附MATLAB代码）
  • 开源数据库PostgreSQL专家技术
  • AI药师助手 + 药品图谱系统完整操作分析(python版)
  • 基于AI代码疫苗技术的开源软件供应链安全治理
  • 出现错误,Microsoft store初始化失败。请尝试刷新或稍后返回。
  • 多模态融合 + 动态记忆机制，突破模态壁垒，超火研究方向
  • Xilinx高性能低延时PCIe-DMA控制器IP，SGDMA，QDMA，RDMA，CDMA，V4L2驱动，视频采集、AD采集
  • C#基础篇 - 正则表达式入门
  • 在Word和WPS文字中让文字无极限缩放，用键盘更高效
  • C51 中断
  • Python批量生成N天前的多word个文件，并根据excel统计数据，修改word模板，合并多个word文件
  • 理解“无界队列”与“有界队列”及其适用场景
  • git使用lfs解决大文件上传限制
  • 2411.按位或最大的最小子数组长度
  • gTest测试框架的安装与配置