H5无线测试基础

最新推荐文章于 2023-07-14 22:19:23 发布

ls_tech

最新推荐文章于 2023-07-14 22:19:23 发布

阅读量1.3k

点赞数 1

分类专栏：测试相关文章标签：测试

本文链接：https://blog.youkuaiyun.com/lashou_tech/article/details/53377383

版权

测试相关专栏收录该内容

3 篇文章

订阅专栏

H5无线测试基础

1、概述

　　H5是指第五代HTML语言，也是指用H5语言制作的一切数字产品（HTML:超文本表示语言），相比较APP应用，H5有着很多优点，最为显著的是：
　　首先开发周期短，仅为APP的五分之一左右，成本也比较小。
　　第二是具有跨平台性的特质，不管是在ios，安卓系统中都能使用。
尤其相比较iOS较长的更新审核周期，任何时候都能快速迭代，在唯快不破的互联网时代，是很具有竞争力的；
　　拉手在之前的版本上就做了尝试，在多个入口嵌入了H5界面，把团购app从Native APP往Hybird APP（Hybrid APP指的是半原生native半H5的混合类App）迁移，同时H5在微信，淘宝中的应用也非常多，因此，H5测试的需求也是非常大。根据自己多年的测试经验，做了较为系统且细致的测试技能总结，也希望能帮助到大家。

2、功能测试

2.1 关注页面请求

查看页面发送的请求是否正确
请求的接口是否有重复
接口请求是否正确返回
工具:chrome自带的开发工具或Charles

2.2 关注 application cache和local storage cookie中值是否正确

页面是否有使用application cache, local storage存放数据
清除这些数据后功能是否正确
获取数据失败后是否有重试机制

2.3 页面刷新及返回

h5页面中的返回
浏览器自带的返回
页面中的返回要考虑业务逻辑，友好返回到相应层次，不能出现死循环
返回后是否需要刷新页面请求
刷新时的请求链接是否正确
多次刷新后的返回，不会重复显示页面

2.4 弱网测试

弱网络降级：处于2G/3G网络省流量模式的一些特殊处理，比如2G网络下测试，图片多时是否要懒加载等
网络切换：从wifi切换到2G/3G网络、从2G/3G网络切换到wifi等
对于请求比较慢时，要有loading图案，图案在数据出来后要消失，且不能与转场动画等其它有冲突

2.5 其它

对于隐私模式，不存cookie，不开javascript执行等，测试是否功能正常或给出提示
接口降级，接口异常时，前端要给出友好提示
H5与Native切换：从native切换到H5页面、从H5切换到native（如团购APP上的活动），切换时登录信息是否记录、流程是否顺畅、是否出现中断闪退等问题
图片适配，是否根据不同屏幕和分辨率做适配，高端机取双倍尺寸的图，是否对于2G网络，或低端机单独处理，不取高清图或减少一些特效动画效果
对于fix bar, 转场动画等，在中低端机上显示不好。需要去掉这些复杂的处理。并对中低端机只取原图，不取高清图
H5中的相关资源是否经过压缩（使用Chrome Debug抽查页面的js,css,image是否压缩）

2.6 弱网测试工具使用

使用charles工具进行测试。

前置条件：无线端与PC端加入同一局域网络，设置无线端代理IP为PC端IP。2G网络：带宽在160kbps（实际网速可能只有80kbps）

步骤1：打开charles，找到弱网设置项（如截图）
这里写图片描述
步骤2：进入到弱网设置，找到download和upload进行设置

2.7 APP与H5登录交互

团购APP已经登录，查看h5是否保持登录状态；
APP未登录，在H5发起需要登录的请求，则唤起APP登录，登录成功后能返回到之前H5页面；
团购APP主动退出，H5随之更新为未登录状态；
团购APP的session失效，查看H5是否即时捕获未登录状态；
团购APP端切换账号后，查看H5是否更新到新账号登录状态；

3、适配测试

3.1 手机浏览器适配

针对自带浏览器进行测试（比如：小米自；魅族自带浏览器等等）
针对市场主流浏览器进行测试（比如：猎豹；谷歌；火狐；遨游等等）

3.2 手机品牌适配

针对ios，如iphone 6s, iphone7, iphone 6, ipad2, ipad mini等；
针对android，如三星、小米、华为，htc, lenovo，中兴，魅族，nexus 7等

3.3 手机系统适配测试

针对ios, android大版本一定要覆盖，对于系统版本，先看大版本占用情况，再选择大版本中占用率较高的小版本。

4、测试工具

前置条件：设置代理，以保证charles能截取到手机终端的返回数据
- 步骤一：打开手机终端wifi设置主机IP和端口号，设置的IP地址必须和pc端保持一致
- 步骤二：首次设置代理时，会弹出以下提示对话框，需要对Charles授权
断点设置步骤（以charles为例）
- 步骤一：首先找到需要打断点链接,然后点击add添加到breakpoints setting里面
- 步骤二:在浏览器中，刷新之前配置的链接[http://news.baidu.com]，这时候就会被request断点，在被断点界面不做任何修改，点击Execute发出请求。
- 步骤三：服务器接受到请求后，然后返回数据（Response）时又被Charles断点，这时候就可以去Edit Response里面的test修改返回数据了，修改完后，点击Execute，就会把返回的数据返回到浏览器界面了。
- 步骤四：查看返回数据是否修改成功

测试部：胡泽龙