多端场景的质量保障体系

1. 多端场景的质量保障体系岑俊伟京东 · 凹凸实验室高级前端工程师

2.

3. 个人介绍岑俊伟京东 · 凹凸实验室 · 高级前端工程师 • 曾负责京喜小程序首⻚技术架构、工程化及性能优化相关工作，负责 Taro 最佳实践的落地和推广。 • Tiga 自动化解决方案作者，在小程序质量保障方面有较深入研究。

4. 1 多端应用的自动化困境 2 跨端自动化解决方案 Tiga 3 质量保障体系化 4 总结与展望

5. 1 多端应用的自动化困境 2 跨端自动化解决方案 Tiga 3 质量保障体系化 4 总结与展望

6. 需求 | 电商应用对 UI 界面稳定性的要求高商品露出失败 2. 价格丢失商品推荐不准确广告收益受损 3. 商品空窗 1. 楼层缺失大促场景界面不稳定 4. 广告位曝光上报丢失 5. 千人千面策略异常 ……

7. 理论 | 自动化测试金字塔与反模式用户视⻆人工测试成本高，效率低 UI 测试服务/接口测试开发视⻆单元测试自动化金字塔成本低，效率高

8. 理论 | 自动化测试金字塔与反模式人工测试人工测试功能测试团队 UI 测试 UI 测试 QA 团队集成测试集成测试单元测试单元测试蛋筒冰淇淋模式纸杯蛋糕模式开发团队

9. 目标 | 京喜应用期望的 UI 自动化测试 • 基于 Taro 的同构方案跨平台 • H5 • 微信小程序全自动低成本、易扩展 • 测试上云 • CI / CD 集成 • 100+ 工程师团队 • 事业群核心项目

10. 现状 | 常⻅的前端 UI 自动化测试框架框架 Selenium Puppeteer Appium 界面录制底层原理跨平台用例开发语言问题支持 WebDriver 协议 PC、Android、iOS 浏览器 Python、Java、Ruby、 JS…… 上手难度高不支持小程序不支持 Chrome DevTool Protocol Chrome JS 不支持小程序支持 WebDriver 协议 Android、iOS 不支持浏览器 Python、Java、Ruby、无法控制小程序逻辑层 JS…… 获取的元素无法区分 AirTest 支持图像识别浏览器、Android、iOS Python 识别准确率有限无法控制小程序逻辑层 Miniprogram Automator 不支持小程序基础库微信小程序 JS 不支持浏览器 Minium 不支持小程序基础库微信小程序 Python 不支持浏览器

11. 困境一 | 缺乏成熟的 H5 和小程序跨平台方案解决原生 App 场景 Minium Miniprogram Automator

12. 困境二 | UI 自动化测试在实际业务中的落地成本高昂用例开发&维护工作繁杂回归测试成本高业务逻辑变更频率高测试脚本不规范 UI 布局经常变化用例维护的⻆色不明确难以做到测试无感

13. 困境三 | UI 自动化测试只能满足一部分的质量保障需求单元测试应用健康测评持续集成 …… 静态扫描

14. 1 多端应用的自动化困境 2 跨端自动化解决方案 Tiga 3 质量保障体系化 4 总结与展望

15. 02 跨端自动化解决方案 Tiga 整体思路模板化的用例开发模式自动化断言

16. 02 跨端自动化解决方案 Tiga 整体思路模板化的用例开发模式自动化断言

17. 系统架构 HttpMockTemplate 模板层接口层 HttpMockPlugin App ScreenshotTemplate … Page Element Request Response … WebSocket NodeJS Server 代理层驱动层 HTTP HTTPS Puppeteer Chrome/Chromium 应用层 H5 应用 WebSocket Miniprogram Automator 微信开发者工具小程序应用 Matcher

18. 1) 兼容多端 | 跨端之间的概念差异一个浏览器容器可以同时存在多个标一个小程序容器只能存在一个逻辑层，签⻚，也就是可以存在多个逻辑层运行在 JSCore 中

19. 1) 兼容多端 | 跨端之间的概念差异 WebView 渲染线程互斥逻辑线程一个 H5 应用只有一个渲染线程，因此一个小程序应用可以拥有多个渲染层，只能通过一个 Page 实例来操控视图即可以通过多个 Page 实例操控视图

20. 1) 兼容多端 | 对⻬调用主体和执行主体一个 H5 应用默认为单标签⻚模式，应用在部分场景下的调用主体上升到 App 实例，但实际执行主体为 Page 实例

21. 1) 兼容多端 | 对⻬调用主体和执行主体小程序应用在部分场景下的调用主体下放（代理）到 Page 实例，但实际执行主体都是在同一个逻辑层

22. 1) 兼容多端 | 通过中介者来维护调用/执行主体间的映射关系 app.setStorage() page.setStorage()

23. 1) 兼容多端 | 封装统一的高阶 API

24. 1) 兼容多端 | 编写兼容多端的测试用例跨端测试用例 H5 环境初始化小程序环境初始化

25. 2) 请求模拟 | 小程序自动化 SDK 的请求模拟问题 `mockWxMethod` 存在调用延时很多场景下这种接口覆盖方式不能即使生效，譬如应用在首屏接口上 `mockWxMethod` 的传入参数会被序列化这意味着每次临时修改接口模拟参数都需要先调用正常的小程序接口请求 `restoreWxMethod` 消除 mock 影响，再重新覆盖，十分繁琐 Miniprogram Automator 通过 `mockWxMethod` API 来覆盖 wx 接口的调用结果

26. 2) 请求模拟 | 小程序自动化 SDK 的请求模拟问题 `mockWxMethod` 难以模拟 WS 请求正常的小程序 WebSocket 请求通过 `mockWxMethod` API 的方式很难实现对 WebSocket 请求的模拟

27. 2) 请求模拟 | 自建本地代理服务

28. 2) 请求模拟 | 代理服务启动流程

29. 2) 请求模拟 | 提供多种方式拦截请求 02 通过事件的方式拦截 WebSocket 请求 01 通过事件的方式拦截 HTTP 请求 03 通过规则表的方式拦截请求

30. 3) 指令同步化 | NodeJS 显式异步带来的可能性麻烦用例开发者需要关心大量异步调用对于 UI 自动化测试这种需要高频通信和 I/O 操作的场景来说，async/await 关键字会大量出现异步向上传染 async/await 显式异步如果在 NodeJS 脚本中某个表达式是异步调用的话，那么异步声明很有可能需要逐层向上传染 “ • async/await 的设计是有意义的，它使并发编程变得简单； • 但在自动化测试的场景中，我们或许可以更加简便；同步写法 ”

31. 3) 指令同步化 | Fiber 解决异步调用复杂度问题 Fiber 是什么？ node-ﬁbers 是基于 v8 实现的协程工具，可以使在异步环境中通过同步的编程方式编写和运行代码 Fiber 的缺陷？性能据说是 callback 方式不兼容 Node.js v16.0.0 以的 70% 左右及更高的版本 “ 异步转同步的思路 ”

32. 3) 指令同步化 | Promise 异步指令链异步指令链的优势 async/await 异步写法指令链化自动等待异步指令指令异常自动重试 waiting… waiting… 链上自动有序处理异步逻辑内置非空判断提高脚本容错性

33. 3) 指令同步化 | Promise 异步指令链的缺陷同/异步调用混合时注意执行顺序由于所有异步指令都会在链上有序异步地执行，所以同步表达式需要安插在 Promise 链中才能获取到准确的返回值 “ 同步转异步的思路 ”

34. 4) 链式调用 | 自定义指令域 Global App Page 支持自定义指令 Elm

35. 02 跨端自动化解决方案 Tiga 整体思路模板化的用例开发模式自动化断言

36. 1) 用例模板化 | 针对测试流程的抽象尝试开始开始开始跳转⻚面跳转⻚面跳转⻚面模拟请求数据模拟请求数据模拟请求数据刷新⻚面模板刷新⻚面点击元素 Action 点击元素截图自动校对截图自动校对截图自动校对 …… 结束结束结束测试用例 A 流程测试用例 B 流程 “ 封装 ” “ 抽象 ” 插件

37. 1) 用例模板化 | 减少测试用例开发的重复性工作配置化的注入方式用例模板与场景绑定，支持测试用例复用

38. 2) 插件化架构 | 建设模板共建渠道 01 编写插件 02 注入插件插件生命周期

39. 3) 模板化实践 beforeGo • • beforeAllSpecs • • • beforeAllSpecs afterEachSpec 京喜商详变量初始化设置模拟器型号设置 userAgent 设置 cookie 支持 JSONP 格式 • 扩展 beforeScreenshot 接口优化图片校对参数 • 销毁变量 • Events 消费 Rules 消费 Proxy Server Rules 消费 on('request', fn) “ addHttpRules 灵活可扩展 ”

40. 02 跨端自动化解决方案 Tiga 整体思路模板化的用例开发模式自动化断言

41. 1) 截图断言 | 弱校验与强校验弱校验校验元素是否存在 expect($('.elm')).not.toBeNull() 校验元素值是否正确 expect($(‘.elm’).value()).toEqual(‘百亿补贴’) 调用逻辑简单无法确保元素渲染正常大量的元素校验成本高

42. 1) 截图断言 | 弱校验与强校验强校验 * 基于 pixelmatch 的图片像素检测能力测试结果无偏差需要数据层控制变量需要准备基准值正确的渲染表现基准值校验结果测试中的渲染表现测试值

43. 1) 截图断言 | 自动化流程

44. 1) 截图断言 | 自动化流程截图断言接口调用案例异常结果提示

45. 1) 截图断言 | 精准比对 01 只对目标元素进行截图校对 02 只对目标区域进行截图校对

46. 1 多端应用的自动化困境 2 跨端自动化解决方案 Tiga 3 质量保障体系化 4 总结与展望

47. 03 质量保障体系化单元测试集成应用健康度评测测试上云和 CI 集成

48. 03 质量保障体系化单元测试集成应用健康度评测测试上云和 CI 集成

49. 单元测试集成 mocha + chai JS 函数单元测试案例 jsdom miniprogram simulate 双线程单线程 • 加载和渲染自定义组件 • 组件数据初始化、获取和更新不需要启动开发者工具 • 增删改查组件元素节点 • 触发组件事件 • 触发组件生命周期模拟运行环境能力有限 • 获取和调用组件实例的属性与方法

50. 03 质量保障体系化单元测试集成应用健康度评测测试上云和 CI 集成

51. 1) H5 健康度检测 | lighthouse lighthouse 使用方式 • 在 Chrome DevTools 中使用 • 使用 Chrome 扩展程序 • 使用 Node CLI 启动 • 通过 Node 模块编程式调用支持插件化扩展 lighthouse 检测结果

52. 1) H5 健康度检测 | lighthouse 插件 03 审计项获取中间产物作为入参，计算得分 04 审计输出的 LHR 数据进行分类组装后输出 DOM.getDocument 获取节点数、节点层级 Runtime.evaluate setState 调用次数 Proﬁler.takePreciseCoverage JS 代码覆盖率 02 采集器收集⻚面信息 01 Chrome DevTools Protocol 基于跨端的属性 lighthouse 架构图为小程序端提供参考价值

53. 2) 小程序健康度检测 | 开发者工具 audits JSON 数据封装个性化检测报告小程序开发者工具 Audits 结果关键指标的 details 有限

54. 03 质量保障体系化单元测试集成应用健康度评测测试上云和 CI 集成

55. 1) 测试上云 H5 应用发布预发环境服务器安装 Chrome Tiga 云测后台配置测试用例关联执行路径服务器安装 Tiga 中心化环境服务器安装开发者工具关联端口服务器拉取&构建小程序代码远程登录开发者工具 Tiga 云测后台配置测试用例云端执行自动化测试输出测试报告

56. 2) CI 集成 UI 自动化测试 npm install 单元测试静态扫描云测试 CI 上传代码触发 CI 流程 Finish git clone npm run build CI 预览代码

57. 1 多端应用的自动化困境 2 跨端自动化解决方案 Tiga 3 质量保障体系化 4 总结与展望

58. 04 总结与展望 | 基于 Tiga 实现高效容灾演习有缓存下接口异常无缓存下接口异常无缓存无 CDN 下接口异常接口异常刷新机制楼层数据异常容错机制广告数据上报监测 ……

59. 04 总结与展望 | Tiga 业务成效 80% 38% 10+ 单次容灾演练效率提升模板用例复用占比赋能团队数商城首⻚商品详情容灾演习个人中心活动⻚ …… 自动化测试 Tiga 提效成果

60. 04 总结与展望质量保障智能化质量保障体系化质量保障工具化 • 多端 UI 自动化测试 • 模板化开发模式 • 自动化断言 • 能力集成 • 云测试平台 • 完全自动化 • 精准回归测试（代码扫描） • 智能测试路径（AI 组件识别） • 小程序用户行为回溯 • 测试录屏

61.