H5页面测试总结

H5页面测试总结

H5页面介绍

1. H5页面

H5即 HTML5，是 Web 端开发语言版本，大多数手机 APP 页面会用 H5 实现，包括 PC Web 站点也会用它开发实现。所以 Web 的通用测试点和方法基本都可以适用于它。H5其实就是：移动端Web页面。

H5作为移动端的web页面，有它自身的优势，如它可以跨平台使用，开发成本相对较低;可随时上线就更新版本，适合快速迭代;可以轻量的触达用户，提供更便捷的服务。因此在项目中，对于上线后迭代更新较快的页面，通常利用H5页面来实现。

2. 技术实现

从广义上来讲，HTML5是包括HTML、CSS和JavaScript在内的一套技术组合。

HTML：网页的具体内容和结构;

CSS：网页的样式(美化网页最重要的一块);

JavaScript：网页的交互效果，比如对用户鼠标事件作出响应;

它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。

3. 如何识别H5

从视觉效果上看，H5页面与APP native页面是一样的，因此测试时经常会问到一个问题，这个页面是不是H5页面?如何识别呢?在此提供以下几个方法：

1)基本上只要对那个view长按，然后看是不是有反应，比如手机震动(Android)、或者出现文字选择粘贴(Android/iOS)，那么就是H5页面;

2)横屏竖屏相互切换，能自适应，并且布局不会乱掉，通常情况也属于H5页面;

3)H5页面在PC端也是能访问的，chrome对H5支持最好，功能的测试可以在PC端chrome下先测试，也可以在手机上直接测试。

H5页面测试

1. 环境配置

一般的测试流程是H5页面开发完成后，先在测试环境进行测试，测试通过再部署到线上环境，所以测试阶段要先进行测试环境配置。

2. 测试关注点

2.1 业务逻辑测试

业务逻辑相关的测试，视具体业务的需求而定;

2.2 页面元素UI测试

页面UI主要包括文字、图片以及页面布局等方面测试;

文字：风格一致、错别字、标点符号统一、换行是否显示正常、一行长文字是省略显示全显示、图片与文字是否一致、刷新页面文字是否展示;

页面布局：页面文字图片是否能自适应屏幕、整体布局是否合理等;

内嵌链接：空链接、刷新链接数据是否展示;链接跳转是否正确;

2.3 页面操作

1)刷新与返回

页面刷新是否仍然处于当前页面;

2)翻页

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

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

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

3)弹窗出现/关闭

4)浮层页面

对于一些浮层做的页面，例如地图、产品分类等浮层，注意拖动后是否可以看到它下面的页面，拖动后边缘是否有留白;

5)页面提示

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

接口获取异常时，提示是否合理;

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

6)手机操作相关

锁屏之后展示页面;

退到后台，再重新呼出在前台展示;

2.4 接口测试

1)接口返回处理：

请求成功，且返回有数据，测试接口返回数据的各种场景-接口返回的数据期望的是否一致;接口入参的边界值校验;检查接口的容错性，如对于传输数据类型错误能否处理等，整型的输入小数、中英文等;

请求成功，但data内容为空;

请求接口异常时，页面处理;

2)接口性能测试：

页面加载时间：关注页面首屏加载时间;调用接口数据返回的时间，速度过慢会影响用户体验;资源相关：页面中有图片的话，尽量缩小图片;资源是否压缩、是否通过CDN加载。

服务端并发性能：用户量过多时，服务器性能是否受到影响;

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

流量消耗：对于一些不会变化的图片，如游戏动画效果相关图片，不需要每次都请求的东西，做本地缓存;数据较多时是否做了分页加载。

2.5 网络测试

网络环境：WiFi、4G、3G、2G;

网络异常：弱网、断网;

网络切换;

2.6 适配测试

H5页面需要适配的内容主要有：图片高清适配;字体大小适配;页面布局宽度适配;横竖屏适配;

考虑适配因素：对不同屏幕尺寸和分辨率的机型进行适配;不同平台iOS和安卓进行适配;屏幕横竖屏适配;日夜间模式适配;深色浅色模式适配(iOS13系统);

2.7 安全测试

明确投放渠道都有哪些，是否对未投放渠道做了限制，直接通过url请求是否拦截等;

接口部分敏感信息是否加密传输等;

直接URL是否能打开;

防止恶意攻击;

2.8 埋点测试

埋点数据检查;

2.9 上线后验证测试

上线后：H5涉及到的各种资源文件，在测试环境(包括预发环境)，一般都是内域，正式上线，RD童鞋有把资源文件(或者说url中的链接忘了修改)漏发的风险，所以上线后一定要用外网环境再快速回归下;

如何保证二次发布后有效更新;