UI 自动化测试是很多测试同学的核心工作之一，传统的UI自动化方案（如Selenium、Playwright），需要定位元素、编写大量代码，对非开发背景的测试同学不够友好，且适配复杂UI、动态元素时容易出现脚本失效的问题

随着技术的发展，视觉识别类 UI 自动化方案逐渐成为新的探索方向，无需依赖元素定位，仅通过视觉图像识别即可完成操作，大幅降低了传统自动化的适配成本。今天要分享的Midscene.js，正是这类方案的典型代表。

本文将结合 Midscene.js MCP 与配套 Skill 包，拆解基于 Midscene.js 的 UI 自动化实践流程，同时客观分析其优缺点，帮大家了解这个自动化思路。

一、Midscene.js 是什么？有什么用？

1. 核心定义

Midscene.js 是一款基于视觉识别的前端自动化工具库，核心能力是通过分析页面视觉图像，实现对网页、APP 界面的自动化操作与元素交互，无需编写复杂的元素定位脚本，仅需描述操作目标（如 “点击登录按钮”“输入用户名”），即可完成自动化执行。

2. 核心价值

• 低代码 / 无代码适配：无需掌握专业的元素定位语法，测试同学可通过自然语言描述操作，新手也能快速上手，降低 UI 自动化的技术门槛。
• 适配动态 UI：不依赖页面元素的 ID、Class、XPATH 等属性，仅通过视觉特征识别目标，完美适配 UI 频繁迭代、动态元素频发的项目，减少脚本维护成本。
• 跨平台兼容：支持 Web、移动端等多场景，可灵活适配不同终端的界面操作，适用范围广。

二、基于 Midscene.js 的 UI 自动化配套 Skill 包

为了降低 Midscene.js 的使用门槛，我开发了一套标准化配套 Skill 包，包含 4 个核心 Skill，覆盖 “用例生成→用例执行→报告输出→用例分发” 全流程，无需手动编写复杂逻辑，全程通过 Skill 一键完成。

配套 Skill 包详细介绍

三、实操案例

前置准备

1. 完成 Midscene.js MCP 配置并启动；
2. 下载并解压配套 Skill 包至指定 Skills 目录；
3. 准备测试素材：需求文档（或页面截图、测试 URL）。

步骤 1：用例生成

操作工具：Cursor、Trae 等支持 Skills 的 AI 工具操作方法：

1. 打开 AI 工具，上传需求文档（也可直接上传页面截图、测试 URL，适配不同场景）；
2. 触发midscene-req-to-cases Skill，AI 自动解析文档内容，生成midscene-web-cases格式的 JSON 用例。

选择 JSON 格式的原因：JSON 结构对 AI 更友好，可直接编辑修改，格式标准且能容纳更多用例细节，后续执行与维护更便捷。

步骤 2：（可选）Excel 用例导出

适用场景：需要人工评审用例，或给产品、非技术同学分发查看操作方法：触发midscene-json-to-excel Skill，上传已生成的 JSON 用例文件，AI 自动导出 Excel 表格，一条用例对应一行，步骤聚合展示，阅读更清晰。

步骤 3：用例执行

操作工具：支持 Skills 的 AI 工具操作方法：

1. 输入执行指令：/midscene-run-web-cases + 生成的JSON用例文件；
2. 可选：指定执行某几条用例（如 “执行第 1、3 条用例”），不指定则执行全部用例。

可以看到会去操作网站，这里就不进行录屏了

执行细节：

• AI 自动通过 MCP 连接目标网页，按用例步骤逐步执行（导航、输入、点击、断言）；

• 每一步操作均会记录执行状态，成功显示passed，失败显示failed；
• 执行过程中会自动截取关键截图，用于后续问题定位。

步骤 4：报告输出（自动生成，无需手动整理）

操作方法：触发midscene-ui-test-report Skill，上传midscene-run-log.json执行日志，AI 自动解析日志并生成test-report.md标准化报告。

报告核心内容：

• 整体概况：用例总数、通过数、失败数、通过率；
• 明细统计：每条 Case 的执行步骤、操作结果；
• 失败复盘：失败 Case/Step 汇总，标注失败原因；
• 截图索引：关联执行过程中的截图，快速定位问题。

五、总结

Midscene整体使用下来的体验，并不是很完美。因为它采用的是视觉识别模式，执行每一步操作都需要进行截图、识别图片，不仅消耗的token比较多，还需要等待元素响应，耗时较长——如果执行完整的测试用例集，整体耗时会比传统自动化方案久一些。

但必须承认，这种视觉识别的模式，大概率会是未来UI自动化测试的主流方向。试想一下，当AI识别速度、操作速度足够快，token成本足够低时，视觉识别无需定位元素、无需适配不同页面版本，能大幅降低UI自动化的门槛，尤其适合高频迭代、UI变动频繁的项目。

所以，感兴趣的同学还是可以学习了解的，当做一种UI自动化思路的补充方案。另外关于UI自动化测试这块，我这边还在持续调研和实践其他方案，后续会整理成对比文档，帮大家找到更适合自己项目的自动化方案。