H5页面的基本测试点

Posted 2020-10-14

优势：

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

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

 

劣势：

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

 

如何判断是否是H5页面：

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

如何测试H5：

1. 基本功能测试：（浏览器、微信内置浏览器）

2. 登陆

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

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

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

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

   1.2 翻页

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

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

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

    

   3. 刷新与返回

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

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

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

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

    

   4、H5适配相关

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

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

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

   C、ios5、ios6、ios7。

    

   5、体验相关

   5.1 资源相关

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

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

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

   5.2 流量

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

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

   5.3 页面展现时间

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

   5.4 页面提示

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

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

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

   5.5 手机操作相关

   A、锁屏之后展示页面。

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