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

头图 |  CSDN 下载自东方IC

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

测试面临的挑战

移动端主要测试类型包括功能测试、性能测试、稳定性测试、兼容性适配测试等,针对响应式测试主要难点在兼容性测试,原因是兼容性测试范围扩大,测试效率面临较大挑战。具体表现在以下几方面:

1)端类型增加,之前关注Phone端即可,现在要关注Phone、Pad、折叠屏、车机大屏

2)组件样式繁多,Phone端组件样式显示一种状态,现在不同屏幕设备、不同状态下组件呈现样式布局会有相应不同

3)系统交互多,包括分屏、浮窗、平行视界、系统转屏设置与响应式交互

4)测试对象多,需要考虑所有的页面、组件、弹窗功能遍历

5)多业务场景交互,比如全屏播放

技术实现分析

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

响应式业务流程

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

1、UI显示由响应式SDK完成

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

2、数据处理逻辑由上层业务完成

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

除此之外,针对业界厂商目前支持的屏幕尺寸变化能力,需要考虑到不同能力下的交互测试:

1、系统支持旋转屏幕设置;

2、Android Pad支持分屏,部分华为Pad支持平行视界能力;

3、iPad支持浮窗、分屏能力。

测什么?

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

测试范围

1)分层:SDK测试、业务层测试;

2)分端:Phone、Pad、折叠屏、车机大屏;

3)分平台:Android、iOS;

4)分能力:响应式开/关;

5)分机型:iPad分屏、浮窗能力,见下表:

设备

浮窗

分屏

iPad mini 2

iPad mini 3

iPad mini 4

iPad Air

iPad Air 2

iPad Pro

主要测试点

怎么测?

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

1、功能测试

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

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

2、组件自动化测试

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

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

3、兼容性测试

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

机型选择

测试平台

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

1)通用脚本降低脚本编写成本、提高执行稳定性、快速开展业务测试

通用脚本基于scheme跳转能力,解决了业务入口触达稳定性问题;提供自动滚屏和基于元素查找的点击功能,还包含通用弹窗处理以及登录功能。

2)长截图能力解决了不同分辨率以及不同物理尺寸下图片验证的难点

长截图实现方式有两种,一种滚屏过程中截长图;一种滚屏截图,最后拼接成长截图能力。

3)图像验证解决人工检测问题

通过图像识别算法,智能筛选出可疑图片,大大减少了人工检测图片数量。

 

4、其他测试

1)稳定性测试

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

2)性能测试

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

3)数据测试

第一,响应式旋转屏幕时,组件行数列数会发生变化,此时要保证不同数据处理下,埋点数据下发正常:

第二,响应式映射处理的组件埋点数据下发与映射前的组件埋点一致。

总结

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

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

一是,如何保证开发新的组件支持响应式

建立响应式编码规范,对代码进行静态扫描,对不符合的规范进行告警

二是,如何高效保障sdk的增量修改的质量

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

更多精彩推荐
☞小霸王被申请破产重整;虎牙员工自曝被HR抬出公司;Office 2010被微软终止服务|极客头条
☞九问国产操作系统,九大掌门人万字回应!
☞突围 2020!程序员这样学 AI !☞一文读懂机器学习“数据中毒”☞深度揭秘:腾讯存储技术发展史
☞用0和1书写新金融体系,DeFi的火焰已无法熄灭
点分享点点赞点在看

来看看优酷是如何测试 App 响应式布局的!相关推荐

  1. 一个超酷的横向多列响应式布局效果

    日期:2013-1-26  来源:GBin1.com 在线演示 还记得上周介绍的一个超酷的星际争霸2视差滚动效果吧,如果你希望生成一个类似ipad效果的漂亮横向多列响应式滚动效果的话,那么你可以考虑使 ...

  2. 优酷APP响应式布局在消费场景的落地之Android篇

    作者 | 阿里巴巴文娱技术 吉欧 头图 |  CSDN 下载自东方IC 背景 随着时代的发展,硬件设备的类型也是百花齐放,出现了各种各样的大屏设备(pad.折叠屏.车机)及屏幕模式(多屏.分屏),所以 ...

  3. 优酷、腾讯、咪咕争相布局,体育综艺为何备受青睐?

    2018年是名副其实的体育大年,从年初的平昌冬奥会,到6月中旬的俄罗斯世界杯,再到刚刚结束的雅加达亚运会,三项顶级赛事都为体育迷们带来了无与伦比的狂欢盛宴,体育无疑是今年最火热的话题.借着这些体育赛事 ...

  4. 响应式布局技术:App如何适配不同尺寸的设备

    作者 | 阿里巴巴文娱技术 叮东 头图 |  CSDN 下载自东方IC 背景 近年来,大屏手机.安卓Pad.iPad.折叠屏手机.车机大屏等大尺寸设备发展迅猛.尤其是2020年二季度中国平板市场出货量 ...

  5. 10款非常有效的帮助你设计超酷响应式布局的jQuery插件

    日期:2012/02/24  来源:GBin1.com 如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇. 相对于传统的页面设 ...

  6. 【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了

    微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌 握HTML网页设计前端盒子的布局.嵌套,及css效果的 使用... 微信官网首页主要有以下几个需要关注的 ...

  7. 三层架构下,优酷视频搜索测试体系很复杂吗?

    作者| 阿里文娱测试开发专家 熙闫 责编 | 夕颜 简介 优酷搜索承担着内容分发场的头部兵的重任,海量的视频内容都要依赖搜索触达和呈现给 用户,而且逐渐扩大范围,开始向阿里文娱全系产品提供搜索服务和能 ...

  8. web app iphone4 iphone5 iphone6 iphone6 Plus响应式布局 适配代码

    来源:http://www.phptext.net/article_view.php?id=387 -------------------------------------------------- ...

  9. 生日倒计时炫酷源码html,JS响应式生日倒计时

    HtmlCssJs 距离亲爱的生日到来还有: 天 时 分 秒 /* Base Reset CSS */ * { margin:0; padding:0; } html,body { height:10 ...

最新文章

  1. 哈希--直接定值法和除留取余法
  2. Decorator pattern
  3. MAVEN构建的各个环节及常用maven命令
  4. [数据库] Navicat for MySQL事件Event实现数据每日定期操作
  5. 理解音视频 PTS 和 DTS
  6. 算法导论系列:分治算法
  7. Linux操作系统备份之二:通过tar拷贝分区实现Linux操作数据的在线备份
  8. 在石家庄扣完五险一金到手5000,算什么水平?
  9. cv::createTrackbar cv::threshold
  10. Android vs iOS vs BlackBerry: Which is the most secure holiday gift?
  11. android投影仪分辨率是多少,如何挑选投影仪流明 分辨率?千万不要这样选,不然后果不堪设想...
  12. BaseTestCase system 1.0 体验版
  13. 团队作业7——Alpha冲刺之事后诸葛亮
  14. software_reporter_tool 进程关闭的优雅法子
  15. 阿里云服务器如何进行快照备份
  16. 正方教务系统新版php,正方教务系统最新sql注射漏洞修复 | CN-SEC 中文网
  17. My favorite player-Davor Suker
  18. 使用Matlab对矩阵元素进行大小排序(开源)
  19. android 音频在手机上测试播放不流畅问题
  20. 数据库操作出现Duplicate entry ‘测试‘ for key ‘uk_name‘问题

热门文章

  1. asp.net怎样在URL中使用中文、空格、特殊字符
  2. python netsnmp与pysnmp
  3. JavaScript事件 以及和jQuery中事件使用对比
  4. windows 下opencv for python 的安装
  5. java 中的 ThreadLocal
  6. favicon.ico 404的问题(title栏前面的图标)
  7. 3 HTMLJS等前端知识系列之javascript的基础
  8. java时间格式24小时制12小时制
  9. ASP.NET通过OLE DB操作Excel
  10. Adhesive框架系列文章--报警处理流程使用实践