2-乔瑞凯-泛前端领域的统一化低成本测试平台.pdf

1、基于虚拟化的小程序/H5自动化测试方案2023 深圳站乔瑞凯（茅舍）SoloPi作者，目前专注于泛前端领域自动化测试平台建设。无线开发专家嘉宾照片蚂蚁集团-支付宝技术部-质量与技术风险部-工程效能2023 深圳站目录CONTENTS现有自动化方案的困境01 虚拟化容器的渲染方案02 泛前端统一UI自动化引擎03 虚拟化方案落地成果04 2023 深圳站01现有自动化方案的困境2023 深圳站移动端研发变迁小游戏高效&能力完整独立技术栈、造轮子迭代发版&审核较慢跨平台&体验接近快速迭代&低成本大量独立发布稳定性保障真机流程冗长统一实现端能力提供海量三方随机且易集中更新高时效性要求2023 深圳站

2、传统基于真机的自动化测试2023 深圳站继续使用真机方案将面临的问题迭代堆积如山自动化难以消化回归手工执行动化测试流程装包切环境登录账号等预加载跳转测试逻辑测试流程冗长2023 深圳站核心诉求效率高流程简容量大2023 深圳站02虚拟化容器渲染方案2023 深圳站先看看效果高流畅度、低（服务器+设备）资源压力、低渲染压力虚拟机云真机虚拟容器2023 深圳站什么是虚拟化容器方案容器管理资源管理框架切志安全络多媒体H5容器UI组件核身智能投放余额宝碑花呗森林业务层服务层组件层框架层H5容器H5JSAPI络多媒体资源管理程序渲染层Page1Page2逻辑层Logic1Logic2AppData消息传

3、递H5层Native层前端化实现Native依赖层的虚拟容器方案2023 深圳站小程序渲染引擎1、底层环境模拟2、多窗口渲染模式3、小程序生命周期管理模拟4、JSAPI前端化实现程序渲染引擎端环境模拟资源代理服务（跨域持）逻辑层程序Worker逻辑代码渲染层数据监控/MockHarmer.js模拟势操作程序APPX程序Render代码络请求服务数据管理基于多窗的程序渲染框架Worker-Iframe/TabRender1-Iframe/TabRender2-Iframe/Tab命周期控制器户态仿真JSAPI扩展RPCConfig频控制设备信息社交插件CDP跳转2023 深圳站1、底层环境模拟2

4、、H5环境模拟（在线&离线）3、XHR&DOM资源Hook4、页面跳转栈H5渲染引擎Q1、跨域权限管控Q2、基础环境依赖Q3、动态加载资源Q4、JSAPI依赖H5渲染引擎环境模拟浏览器UA等基础信息替换location/window等信息注（虚拟）域名转化JSAPI扩展RPCConfig频控制设备信息社交插件CDP跳转前端代码逻辑数据监控/MockHarmer.js模拟势操作跳转栈管理器端环境模拟资源代理服务（跨域持）数据管理户态仿真动态资源Hook基于XHook的XHR代理DOM树监听&资源HookIframe仿真前端容器2023 深圳站虚拟容器应用栈1、真实应用跳转栈2、应用生命周期还原3

5、、统一的应用资源控制应栈管理器H5/程序栈管理资源服务Mock服务跨应调度控制H5 1栈1程序1栈2程序2栈3H5离线包1栈4单应命周期控制器启动恢复暂停销毁设备UI库H5渲染引擎H5渲染引擎程序渲染引擎程序渲染引擎2023 深圳站非/少侵入式渲染方案WebGL、WASM等技术支持前端技术支持2023 深圳站真机还原1:1复刻真机，对UI细节完整还原缺失屏幕细节真机截图模拟器方案VS2023 深圳站03泛前端统一UI自动化引擎2023 深圳站虚拟化方案带来的优势成本方面设备设备远程真机远程真机虚拟机虚拟机虚拟容器虚拟容器流畅度受限网络低高设备成本高中等偏低服务器成本低高中等支持场景全部全部H5

6、/小程序易用性偏差差好2023 深圳站虚拟化方案带来的优势工程方面前置环境准备降低95%，整体耗时降低60%+核业务链路1-2min安装测试包1min切环境/登录账号1-2min等待预加载0.5min进标10s执操作1执操作2执操作3结束测试核业务链路1-2min注登录态10s进标10s执操作1执操作2执操作3结束测试真机执虚拟化执2023 深圳站虚拟化方案投入到自动化领域动化引擎事件驱动控件获取录制回放现有前端方案问题1、依赖CDP驱动2、录制插件不靠谱3、Iframe适配度差2023 深圳站前端事件驱动方案1、不挑浏览器2、前端&Puppeteer通