1. AI在前端容器质量保障中的 探索与实践 美团质效技术部 1

2. C 目 录 01 前端容器介绍 02 前端容器质量保障的挑战 03 AI 在容器测试中的实践与技术应用 04 挑战与未来展望 2

3. 01 Part One 前端容器介绍 3

4. 前端容器是什么 事件 组件 框架 API WXS WXML 充分利用Web相关标准，多端通用的 前端运行环境，抹平各操作系统的差 异，实现一致 UI 交互开发能力。解决 的核心问题是“一码多端”和“动态交 付”。 典型前端容器：微信小程序、RN、 Flutter等。 容器 4

5. 美团 App 中前端容器的应用 业务A 小程序容器 Android 业务B 业务C RN容器 iOS 业务代码几乎完全运行在 前端容器中 业务D Web容器 多种容器技术并存，适配不 同的业务场景 HarmonyOS 容器负责UI渲染与各个平台 的适配 5

6. 02 Part Two 前端容器质量保障的挑战 6

7. 前端容器技术复杂度很高 组件 框架 渲染 视图容器 画布 表单 API 组件：30+ 基础 分享 日志 基础 界面 位置 配置 导航 文本 存储 设备 网络 媒体 地图 路由 支付 文件 App 生命周期 Page 自定义组件 DOM 树 CSS样式 Native 组件 绘制 Widget 视图层 WXS 运行时 逻辑层 WXML Cascade 交互事件 7 API：500+ 框架能力：180+ CSS 属性：90+ Native 渲染：160+ 容器类型：4 布局处理 宿主 App：20+ 渲染性能 支持的平台：3

8. 容器质量保障的3个挑战 03 02 01 容器自身架构复杂 容器整体功能复杂， 对外提供的组件、API 众多，组合和边界场 景容易遗漏。 多App、多业务兼容 性、一致性难以保障 容器的宿主App众多， 业务复杂度不断提升。 需要支持直播、短视 频、长列表、卡片等等 场景，业务迭代速度 快，需要保障多种环境 下兼容性和一致性。 8 人工测试效率难以 满足高质量要求 移动端的核心基建， 需要进行功能测试、 性能测试、兼容性测 试等各种专项测试的 覆盖，人工测试难以 高效、全面、精准的 完成。

9. 分层测试策略 E2E 框架、组 件、API测试 单元测试、W3C测试 业务核心链路的 E2E 测试 构造简单测试页面，验证组件和 API 的原子能力 构造复杂测试场景，验证框架能力 单元测试 移植 W3C 官方测试用例，验证渲染功能 单个容器所需的测试用例数量 2w∼10w 9

10. AI Agent初探 AI Agent能帮我们批量生成用例吗？ 10

11. 一个生成容器测试用例的 AI Agent 设计思路 反馈用例执行结果并迭代 获取并理解容器的实现 Agent 容器功能测试用例的生成 用例执行与结果验证 容器自动化测试用例与页面生成 11

12. 核心建设目标 核心建设目标：实现一组AI Agent，自动生成容器组 件、API 、渲染等基础能力的测试用例，提高人效。 12

13. 03 Part Three AI 在容器测试中的实践与技术应用 13

14. 多Agent协同：应对复杂场景的“团队作战” 用户输入 Agent 设计功能测试用例 主控 Agent Agent 自动化用例生成 14 Agent 测试执行，结果反馈

15. 一个生成容器测试用例的 AI Agent 设计思路 反馈用例执行结果并迭代 获取并理解容器的实现 Agent 容器功能测试用例的生成 用例执行与结果验证 容器自动化测试用例与页面生成 15

16. 知识的获取与理解 API 文档 组件库文档 容器设计文档 示例用例 API 参数列表 MCP RAG AST Agent 理解 代码库等 16 组件属性列表 方法列表等

17. Agent设计测试用例 Prompt 示例 Role：你是一名经验丰富的前端测试专家，专注于 API 的测试。你的任务是为给定的 API 生成全面有效的测试用例，需要 考虑参数的有效性、边界条件、回调逻辑、权限以及潜在的错误和异常情况。确保生成的用例具备发现各类缺陷的能力。 Prompt 模板：现在你需要为API `{{API_NAME}}` 规划测试用例。该API的设计如下： {{API_SPECIFICATION_JSON}} // 前一步获取的结构化信息 请遵循以下通用测试原则： 1. **参数校验：** - 对于每个必需参数 `{{param_name}}` (类型 `{{param_type}}`)，测试其缺失的情况。 2. **成功路径：** - 规划一个使用所有必需参数的有效值进行调用的场景，并验证成功回调的结构 `{{success_callback_schema}}`。 3. **错误处理：** - 根据API定义的错误码 `{{defined_error_codes}}`，规划触发这些错误码的场景。 4. **权限：** ... 请为API `{{API_NAME}}` 输出详细的测试场景规划。 设计示例：以下是如何为API规划测试场景的示例： **示例1: API `Page.scrollTo(duration)`** - 参数: duration (number, 1-500ms) - 思考路径: - 参数校验: duration=0 (无效), duration=501 (无效), duration="abc" (类型错误), duration缺失 (如果可选)。 - 错误处理：超时，可能抛出的异常 17

18. Agent设计测试用例 大模型输出的用例示例 18

19. 自动化生成用例与数据 对容器的理解 已设计的功能 测试用例 容器测试框架 信息 示例测试页面 和用例代码 Agent Coding 19 容器新的测试 页面和用例代 码

20. 与人工代码的对比 人工用例：代码风格一般 Agent 生成的用例：标准化 20

21. 执行与结果验证 ？ 01 多维度的检查测试结果 02 增加通用的检查点 03 引入专家人工校验 Pass/Fail? 21

22. 从反馈中持续进化 将测试结果（尤其是失败的用例和发现的 缺陷）反馈给Agent和知识库 生成的代码有语法错误或执行失败， Agent尝试自我修正 人类反馈：测试工程师审查生成的用例， 提供反馈，调整 Prompt，帮助Agent改进 22

23. 整体方案 用户输入 用例设计 Agent 主控 Agent 工具 知识库 执行 执行 执行 Agent Agent Agent Coding Agent 23

24. 最终效果 测试用例生成效率 从约30个/PD提高到约100个/PD 提升约300+% 累积发现的缺陷 100+ 容器核心用例的自动化测试覆盖率提升 10∼15% 每月 24

25. 04 Part Four 挑战与未来展望 25

26. 仍然面临挑战 深度理解容器框架等复杂的业务逻辑 测试结果有效性的高精度判断 容器快速迭代背景下的 Agent 自适应能力 AI决策的可解释性、可信赖性与成本效益的平衡 26

27. 规划中的方案——容器用例集合的全自动维护 用例设计 Agent 主控 Agent 变更自动感知 风险预判 需求变更 工具 代码 Diff 测试流水线 自动适应 覆盖率引导 知识库 执行 执行 执行 Agent Agent Agent Coding Agent 27 健壮性等

28. Q&A 28

29. 招聘：测试开发岗位 邮箱：caimanling@meituan.com 更多技术干货 欢迎关注“美团技术团队” 29