H5 移动端测试⽅法
置顶 2018年09⽉17⽇ 11:16:40 阅读数：2162
⼀.功能测试
1、关注页⾯请求。对于每个页⾯，要查看发送的请求是否正确，请求的接⼝是否有重复，接⼝请求是否正确返回等。可通过chrome中⾃带的开发⼯具查看⽹络请求。 rat组合关注是否有冗余接⼝请求，是否有不必要的重复接⼝刷新请求。冗余和重复的接⼝请求会导致流量浪费和响应速度变慢。
3、session失效机制。对于要登录的，需要⽤到session的地⽅，要注意模拟session失效时，功能业务逻辑是否正常。 玻璃瓶盖4、返回逻辑：对于页⾯中的返回，以及浏览器⾃带的返回的测试。页⾯中的返回要考虑业务逻辑，友好返回到相应层次，需要从⽤户⾓度考虑返回的转跳逻辑，不能出现死循环。并要注意返回后是否需要刷新页⾯请求，⽐如⽀付完后返回订单列表，最好刷新
展⽰上⼀步购买的订单。
5、页⾯刷新，刷新时的请求链接是否正确。
（1）下拉刷新是否仍然处于当前页⾯
（2）⽤户主动点击刷新按钮是否仍然处于当前页⾯
（3）刷新页⾯或者加载新内容时页⾯是否有抖动。
6、图⽚适配，是否根据不同屏幕和分辨率做适配，⾼端机取双倍尺⼨的图；是否对于2G⽹络，或低端机单独处理，不取⾼清图或减少⼀些特效动画效果；最好加上webp图⽚的⽀持，可减少流量；在中低端机上考虑是否需要让前端单独处理，去掉复杂处理。并
对中低端机只取原图，不取⾼清图。注意：webp格式只对android有效，放在IOS上反⽽会起反作⽤。
7、是否要增加转场动画，loading动画，点击动画等。以提升体验。需要在动画效果和卡顿上衡量。
8、对于隐私模式，不存cookie，不开javascript执⾏等，测试是否功能正常，或给出提⽰。
9、接⼝降级，接⼝异常时如何处理，前端要给出友好提⽰。
10、对于请求⽐较慢时，要有loading图案，图案在数据出来后要消失，且不能与转场动画等其它有冲突。
11、输⼊框的校验：特殊字符显⽰，过滤⿊词，js是否会执⾏，⼀连串长字母是否会换⾏等。⽐如只输⼊空字符的处理。
12、弱⽹络降级：处于2G/3G⽹络省流量模式的⼀些特殊处理，⽐如2G⽹络下测试，图⽚多时是否要懒加载等。⽹络状况差的场景，可提⽰⽂案，但不能闪退。
13、⽹络切换：从wifi切换到2G/3G⽹络、从2G/3G⽹络切换到wifi等
14、H5与Native切换：切换时登录信息是否记录、流程是否顺畅、是否出现中断闪退等问题。注意验证登录信息是否能互通。不能出现native已经登录，进⼊h5后继续让登录，实在技术实现不了的可toast提⽰⽤户继续登录。
（1）若客户端已登录，那么进⼊H5后仍然是登录状态。
（2）若客户端未登录，进⼊H5，点击对应按钮OR链接，如果需要登录，须拉起native登录。若取消登录，是否可再次拉起登录，或者停留在的页⾯是否有对应的登录提⽰。（注：本次测试过程中就发现，第⼀次点击链接，可以拉起登录，第⼆次却不能）
15、Pad上测试需要注意：横屏和竖屏下的显⽰效果可能不同，还有横屏换成竖屏、竖屏换成横屏。注意横竖屏切换时输⼊框的不同。
16.返回功能
通过H5页⾯（⾮⾃带返回键）的返回功能键返回，可以返回到正确的页⾯（上⼀级/退出h5）
点击返回与back键，回退页⾯是否是期望页⾯
17.屏幕切换
横屏竖屏相互切换，能适应，布局不乱，或页⾯只⽀持横或竖屏限制
18.分辨率适配更好
建议采⽤响应式设计（如：offerlist页⾯⼤屏显⽰3⾏，⼩屏显⽰2⾏）
1）分辨率⾼（如720*1280，重点关注页⾯背景是否完全撑开页⾯，刷新是否有抖动）、分辨率低（如320*480，重点关注下弹框样式和⽂案折⾏）
2）android4.2版本以上的设备随便测试⼀两台即可
3）苹果近⼏年常⽤的系统版本⼿机
19.页⾯打开形式
建议页⾯在⼿机上从list点击进⼊detail页⾯，要在原窗⼝打开，通过页⾯页头返回按钮返回，不需要通过⼿机返回键返回，交互体验好
20.页⾯请求验证
关注页⾯请求，是否会有多余的请求，或者请求后有多余的数据返回，尽量精简，否则会浪费流量。
21.图⽚适配
图⽚适配，根据不同屏幕和分辨率做适配，以及适配后的清晰度，⾼端机取双倍尺⼨的图
22.⽤浏览器chrome f12进⾏测试
H5的页⾯在PC端也是能访问的，chrome对H5⽀持最好，功能的测试可以在PC端chrome下先测试，也可以在⼿机上直接测试，这个看个⼈习惯。（ie系列**ie8，及以下都⽀持的不好，这个可以与PD确认H5页⾯在这些PC浏览器上不⽀持）
23、滑动、定位
⼿指滑动是否流畅，⼿指点击时焦点是否定位正确，不同机型会不⼀样。焦点定位点击是灵敏。
24、对于类似公司名称、offer名称长度的问题，在⼿机上最好能根据屏幕⼤⼩⾃适应⽽不是截断，因为⼿机上是不会有tips可以看的。截断导致⼤屏幕下也只能显⽰⼏个字，交互不好
25、⼿机测试要特别关注交互是否友好，与PC机的事件模型不⼀样，可能会导致⼀些体验的问题，⽐如：弹出层的点击，是否会穿透，影响到弹出层下⾯的页⾯。
26、对于⼀些浮层做的页⾯，例如地图、产品分类等浮层，注意拖动后是否可以看到它下⾯的页⾯，拖动后边缘是否有留⽩
27、⼿机端的测试的时候也要清除⼀下缓存，因为图⽚和⽂件会被缓存下来，所以⾸次访问和⼆次访问体验不⼀样。例如UC浏览器的清楚缓存在设置-》系统设置-》基本设置--》清除中。
28.关注页⾯⾸屏加载时间。
29、⽂件导⼊导出：
1、模板下载功能：
⼀般导出导出功能会有⼀个模板下载功能，此功能需要检查模板是否可以正常下载，正常打开，检查Excel模板⽂件和⽹站中的数据字段是否⼀致即可。
2、⽂件导⼊功能
1) 错误提⽰，
如果导⼊的excel表格中中某⼀⾏或者某⼀字段格式不对或者数据为空，是否可以正常导⼊正确部分的数据，对错误的数据进⾏提⽰。
连续流砂过滤器
2）导⼊其他格式的⽂件
当导⼊的⽂件格式不正确时，系统是否做出正确的判断，并给出对应的错误提⽰。
3）重复导⼊相同的⽂件
重复导⼊相同的⽂件是否可以导⼊成功，如果可以导⼊成功，数据将如何处理，⽐如覆盖或者忽略？
4）不使⽤下载的模板，⾃⼰新建excel导⼊
⾃⼰⼿动新建excel或者对其他excel进⾏修改，使excel格式和模板⼀致，这种情况下数据填写正确的话，应可以正确的导⼊系统。
5）表头检查：包括去掉、修改、新增列、列之间切换等
3、⽂件导出功能
1）导出的excel表格的格式检查，主要检查导出的excel格式是否符合预期，各字段是否正确。另外导出的excel⽂件名是否有要求。如果有要求，是否正确。
2）数据检查，导出全部数据功能是否正确，到处部分数据功能是否正确，选择数据为空时是否可以导出。导出的数据内容是否与⽹页中的内容⼀致。
⼆.适配测试
1）H5机型适配
在项⽬测试计划给出时，确认是否要确定测试机基线，即是否要以⼏款机型作为最低适配需求。可参考⽬前应⽤市场占有分布。
操作系统适配范围：ios 8-10固件版本的iphone必须覆盖，ios7可选覆盖，android 4.4-6.x必须覆盖，4.0-4.3可选覆盖，4.0以下可以不care。像⼩⽶，魅族这种⾃定义os版本的机⼦，其实底层也对应着标准的⾕歌os系统版本。
对于ios, android⼤版本⼀定要覆盖，对于系统版本，先看⼤版本占⽤情况，再选择⼤版本中占⽤率较⾼的⼩版本。如4.3, 5.0⼤版本中选⼏个占⽤率较⾼的⼩版本测试。常⽤的有：ios：8.x.x, 9.3.5；android: 4.3.1, 4.4.2 等。
机型品牌适配范围：参考集团内后端统计的top机型。对于ios，要覆盖iphone 6/6s/6p, iphone 7,iphone5等。
对于android，如三星、⼩⽶、华为，htc, lenovo，中兴，魅族，阿⾥云等。屌丝机型华为，中兴，vivo，oppo，魅族占有率很⾼，所以这⼏个屌丝机型⼀定要覆盖到。三星上的H5问题，相当极品。⼩⽶近⼀两年的机型适配问题不想2s那么多了。
三星常见的H5适配问题：css加载不出来，控件操作⽆响应。⼩⽶常见的H5适配问题是UI，⽐如button会把这个按钮四个⾓冗余显⽰，tab切换异常。实时滚动信息时卡死等。
对于有些⼿机⼚商有⾃已定制操作系统，要单独适配，如⼩⽶，魅族。注意三星的假系统版本。
在选择机⼦时，要兼顾屏幕尺⼨和分辨率。覆盖到主流的屏幕尺⼨和分辨率，并组合⼀下，现在主流是1920⼤屏，但⼀定要⼏款⼩屏⼿机覆盖。注意三星的
适配时不能光选性能好的机⼦，⼀定要适配⼏款中低端机。华为和中兴的国产机，可选择适配⼀下。
2）适配
需要覆盖：⾃带浏览器（默认的浏览器内核）为主，有⾜够时间时再覆盖chrome,UC浏览器（最新版）和QQ浏览器（最新版）。
医学成像系统
3）容易出现适配问题的机型：
三星i9100G，对于按钮样式，输⼊框的区域要重点关注。
android 5.X ⾕歌原⽣的nenux系列。
⼤屏⾼分辨率⼿机要适配⼀款，如三星galaxy note4
对于⽀持webp的机⼦要测试。如三星galaxy note2，或三星s3
4）⼯具
1.市⾯上各种云测平台，⼀般都可以单独测试H5适配。
2.可借助浏览器的开发者模式。
三.性能测试
2）翻页测试：
当遇到翻页加载的页⾯，需要注意内容为1页或者多页的情况。
（1）数据分页加载时，注意后续页⾯请求数据的正确。
注：这个需要注意在快速操作场景中，请求页数是不是依次递增，快速操作（如第⼀页尚未loading出来的时候仍然继续上拉操作）时是否发出去对应的请求了。
四.安全测试
1）明确投放渠道都有哪些：
如独客、主客、wap，是否对未投放渠道做了限制，直接通过url请求是否拦截等
2）评估是否需要接⼊集团安全，如mtee⿊⽩名单等
牙模
3）是否需要接⼊⽀付宝实名认证：
涉及到⾦钱相关，如天猫积分，红包等，为了防刷，⼀般都需要判断是否⽀付宝实名认证
4）是否接⼊windvane，所有请求通过native发出
五. H5上线后回归
H5涉及到的各种资源⽂件，在测试环境（包括预发环境），⼀般都是内域，正式上线，RD童鞋有把资源⽂件（或者说url中的链接忘了修改）漏发的风险，所以上线后⼀定要⽤外⽹环境再快速回归下。最简单的就是⽤⾃⼰的4G⽹络回归跟踪线上。
六.H5测试与PC端测试不同的点
1、通过H5⽹页（⾮⼿机的返回功能）的返回功能可以返回，不会出现⽆法返回的情况。
2、横屏竖屏相互切换，能⾃适应，并且布局不会乱掉；
3、为能在不同分辨率的⼿机上能更好的展⽰，建议采⽤响应式设计（如：offerlist页⾯在⼤屏时显⽰3⾏，⼩屏时显⽰2⾏）
4、在⼿机上从list点击进⼊detail页⾯，要在原窗⼝打开，这样可以通过页头的返回按钮返回，⽽不需要通过⼿机的返回键返回，这样交互上更友好。
5、关注页⾯请求，是否会有多余的请求，或者请求后有多余的数据返回，尽量精简，否则会浪费流量。
6、图⽚适配测试，根据不同屏幕和分辨率做适配，以及适配后的清晰度，⾼端机取双倍尺⼨的图
7、H5的页⾯在PC端也是能访问的，chrome对H5⽀持最好，功能的测试可以在PC端chrome下先测试，也可以在⼿机上直接测试，这个看个⼈习惯。（ie系列包括ie8，及以下都⽀持的不好）
8、⼿指滑动是否流畅，⼿指点击时焦点是否定位正确，不同机型会不⼀样。焦点点击是否灵敏。
9、对于类似公司名称、offer名称长度的问题，在⼿机上最好能根据屏幕⼤⼩⾃适应⽽不是截断，因为⼿机上是不会有tips可以看的。截断导致⼤屏幕下也只能显⽰⼏个字，交互不好
10、⼿机测试要特别关注交互是否友好，与PC机的事件模型不⼀样，可能会导致⼀些体验的问题，⽐如：弹出层的点击，是否会穿透，影响到弹出层下⾯的页⾯。
11、对于⼀些浮层做的页⾯，例如地图、产品分类等浮层，注意拖动后是否可以看到它下⾯的页⾯，拖动后边缘是否有留⽩
12、⼿机端的浏览器测试的时候也要清除⼀下缓存，因为图⽚和⽂件会被缓存下来，所以⾸次访问和⼆次访问体验不⼀样。例如UC浏览器的清楚缓存在设置-》系统设置-》基本设置–》清除记录中。
七、H5各种测试总结：
（1）需求设计测试：
尽早的了解需求熟悉需求、参与需求评审与设计，通过原型图以及真实⽤户体验和⽤户习惯来检查需求的合理性以及是否有更好地实现⽅法等。
这样能把问题发现在源头，减少后期因需求变更引起开发和测试的迭代成本。
在需求阶段即介⼊测试功能点的编写和记录，也符合尽早介⼊测试的原则。
（2）接⼝测试
根据开发同学提供的接⼝⽂档，可以通过Jmeter 等⼯具进⾏测试。
主要关注点为：
接⼝返回的数据期望的是否⼀致；
接⼝⼊参的边界值校验；
检查接⼝的容错性⽐如对于传输数据类型错误能否处理等，整型的输⼊⼩数、中英⽂等；
接⼝的性能情况，调⽤接⼝数据返回的时间，接⼝反应慢肯定影响⽤户体验。
接⼝的安全性：接⼝部分敏感信息是否加密传输等
mtop接⼝返回处理：
发现这个出现问题的地⽅有很多，但是只要有意识的去处理，就很容易避免，主要是有以下⼏种情况：
（1）请求成功，且返回有数据，测试mtop接⼝返回数据的各种场景。
（2）请求成功，但data内容为空。
（3）请求接⼝异常，出现ERR_SID_INVALID::SESSION过期，拉起登录。
（4）请求接⼝发⽣除C中提到的异常之外的异常，通常可归结为⼀类进⾏处理。
（3）功能测试
测试重点，根据业务逻辑和功能进⾏测试，主要是可⽤性。
（4）⽤户界⾯测试
根据测试和评审修改过的UED（⽤户体验设计），测试开发递交的测试包。
风格、样式、颜⾊是否协调，不仅包括HTML5本⾝，因为HTML5会嵌⼊App⾥⾯，所以要考虑 H5 的风格、样式、颜⾊是否与app本⾝协同，不⾄于，包括⽤户习惯等也最好保持⼀致或相近，最好在设计初期就有颜⾊、按钮、图⽚、背景、边框等详细规划和统⼀。
但是正是由于H5的可移植性，同⼀服务会嵌⼊到N家客户的产品中，难以与各家都完全统⼀，所以在设计中就应该考虑这些问题。
（5）兼容性测试
⼿机HTML5主要应⽤是嵌⼊在app或者⾥⾯，所以兼容性主要是iOS、Android 2个系统各种主流机型的适配。
A、⼿机屏幕⼤⼩
B、主流⼿机机型
C、⼿机操作系统，iOS和Android各版本
D、浏览器：系统⾃带浏览器和主流浏览器
（6）⽹络测试
由于H5系统很多是云服务，所有响应速度普遍较慢。我们测试的时候⼀般会⽤Wifi，速度会相对可观点。
机械挖孔桩
我们应该观察在4G、3G、甚⾄2G的⽹下，弱⽹测试，看响应时间是否在忍受范围内。
时间过长的话，需要提⽰优化代码做改善。
（7）安全测试
由于我们对应的产品部利⽤HTML5把⼀些通⽤功能做成了云服务，可以嵌⼊多家客户的App，根据渠道划分，所以安全性显得尤为重要。（8）性能测试
随着对接客户的增加，对服务的性能⽅⾯的要求也会增加。对于云服务的模块需要做性能测试。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议