H5测试要点

1 H5是什么？  ---可以理解为一个网页

①H5来自“HTML5”，是一种高级的网页技术，包括HTML、CSS和JavaScript在内的一套技术组合
②原生App（native app）：使用原生制作App，即在基于目前的智能手机的操作系统（如安卓Android、苹果Ios还有Windows phone）的基础上，使用相应平台支持的开发工具和语言（比如Ios平台支持Xcode和Objective-C、安卓平台支持Eclipse和Java）编写的第三方移动应用程序，简称原生App

*参考博客文章：如何识别H5？https://www.cnblogs.com/zymnstlm/p/9453425.html

HTML是“超文本标记语言”，是一门描述页面的标准语言

 

2 H5、Native App、混合App的区别

1）H5：

①开发快，实现的功能也很炫

②只编写一次，可以再多个设备上到处运行

③具有局限性，如会话管理、安全离线存储、访问原生设备功能（摄像头、日历和地理位置）--依赖网络

2）Native App

①原生应用程序看起来（界面）和运行起来（性能）是最佳的；能更好的适应各种类型的功能实现  --缓存

②开发和测试周期比较长，原生的开发太耗时耗力

③必须登录到商店、下载新版本，才能获得最新修正版

3）混合App  ---H5+原生混合开发

①某此固定格式和控件的、页面反应速度要求高的模块就采用原生native开发

②对于新闻、大段文字、资讯类的用H5语言的标准实现页面来加载，将其嵌入原生框架中

③混合应用程序让开发人员可以把HTML5应用程序嵌入到一个细薄的原生容器里面，集原生应用程序和HTML5应用程序的优点（及缺点）于一体

 

3 H5的测试点

功能测试、UI页面测试、兼容性测试、接口(api)测试、安全测试、网络测试、性能测试

3.1功能测试

基本的功能测试和App测试一样，另外关注：登录、翻页、刷新、返回、手机操作

①登录：目前H5和native各个客户端都做了互通，测试时应注意：
a.若客户端已登录，那么进入H5后仍然是登录状态
b.若客户端未登录，进入H5，点击对应按钮OR链接。如需登录，须拉起native登录；若取消登录，是否可再次拉起登录，或者停留在的页面是否有对应的登录提示

②翻页：遇到翻页加载的页面，需要注意内容为1页或者多页的情况。数据分页加载时，注意后续页面请求数据的正确。这个需要注意在快速操作场景中，请求页数是不是依次递增，快速操作
③刷新与返回：刷新与返回页面刷新是否仍然处于当前页面，刷新页面或者加载新内容时，页面是否有都懂，用户主动点击刷新按钮是否仍然处于当前页面，点击返回与back键，会退页面是否是期望页面
④手机操作：弹窗出现/关闭手机关注交互是否友好，比如弹出层的点击，是否会穿透影响到下面的页面。手机锁屏之后展示页面；退到后台，再重新呼出在前台展示

3.2 UI页面测试

1）H5的页面测试和App的界面测试一致，确保产品UI符合产品经理制定的原型图与UI设计效果图/切图一致

2）关注页面展示元素，如菜单、对话框、窗口和其他可视控件的布局、风格，文字是否正确，页面是否美观，页面交互操作是否友好，操作是否设计频繁，是否易操作
3.3 兼容性测试

1）浏览器兼容

①考虑手机主流浏览器，例QQ、UC、百度

②考虑PC端主流浏览器，例IE、Chrome、Firefox

③Android和Ios自带浏览器：Chrome、Safari

2）系统兼容：覆盖Android和Ios最新的试用版本和当前流行的主要版本

3）屏幕兼容：兼容不同的屏幕大小，包括横竖屏的适配

4）主流手机+主流浏览器：Oppo +百度浏览器

3.4安全测试

1）明确投放渠道有哪些，是否对未投放渠道做了限制

2）直接通过url请求是否拦截等；直接url是否能打开

3）部分敏感信息是否加密传输等

4）防止恶意攻击 ---sql注入（设计比较少）

3.5 网络测试

1）参考App的测试方法

2）测试2G/3G/4G/5G/WiFi网络的切换

3）测试有网/无网切换下的应用运行

4）弱网测试：延时、丢包

3.6 性能测试

1）服务器性能测试   ---接口测试

2）客户端性能测试

①加载速度：页面的首屏时间、白屏时间、有缓存/无缓存的加载时间

②（系统）资源占用：CPU、流量、电量、内存等的占用

  a关注页面中有图片的话，尽量缩小图片

  b资源是否压缩

  c对于一些不会变化的图片，不需要每次都请求的东西，做本地缓存

  d数据较多时，是否做了分页加载处理

  f反复访问，检查是否占用大量内存