优酷APP响应式布局之测试方案 | 《优酷响应式布局技术全解析》第七章

上一章:优酷响应式在消费场景的落地 iOS | 《优酷响应式布局技术全解析》第六章>>>

作者| 阿里巴巴文娱技术 刘丽琴

响应式布局是在屏幕尺寸发生变化时,APP的页面、组件按照规则进行动态自适应,实现一套代码兼容多尺寸终端设备。响应式技术应用在多端上减少了开发人力投入,但是对于测试来说需要测试的范围相对扩大,要保障多端、多尺寸的APP质量,下面介绍优酷在响应式测试过程中沉淀的测试能力及方法。

一、测试面临的挑战

移动端主要测试类型包括功能测试、性能测试、稳定性测试、兼容性适配测试等,针对响应式测试主要难点在兼容性测试,原因是兼容性测试范围扩大,测试效率面临较大挑战。具体表现在以下几方面:
1)端类型增加,之前关注Phone端即可,现在要关注Phone、Pad、折叠屏、车机大屏
2)组件样式繁多,Phone端组件样式显示一种状态,现在不同屏幕设备、不同状态下组件呈现样式布局会有相应不同
3)系统交互多,包括分屏、浮窗、平行视界、系统转屏设置与响应式交互
4)测试对象多,需要考虑所有的页面、组件、弹窗功能遍历
5)多业务场景交互,比如全屏播放

二、技术实现分析

针对以上挑战,测试团队对优酷全端响应式适配进行深入分析,得出相应的测试点。主要从以下几方面进行分析:

响应式业务流程
优酷APP响应式布局之测试方案 | 《优酷响应式布局技术全解析》第七章

如上图显示,响应式测试分为UI测试和数据处理逻辑测试两部分:

1) UI显示由响应式SDK完成
响应式SDK提供了在不同尺寸设备上通用的响应式能力,在屏幕尺寸发生变化时,页面样式、布局的UI显示也会发生相应的变化,这块主要关注兼容性适配测试。

2)数据处理逻辑由上层业务完成
数据处理主要进行了数据合并、数据过滤、数据映射及数据补全的逻辑处理,重点关注响应式和非响应式下数据处理逻辑的正确性。这块就需要构造各种不同数据进行逻辑覆盖验证。

除此之外,针对业界厂商目前支持的屏幕尺寸变化能力,需要考虑到不同能力下的交互测试:
1)系统支持旋转屏幕设置;
2)Android Pad支持分屏,部分华为Pad支持平行视界能力;
3)iPad支持浮窗、分屏能力。

三、测什么?

由以上的分析结果不难得出测试范围以及主要的测试点,另外一个重要部分,是需要对响应式开关进行测试,已确定及时止损的能力。

1、 测试范围

1)分层:SDK测试、业务层测试;
2)分端:Phone、Pad、折叠屏、车机大屏;
3)分平台:Android、iOS;
4)分能力:响应式开/关;
5)分机型:iPad分屏、浮窗能力,见下表:

优酷APP响应式布局之测试方案 | 《优酷响应式布局技术全解析》第七章

2、 主要测试点

优酷APP响应式布局之测试方案 | 《优酷响应式布局技术全解析》第七章

四、怎么测?

通过对响应式的测试分析,知道了测哪些,下面从功能测试、兼容性测试等方面来阐述怎么测。

1、 功能测试

功能测试主要验证数据处理逻辑在大屏端的正确性。数据处理逻辑主要对组件进行了数据合并、数据映射、数据过滤及补全,针对数据的构造主要通过mock的能力实现,确认大屏端逻辑处理正确。

同时,数据处理逻辑不能影响Phone端的组件页面,这部分测试主要进行回归测试,并且回归量相对较大,为了提高测试效率优酷打造了组件自动化测试方案。

2、组件自动化测试

优酷APP响应式布局之测试方案 | 《优酷响应式布局技术全解析》第七章

该测试借助图像识别,能够很好的规避技术改造的影响,稳定性较好。从以上5个方面解决问题,通过设计测试场景,将线上引流数据清洗后自动构造所需组件数据,自动应用mock数据,基于魔镜算法服务进行相似度+配置化的UI对比。

本次组件测试,覆盖首页/频道页35个组件,正常、异常mock文件500+,dailybuild高频测试,在响应式项目中很好的保证了组件测试的力度和覆盖度。

3、兼容性测试

响应式测试难点在于兼容性测试,这部分要在多端、多系统、多尺寸上验证UI显示,测试工作量较大;针对兼容性测试优酷推出了优化后的兼容性测试方案,包括机型选择和测试平台:

机型选择

优酷APP响应式布局之测试方案 | 《优酷响应式布局技术全解析》第七章

测试平台

为了解决兼容性测试成本问题,针对兼容性测试做了以下改进:

1) 通用脚本降低脚本编写成本、提高执行稳定性、快速开展业务测试
通用脚本基于scheme跳转能力,解决了业务入口触达稳定性问题;提供自动滚屏和基于元素查找的点击功能,还包含通用弹窗处理以及登录功能。

2)长截图能力解决了不同分辨率以及不同物理尺寸下图片验证的难点
长截图实现方式有两种,一种滚屏过程中截长图;一种滚屏截图,最后拼接成长截图能力。

3)图像验证解决人工检测问题
通过图像识别算法,智能筛选出可疑图片,大大减少了人工检测图片数量。

优酷APP响应式布局之测试方案 | 《优酷响应式布局技术全解析》第七章

4、其他测试

1)稳定性测试
大屏端稳定性测试是很有必要的,特别是iPad端低端设备居多并且内存较Phone端也相对低,所以需要考虑这些设备上的稳定性问题。

2)性能测试
响应式方案会显示更多的图片和数据,其数据解析和图片渲染过程会对APP启动和流畅度,内存产生明显影响。

3)数据测试
第一,响应式旋转屏幕时,组件行数列数会发生变化,此时要保证不同数据处理下,埋点数据下发正常:
第二,响应式映射处理的组件埋点数据下发与映射前的组件埋点一致。

五、总结

针对响应式测试在功能测试、兼容性测试方面做了大量的研究,沉淀了组件测试方案和兼容性测试方案,即保障了响应式高质量上线,又提高了测试效率。

后续的响应式测试如何高效支持持续迭代对测试来说是一个新的挑战,主要在两方面:

一是,如何保证开发新的组件支持响应式
建立响应式编码规范,对代码进行静态扫描,对不符合的规范进行告警。

二是,如何高效保障sdk的增量修改的质量
响应式sdk开源后,将脱离APP独立存在,针对sdk单独的测试方案需要考虑开展单元测试和覆盖率分析进行保障sdk质量。

上一篇:Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现


下一篇:解决 cesium 地图因为transfrom 导致 地图偏移,点击不准的问题