无线测试之H5测试方法（1）：功能测试

　　H5与JavaScript、CSS等紧密结合后，H5一改"网页即文档"的传统局面，大大增强了网页的富媒体特性。而相比较移动原生应用，H5有着很多优点，最为显著的是：

　　·无需iOS、android等多端多版本开发，其跨平台可用性令应用只需一次开发，极大的节省了开发时间和成本；

　　·快速灵活发布，尤其相比较iOS较长的更新审核周期，任何时候都能快速更新，在唯快不破的互联网时代，是核心竞争力；

　　·他的致命缺点是响应速度慢、交互体验较差，但随着软件、硬件技术的不断快速发展，这其中的差距只会越来越小，将来只会越来越广泛的应用到各种移动场景中

　　其实，我们已能发现，现在各种尤其是营销类app都从Native APP往Hybird APP（Hybrid APP指的是半原生native半H5的混合类App）发展，比如微信、QQ、手机淘宝、支付宝等等重量级应用，都在多个入口嵌入了H5。因此，H5的测试需求也是非常大的。笔者结合自己平时的工作实战测试经验，做了较为系统且细致的测试技能总结，也希望能帮助到大家。

　　注意：以下主要是针对大部分的应用场景，即手机Hybird应用下嵌入的H5，其他场景会专门注明

　　列个提纲，主要总结的有以下几点：

　　·功能测试

　　·测试辅助工具及技巧

　　·接口测试

　　·性能测试

　　·适配测试

　　2、功能测试， 最基础且必须要保证的

　　1)登录和退出（hybird应用，浏览器隐私模式）

　　2)关注缓存（cookie，Application Cache，localStorage）

　　3)用户行为事件（点击、滑动、刷新、返回、与app切换，输入框、键盘、横竖屏切换）

　　4)页面请求（翻页、请求重复、接口降级、请求慢）

　　5)网络（无网络、弱网络、网络切换）

　　6)多媒体（图片、音频和视频、动画、地图、表格）

　　2.1、登录和退出

　　对于hybrid应用：

　　a)native已登录，h5保持登录状态；

　　b)native未登录，在H5发起需要登录的请求，则唤起native登录，登录成功后能返回到之前H5页面；

　　c)native主动退出，H5随之更新为未登录状态；

　　d)native的session失效，H5即时捕获未登录状态；

　　e)native切换账号，H5随之更新到新账号登录状态

　　隐私模式下：

　　因为cookie取不到，页面打开即未登录状态，登录后可以保持登录状态，但一旦浏览器关闭，重新打开后又需要重新登录

　　2.2、关注缓存（cookie，Application Cache，localStorage）

　　Cookie只有4k，被携带在HTTP头中，把数据保存到本地，可设置失效时间。

　　localStorage有5~10M，持久化本地存储，数据不会被发到服务器。

　　Application Cache可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。

　　在chrome自带开发工具-> Application中可以查看

　　一般建议与服务器交互的、主要的功能不要用到本地存储，具体校验点：

　　Cookie中值是否正常，比如token等数据，清掉cookie是否

　　使用localStorage存放数据：

　　a)存放的数据是否正确；

　　b)清除数据后功能是否正常；

　　c)想要重新再走一次相关的同样的流程前，建议先把数据清除

　　d)获取数据失败后是否有重试机制

　　（PS：举个例子）

　　用户在A页面做了操作后，又去B页面进行同样操作，结果直接在B页面上显示已经操作过了，导致他无法再次对B进行相关操作。

　　我们去排查，发现后端没有出错，是前端发送的请求错了，发送的一直是A的信息。

　　然后才发现，A页面，把相关数据存储在了localStorage，但是代码有漏洞，localStorage中的相关诗句还是老的A的，没有更新为B的。

　　解决方案，直接A页面相关信息传递给B，不通过localStorage

　　如果按照之前的方式，测试过程中，把实体内存对象中的数据清除掉，就会发现无法提交，所以我们不建议在localStorage存影响流程的数据。

　　清除localStorage方法：

　　1)手动在上面的视图删除

　　2)在chrome-console中写代码，然后运行，见下图

　　3)在隐私模式下测试

　　使用Application Cache存放数据：

　　a)访问页面后再断网重启应用，查看相应页面数据是否正确展示

　　b)清除数据后功能是否正常；

　　c)想要重新再走一次相关的同样的流程前，建议先把数据清除

　　d)获取数据失败后是否有重试机制

　　清除Application Cache方法：

　　1)在服务器端删除掉manifest文件

　　2)直接在隐私模式下测试

　　隐私模式下（3种存储都不可获取）：

　　校验主要功能是否正常

　　2.3、用户行为事件

　　点击：

　　a)单次点击，注意点击事件是否被误触发；

　　b)多次点击，关注点是当H5等待服务器返回数据过程中，用户继续点击其他功能按钮，是否会造成业务逻辑出错；

　　c)点击触发表单事件，如点击后触发下拉表单、时间选择表单等，是否正常；

　　d)点击触发media事件，如点击后触发视频、图像、音频等，是否正常（具体后面会讲）；

　　e)点击特殊格式文字，如连续数字串是否会唤起电话，含@字符串是否会唤起邮件

　　f)点击穿透，在页面有多层时，是否点击上层而出发下一层的点击事件

　　滑动：

　　a)慢速滑动与快速滑动，功能上应该一致；

　　b)页面在快速滑动时点击一次屏幕，应该视为用户"停止屏幕滑动"事件，而不应当"点击按钮"事件；

　　c)页面滑动规范，一般整个页面只允许上下滑动不允许左右滑动；

　　d)滑动过程中，动画流畅，数据加载不能太慢

　　刷新

　　a)下拉刷新是否仍然处于当前页面；

　　b)注意iOS下，下拉刷新和下滑页面的作用域范围，以及用户交互体验

　　返回

　　a)返回到上一个页面，即后退，会刷新页面请求

　　b)返回即关闭一个webview，不会刷新页面请求

　　c)页面中的返回要考虑业务逻辑，友好返回到相应层次。

　　d)list列表中，滑到一位置，点击到下一页，再返回，需定位到之前的位置

　　e)不能出现死循环

　　f)浏览器自带的返回需要测试

　　H5与Native切换

　　a)从native app切换到H5页面、从H5到native客户端

　　b)H5调用其他app

　　c)H5调用系统app，如电话、相机、地图等

　　d)H5使用过程中有电话进来，中断app正常运行，再次恢复app运行，功能状态是否正常

　　e)切换时登录信息是否记录、流程是否顺畅、是否出现中断闪退等问题

　　输入框

　　a)内容格式控制，

　　b)特殊字符显示，

　　c)js是否会执行，

　　d)其他，如过滤黑词，一串长字母是否会换行等；

　　键盘界面

　　a)键盘弹出是否正常，是否会覆盖输入框，

　　b)键盘隐藏是否正常

　　c)安全键盘，密码等敏感输入区

　　横屏竖屏间切换：

　　有些应用支持横屏显示，则需要测试横屏竖屏间切换后是否能自适应，页面布局不会错乱

　　2.4、页面请求

　　对于每个页面，要查看发送的请求是否正确，推荐用chrome中自带的开发工具查看网络请求

　　翻页，数据分页加载时，后续页面请求数据的正确性（需要注意在快速操作场景中，请求页数是不是依次递增），快速操作（如第一页尚未loading出来的时候仍然继续上拉操作）时是否发出去对应的请求了；

　　请求的接口是否有重复，比如上面的翻页场景；

　　接口降级，接口返回异常错误提示时如何处理，前端要给出友好提示；

　　请求比较慢时，要有loading图片，图案在数据出来后要消失，且不能与转场动画等其它有冲突。。

　　2.5、网络

　　不同网络类型测试

　　a)考虑2G\3G\4G\wifi网络

　　b)考虑移动网络2G\3G\4G基站的变化的影响

　　c)无连接、关闭连接状态

　　d)弱网络信号状态

　　e)有网络信号但网络不可达状态

　　测试注意点

　　a)从wifi切换到2G/3G网络、从2G/3G网络切换到wifi等

　　b)弱网络降级：处于2G/3G网络省流量模式的一些特殊处理，比如2G网络下测试，图片多时是否要懒加载等

　　c)无网络时，执行需要网络的操作，给予友好提示，并确保不会导致应用crash；

　　d)内网测试时，要注意选择到外网操作是的异常情况处理；

　　e)弱网络下，检查功能状态是否正常，确保不因提交数据失败而造成异常甚至应用crash；

　　f)弱网络下，检查数据是否一直处于提交中的状态，如遇数据交换失败要给予提示；

　　g)弱网络下，执行操作后，在回调没有完成的情况下，退出本webview或者其他操作，有无异常

　　2.6、多媒体

　　图片

　　a)图片的放大及还原；

　　b)多张图片的滑动切换要流畅；

　　c)图片适配，是否根据不同设备像素比做适配，高端机取双倍尺寸的图，低端机单独处理，不取高清图；

　　d)2G\3G网络下，不取高清图，最好加上webp图片的支持，可减少流量。

　　音频和视频，一般都是调用已有的组件

　　a)测试对于内部域名的，以及外部域名的视频支持情况

　　b)视频的交互体验，如是否直接播放、是否点击播放，如何退出等等，iOS和android的有可能处理还不一样，一定要分别看

　　c)音频和视频，是否有声音

　　d)视频的适配，尤其要测试不同android机下视频播放支持情况

　　动画

　　特别需要注意在中低端机的显示和动画流畅度。最好让前端单独处理，去掉一些复杂的动画效果

　　地图，一般都是调用已有的地图组件

　　a)测试地图的全景、退出全景模式

　　b)非全景模式下的拖动是否正常

　　c)地图适配，尤其要测试不同android机下视频播放支持情况

　　表格

　　一般校验是否和PC后台编辑的表格格式一致，格式布局不要错乱，也要注意不同机型下的支持