转载声明：文章来源：https://blog.csdn.net/weixin_45630042/article/details/103759726

一、测试点

1、返回功能
通过H5页面（非手机自带返回键）的返回功能键返回，可以返回到正确的页面（上一级/退出h5）

2、屏幕切换
横屏竖屏相互切换，能适应，布局不乱，或页面只支持横或竖屏限制

3、分辨率适配更好
建议采用响应式设计（如：offerlist页面大屏显示3行，小屏显示2行）

4、页面打开形式
建议页面在手机上从list点击进入detail页面，要在原窗口打开，通过页面页头返回按钮返回，不需要通过手机返回键返回，交互体验好

5、页面请求验证
关注页面请求，是否会有多余的请求，或者请求后有多余的数据返回，尽量精简，否则会浪费流量。

6、图片适配
图片适配测试，根据不同屏幕和分辨率做适配，以及适配后的清晰度，高端机取双倍尺寸的图

7、用浏览器chrome f12进行测试
H5的页面在PC端也是能访问的，chrome对H5支持最好，功能的测试可以在PC端chrome下先测试，也可以在手机上直接测试，这个看个人习惯。（ie系列**ie8,及以下都支持的不好，这个可以与PD确认H5页面在这些PC浏览器上不支持）

8、滑动、定位
手指滑动是否流畅，手指点击时焦点是否定位正确，不同机型会不一样。焦点定位点击是灵敏。

9、对于类似公司名称、offer名称长度的问题，在手机上最好能根据屏幕大小自适应而不是截断，因为手机上是不会有tips可以看的。截断导致大屏幕下也只能显示几个字，交互不好

10、手机测试要特别关注交互是否友好，与PC机的事件模型不一样，可能会导致一些体验的问题，比如：弹出层的点击，是否会穿透，影响到弹出层下面的页面。

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

12、手机端的浏览器测试的时候也要清除一下缓存，因为图片和文件会被缓存下来，所以首次访问和二次访问体验不一样。例如UC浏览器的清楚缓存在设置-》系统设置-》基本设置–》清除记录中。

13 、H5上线后回归（ H5涉及到的各种资源文件，在测试环境（包括预发环境），一般都是内域，避免正式上线url中的链接忘了修改）

二、功能测试

三、用户界面测试 风格、样式、颜色是否协调（HTML5本身/HTML5会嵌入App里面）

四、兼容性测试 （浏览器兼容/系统兼容/机型/屏幕兼容）
手机HTML5主要应用是嵌入在app/微信公众号里面，所以兼容性主要是IOS、android系统各种主流机型的适配

五、关注点

1、业务逻辑相关（登录/翻页/刷新与返回/ mtop接口返回处理）

2、h5适配相关（安卓/IOS/大小屏幕）

3、安全相关（明确投放渠道/评估是否需要接入集团安全/是否需要接入支付宝实名认证/是否接入windvane）

4、体验相关（资源/流量/页面展现时间/页面提示/手机操作/弱网络）
4.1、资源相关（A、页面中有图片的话，淘宝那边建议图片一般不大于50kb，本着一个原则，尽量缩小图片。 B、资源是否压缩、是否通过CDN加载。 C、如何保证二次发布后有效更新）
4.2、流量（A、对于一些不会变化的图片，如游戏动画效果相关图片，不需要每次都请求的东西，做本地缓存。 B、数据较多时是否做了分页加载。）
4.3、页面展现时间（关注页面首屏加载时间）
4.4、页面提示（A、弱网络下，数据加载较慢，是否有对应的loading提示。 B、接口获取异常时，提示是否友好。C、刷新页面或者加载新内容时页面是否有抖动。）
4.5、手机操作相关（A、锁屏之后展示页面。 B、回退到后台之后，重新呼出在前台展示）
4.6、弱网络体验

5、埋点数据检查

六 、H5页面测试注意点

1、基本功能测试，功能是否符合设计要求和业务流程。

2、适配多个浏览器，Android和ios自带浏览器，UC浏览器，百度浏览器，QQ浏览器。

3、加载速度（要清除浏览器缓存），可使用webpagetest 来测试。

4、浏览器进行刷新，页面是否仍处于当前页面。

5、手机自带返回键，进行测试，点击一次，和点击多次，会不会按顺序返回期望页面

6、直接用url 是否能够成功打开。

7、覆盖至主流屏幕尺寸和分辨率，一定要测试小屏幕的状态

8、锁屏后展示页面，返回到后台之后，重新掉出来在前台展示

9、类似公司名称、offer名称长度的问题，在手机上最好能根据屏幕大小自适应而不是截断，因为手机上是不会有tips可以看的。截断导致大屏幕下也只能显示几个字，交互不好。

10、由于全面屏的出现，测试需要找刘海屏和全面屏进行测试，适配的问题会有

七、与App对接测试常见问题

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

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

3、App与HTML5对接部分需要加密传输

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

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

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

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

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

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

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

11、微信主要是入口不一致，申请对接公众号后，需要用微信自带的浏览器进行兼容性测试