关于H5页面的测试总结与分析

一、时下最流行的H5到底是什么？有什么优势和劣势？

（1）H5 即HTML5，其实就是：移动端Web页面。

（2）优势：

1. H5可以跨平台使用，开发成本相对较低
2. H5可随时上线就更新版本，适合快速迭代
3. H5可以轻量的触达用户，提供更便捷的服务

在微信入口或者浏览器上，用户只需点开链接就可以获取我们锁提供的服务

劣势：

H5->app的转化强依赖于浏览器
H5目前基本无法将数据存储在本地，依赖实时性数据，网络状态不好的时候卡到哭。
性能相对较低，影响用户体验

（3）如何判断是否是H5页面：

基本上只要对那个view长按，然后看是不是有反应，比如手机震动（Android）、或者出现文字选择粘贴（Android/iOS），那么就是WebView！

二、测试点总结：

（1）需求设计测试：

尽早的了解需求熟悉需求、参与需求评审与设计，通过原型图以及真实用户体验和用户习惯来检查需求的合理性以及是否有更好地实现方法等。
这样能把问题发现在源头，减少后期因需求变更引起开发和测试的迭代成本。
在需求阶段即介入测试功能点的编写和记录，也符合尽早介入测试的原则。

（2）接口测试

根据开发同学提供的接口文档，可以通过Jmeter 等攻距进行测试。
主要关注点为：
接口返回的数据期望的是否一致；
接口入参的边界值校验；
检查接口的容错性比如对于传输数据类型错误能否处理等，整型的输入小数、中英文等；
接口的性能情况，调用接口数据返回的时间，接口反应慢肯定影响用户体验。
接口的安全性：接口部分敏感信息是否加密传输等

（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）性能测试

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