文字内容
1. 基于精准测试及图像技术的前端质 量量保证实践 刘道伟 百度资深测试工程师
2. ⽬目录 • 背景介绍 • 前端精准测试实践 • AI及图像技术实践 • 如何从零打造前端质量保证体系
3. 背景介绍
4. 搜索前端简介 ⼤大家印象⾥里里中的搜索结果 实际的搜索结果
5. 搜索前端简介 模板 资源 组件
6. 问题及解决思路路 背景:如何进⾏行行百级规模组件、千级规模模板的快速回归,保证⽇日均10多个需求的上线,对前端的质量量保证能⼒力力提 出了了挑战。! 问题: 思路: • 新功能兼容性测试耗费⼈人⼒力力 ! • 回归量量⼤大,⼿手⼯工难以覆盖! • 展现的⾃自动化效果难以验证! • 测试分析:通过精准测试缩减测试范围,提⾼高测试覆盖! • 测试执⾏行行:⻚页⾯面对⽐比、真机⾃自动化、效果测试⽤用例例! • AI:图像对⽐比、异常图⽚片识别、机器器学习、数据沉淀! ! UI自动化 -> 全环节 • 测试前:通过数据分析,解决测什么,如何测的问题 • 测试中:通过多种自动化方案,解决测试执行的问题 • 测试后:测试产出的标注数据、问题数据服务与测试分 析及执行 测试前! 测试后! 测试中!
7. 整体⽅方案
8. 前端精准测试实践
9. 为什什么前端需要精准测试 迭代 快! 组件 化! 兼容 性! 前端⼿手⼯工⿊黑盒测试覆盖度低,成本⾼高! 前端精准测试思路路 ⼈人⼯工构造输⼊入! 智能挖掘! 全量量⽤用例例回归! 智能⽤用例例筛选! 机型全覆盖! 兼容性分析!
10. 整体⽅方案 应⽤用场景! ⼿手⼯工测试! ⾃自动化测试! 质量量评估! 数据服务! 平台建设! 分布式计算! 平台化服务! 数据管理理! ⽤用户交互! 系统能⼒力力! 代码⻛风险分析! ⾃自动执⾏行行! 智能⽣生成测试集! 测试策略略输出! ⼿手⼯工执⾏行行! ! 知识库! 流量量数据! 测试⽤用例例! 业务数据! 测试数据! 测试数据分析! 问题⾃自动定位! 问题回归验证! 测 试 验 证 ! 精 准 数 据 测 试 执 ⾏行行 ! 代码改动影响分析! ! 测 试 分 析
11. 离线输⼊入挖掘 ᕚӤၞᰁහഝᦇᓒ 6SDUN හഝ༄ັ 2'3෭ப ෭ப឴‫ݐ‬ හഝຽᦕ ਁྦྷ൉‫ݐ‬ හഝᬦᄁ ਁྦྷᥴຉ ෭பᘸ‫ݳ‬ AFS 86෭ப ๢࢏ು໏ හഝႴ။ 8%6 ‫ڹ‬ᒒդᎱ ‫ڹ‬ᒒ෭ப ӱ‫ۓ‬ၥᦶහഝᦇᓒ ᕟկහഝ ၥᦶአֺ ཛྷ຃හഝ ၥᦶᳯ᷌ ၥᦶᕪḵ හഝრ හ ഝ ಬ ‫ݐ‬ හ ഝ ᥴ ຉ ෭பು໏ ᕟկ ཛྷ຃ ᩒრ‫ݩ‬ හഝᦇᓒ හ ഝ Ⴔ ။ .DIND MapReduce හ ഝ ‫ى‬ ᘶ (ODVWLF6HDUFK ᘸ‫ᦇݳ‬ᓒ ṛ᭛ᖨਂ API ShowX MySQL හഝਂ‫ؙ‬ හഝള‫ݗ‬
12. Case和函数映射关系⽣生成! ⽤用例例筛选 开发插桩方 案 提交代码! 测试用例管理 DIFF代码 结果分析! 代码插桩 编译插桩代 码 执行测试用 例,测试插桩 后的代码,收 集执行函数 组件! ⽂文件! 函数! ⽤用例例执⾏行行! 代码分析 代码和测试用例 的双向回溯! ! ! ! 映射关系! JS调⽤用链! 业务影响! 测试数据! ⼿手⼯工⽤用例例! ⾃自动化⽤用例例!
13. 兼容性分析 流量量分布! 机型权重! 最⼩小覆盖集! 浏览器器权重! 最全覆盖集! 历史问题分布! 兼容性知识库!
14. AI及图像技术实践
15. UI⾃自动化现状 Ø典型应⽤用 基于DOM的方案 Selenium等! Ø优势 精确验证、可模拟复杂的交互流程等! Ø劣势 验证点局限(标签是否存在、死链、基础交互等),⽆无 法检测样式错乱;使⽤用场景局限,⼀一些真机场景⽆无法获取dom! Ø典型应⽤用 基于图像的⽅方案! 端上⾃自动化! Ø优势 不不依赖DOM,可⽀支持多端运⾏行行! Ø劣势 技术难度⾼高,样式正确性难以⾃自动判断!
16. UI⾃自动化解决思路路
17. 智能图像对⽐比
18. 机器器学习识别展现异常
19. 基于OCR的乱码识别
20. 常⻅见异常场景
21. 基于元素相对位置的模型分类⽅方法 思路: Ø常见展现问题:错位、遮挡、元素缺失 Ø模板样式可枚举 Ø模板展现遵循一定的规范 方案:以逻辑区块和相对位置为要素,将展现结 构抽象为数学模型,用机器学习的思想对模板展 现进行分类,可用于断言。 Ø元素提取 基于轮廓的图像切割方法 Ø元素分类 基于噪点值&尺寸比的分类方案 Ø文本块合并 & 图标识别 基于距离和区域颜色的合并策略 图像匹配识别图标(闪电标、链接符等) Ø模板建模 基于有向完全图的多维矩阵模型
22. 基于元素相对位置的模型分类⽅方法
23. 基于元素相对位置的模型分类⽅方法 Ø解决了模板展现自动断言的问题,为模板做自动功能验证提供了基础。 Ø首次实现了模板内的样式全覆盖,让模板测试从模板维度的覆盖发展到模板内子样式维度的覆 盖。 Ø已完成线上展现 top 的模板的训练,图像元素切分准确率>95%,异常识别准确率100%
24. 如何从零打造前端质量保证体系
25. 前端质量量保证 02 01 定标准 建能力 ①建立适用前端的持续 ①环境部署能力 集成质量评价体系 ②不同业务不同侧重 03 04 评优劣 促优化 ①测试任务完备性 ②自动化测试能力 ②覆盖度 ③监控能力 ③流水线稳定性 ④。。。 ④执行效率 ①周级产出流水线数据回 溯 ②不断迭代优化
26. 前端质量量保证 – 持续集成
27. ⼩小结 • 前端的自动化 不等于 UI自动化 • 图像、AI等技术的普及给前端的质量保证带来新的思路 • 前端质量保证建设是一个“蓝海”,大家可以充分发挥