HTML5测试方法及常见问题

H5页面测试总结

其实经过几次H5页面测试之后，发现存在很多共同的问题，所以在此对H5页面的测试点（以及容易出问题的点），做一个总结，给开发同学自测，以及准备入手H5测试的同学一个参考。

1、业务逻辑相关

除基本的功能测试之外，H5页面的测试，需要关注以下几点：

1.1 登陆

目前H5与native各个客户端都做了互通，所以大家在测试的时候要注意两点：

A、若客户端已登录，那么进入H5后仍然是登录状态。

B、若客户端未登录，进入H5，点击对应按钮OR链接，如果需要登录，须拉起native登录。若取消登录，是否可再次拉起登录，或者停留在的页面是否有对应的登录提示。

ps：本次测试过程中就发现，第一次点击链接，可以拉起登录，第二次却不能。

1.2 翻页

遇到翻页加载的页面，需要注意内容为1页或者多页的情况。

A、数据分页加载时，注意后续页面请求数据的正确。

ps：这个需要注意在快速操作场景中，请求页数是不是依次递增，快速操作（如第一页尚未loading出来的时候仍然继续上拉操作）时是否发出去对应的请求了。

1.3 刷新与返回

A、下拉刷新是否仍然处于当前页面。

B、用户主动点击刷新按钮是否仍然处于当前页面。

C、点击返回与back键，回退页面是否是期望页面

ps：本次测试过程中就发现，mtop接口请求成功，但是data内无数据时，返回到的就是个空白页面，无法正常发送请求。

1.4

一、 mtop接口返回处理

发现这个出现问题的地方有很多，但是只要有意识的去处理，就很容易避免，主要是以下几种情况：

A、请求成功，且返回有数据，测试mtop接口返回数据的各种场景。

B、请求成功，但data内容为空。

C、请求接口异常，出现ERR_SID_INVALID::SESSION过期，拉起登录。

D、请求接口发生除C中提到的异常之外的异常，通常可归结为一类进行处理。

 

二、根据开发提供的接口文档，编写测试用例，根据协议选择对应的测试工具。恒生T2协议可以使用hsadmin，http协议可以选择httpquester（firefox)，jmeter等。

　　接口测试主要关注点：

　　1）接口返回的数据期望的是否一致；

　　2）接口入参的边界值校验 ；

　　3）检查接口的容错性 比如对于传输数据类型错误能否处理等，整型的输入小数、中英文等；

　　4）接口的性能情况，调用接口数据返回的时间，接口反应慢肯定影响用户体验。

　　5）接口的安全性：接口部分敏感信息是否加密传输等

 

2、H5适配相关

H5的适配其实比客户端的相对来说，要少一些，手机品牌之间的差异不大，所以不用太多关注，最容易出现问题的是android2.3系统，这个要特别关注下：

A、大屏（如720*1280，重点关注页面背景是否完全撑开页面，刷新是否有抖动）、小屏手机（如320*480，重点关注下弹框样式和文案折行）

B、android2.3、android4.X随机找一个即可。

C、ios5、ios6、ios7。

 

3、安全相关

3.1 明确投放渠道都有哪些

如独客、主客、wap，是否对未投放渠道做了限制，直接通过url请求是否拦截等

3.2 评估是否需要接入集团安全，如mtee黑白名单等。

3.3 是否需要接入支付宝实名认证

涉及到金钱相关，如天猫积分，红包等，为了防刷，一般都需要判断是否支付宝实名认证。

3.4 是否接入windvane，所有请求通过native发出。

4、体验相关

4.1 资源相关

A、页面中有图片的话，淘宝那边建议图片一般不大于50kb，本着一个原则，尽量缩小图片。

B、资源是否压缩、是否通过CDN加载。

C、如何保证二次发布后有效更新。

4.2 流量

A、对于一些不会变化的图片，如游戏动画效果相关图片，不需要每次都请求的东西，做本地缓存。

B、数据较多时是否做了分页加载。

4.3 页面展现时间

A、关注页面首屏加载时间。

4.4 页面提示

A、弱网络下，数据加载较慢，是否有对应的loading提示。

B、接口获取异常时，提示是否友好。

C、刷新页面或者加载新内容时页面是否有抖动。

4.5 手机操作相关

A、锁屏之后展示页面。

B、回退到后台之后，重新呼出在前台展示。

4.6 弱网络体验

 

5、埋点数据检查

与BI、前端同学一起确认埋点情况。

 

【需求设计测试】

　　需求是否合理、是否有更好的实现方法或者功能的遗漏，以及原型图测试，包括用户体验和用户习惯，或者发现业务不明确或者矛盾。把问题发现在源头，减少后期因需求变更引起开发和测试的迭代成本。在需求阶段即介入测试功能点的编写和记录，也符合尽早介入测试的原则。

　

【功能测试】

　　可用性：测试中的重点，可以根据自己业务和功能进行测试。

【用户界面测试】

　　根据测试和评审修改过的UED，测试开发递交的测试包。风格、样式、颜色是否协调，不仅包括HTML5本身，因为HTML5会嵌入App里面，所以要考虑h5的风格、样式、颜色是否与app本身协同，不至于格格不入，包括用户习惯等也最好保持一致或相近，最好在设计初期就有颜色、按钮、图片、背景、边框等详细规划和统一。

　　但是正是由于H5的可移植性，同一服务会嵌入到N家客户的产品中，难以与各家都完全统一，所以在设计中就应该考虑这些问题。

【兼容性测试】

　　前文提到PC  web因为无法兼容IE6.7.8。PC主要测试在不同系统下不同浏览器google、firefox、360、IE9、IE10、IE11等主流浏览器下的界面兼容和功能兼容，因为不同浏览器对HTML、SVG、XHTML，CSS及javascript的解析会有不同。

　　例如有些浏览器能够发送验证码，而有些会功能失效，页面排版也会错乱等。手机HTML5主要应用是嵌入在app或者微信公众号里面，所以兼容性主要是IOS、android2个系统各种主流机型的适配。

　下面做了一些与App对接测试常见问题：

　　▲由于HTML5嵌入在App里面，输入框需要调用原生键盘。由于andriod不同手机的差异化，会导致原生键盘功能不同。曾发现三星的android某版本调用原生数字键盘没有小数点，后只要碰到三星机器就调用全键盘；

　　▲App底部导航栏是否带入到H5页面中，打开键盘是否会影响导航栏位置变动。一般在HTML5页面中应该删除App的导航栏；

　　▲App与HTML5对接部分需要加密传输；

　　▲App头部的点击后返回的是前一个页面还是退回app主界面，需要注意；

　　▲IOS、Android的部分机型由于键盘的打开和收起会出现提示或确认页面弹框上下不居中；

　　▲由于网络问题偶现的App的报错需要包装；

　　▲从App各个入口进入HTML5界面都是免登录，各入口登录、登出正常；

　　▲在各个机型中，屏幕较小和较大的机器会出现不能全部显示或者部分空白的情况。

　　▲长时间不操作HTML5或者App，需要重新登录，或者需要重新输入密码；

　　▲屏幕较小手机提交参数的确认页面，由于字数较多会出现换行的情况，需要做适配。

　　微信主要是入口不一致，申请对接公众号后，需要用微信自带的浏览器进行兼容性测试，其他很多都相似，此处不在赘述。

【网络测试】

　　由于H5系统很多是云服务，所有响应速度普遍较慢。我们测试的时候一般会用wifi，速度会相对可观点。我们应该观察在4G、3G、甚至2G的网下，看响应时间是否在忍受范围内。时间过长的话，需要提示优化代码做改善。

【安全测试】

　　由于我们对应的产品部利用HTML5把一些通用功能做成了云服务，可以嵌入多家客户的App，根据渠道划分，所以安全性显得尤为重要。

【性能测试】

　　随着对接客户的增加，对服务的性能方面的要求也会增加。对于云服务的模块需要做性能测试。

　　由于部门机器的有限，第一轮测试我一般是采用google模拟器测试，也方便快速熟悉交互，最重要的是可以简单调试报错信息，定位缺陷原因，便于开发调试。

　　第二轮大功能基本稳定后，我才会借各种机器，用手机的自带的浏览器测试手机的兼容问题。因为app一般同步开发，App团队给不了稳定的包给我们做对接测试。

　　第三轮或者等App能给出稳定的包的时候，才嵌入微信和App测试。