h5测试点

一.功能测试
1、关注页面请求。对于每个页面，要查看发送的请求是否正确，请求的接口是否有重复，接口请求是否正确返回等。可通过chrome中自带的开发工具查看网络请求。
关注是否有冗余接口请求，是否有不必要的重复接口刷新请求。 冗余和重复的接口请求会导致流量浪费和响应速度变慢。
2、关注application cache
（http://www.html5rocks.com/zh/tutorials/appcache/beginner/）, local storage（http://www.html5china.com/HTML5features/LocalStorage/20120519_3711.html）, cookie中值是否正确，页面是否有使用application cache, local storage存放数据。清除这些数据后功能是否正确，获取数据失败后是否有重试机制。（可以用下图Chrome开发工具，进行查看和清除，也可用postman,soupUi等）。 注意：老版chrome开发者模式下在resource下查看cache，新版chrome在application下查看。

3、session失效机制。对于要登录的，需要用到session的地方，要注意模拟session失效时，功能业务逻辑是否正常。
4、返回逻辑：对于页面中的返回，以及浏览器自带的返回的测试。 页面中的返回要考虑业务逻辑，友好返回到相应层次，需要从用户角度考虑返回的转跳逻辑，不能出现死循环。并要注意返回后是否需要刷新页面请求，比如支付完后返回订单列表，最好刷新
展示上一步购买的订单。
5、页面刷新，刷新时的请求链接是否正确。
6、图片适配，是否根据不同屏幕和分辨率做适配，高端机取双倍尺寸的图；是否对于2G网络，或低端机单独处理，不取高清图或减少一些特效动画效果；最好加上webp图片的支持，可减少流量；在中低端机上考虑是否需要让前端单独处理，去掉复杂处理。并
对中低端机只取原图，不取高清图。注意：webp格式只对android有效，放在IOS上反而会起反作用。
7、是否要增加转场动画，loading动画，点击动画等。以提升体验。需要在动画效果和卡顿上衡量。
8、对于隐私模式，不存cookie，不开javascript执行等，测试是否功能正常，或给出提示。
9、接口降级，接口异常时如何处理，前端要给出友好提示。
10、对于请求比较慢时，要有loading图案，图案在数据出来后要消失，且不能与转场动画等其它有冲突。
11、输入框的校验：特殊字符显示，过滤黑词，js是否会执行，一连串长字母是否会换行等。 比如只输入空字符的处理。
12、弱网络降级：处于2G/3G网络省流量模式的一些特殊处理，比如2G网络下测试，图片多时是否要懒加载等。网络状况差的场景，可提示文案，但不能闪退。
13、网络切换：从wifi切换到2G/3G网络、从2G/3G网络切换到wifi等
14、H5与Native切换：切换时登录信息是否记录、流程是否顺畅、是否出现中断闪退等问题。 注意验证 登录信息是否能互通。 不能出现native已经登录，进入h5后继续让登录，实在技术实现不了的可toast提示用户继续登录。
15、Pad上测试需要注意：横屏和竖屏下的显示效果可能不同，还有横屏换成竖屏、竖屏换成横屏。注意横竖屏切换时输入框的不同。
二.适配测试
1）H5机型适配
在项目测试计划给出时，确认是否要确定测试机基线，即是否要以几款机型作为最低适配需求。可参考目前应用市场占有分布。
操作系统适配范围：ios 8-10固件版本的iphone必须覆盖，ios7可选覆盖，android 4.4-6.x必须覆盖，4.0-4.3可选覆盖，4.0以下可以不care。像小米，魅族这种自定义os版本的机子，其实底层也对应着标准的谷歌os系统版本。
对于ios, android大版本一定要覆盖，对于系统版本，先看大版本占用情况，再选择大版本中占用率较高的小版本。如4.3, 5.0大版本中选几个占用率较高的小版本测试。常用的有：ios：8.x.x, 9.3.5；android: 4.3.1, 4.4.2 等。
机型品牌适配范围：参考集团内后端统计的top机型。对于ios，要覆盖iphone 6/6s/6p, iphone 7,iphone5等。
对于android,如三星、小米、华为，htc, lenovo，中兴，魅族，阿里云等。屌丝机型 华为，中兴，vivo，oppo,魅族占有率很高，所以这几个屌丝机型一定要覆盖到。三星上的H5问题防不胜防，相当极品。小米近一两年的机型适配问题不想2s那么多了。
三星常见的H5适配问题：css加载不出来，控件操作无响应。小米常见的H5适配问题是UI，比如button会把这个按钮四个角冗余显示，tab切换异常。 实时滚动信息时卡死等。
对于有些手机厂商有自已定制操作系统，要单独适配，如小米，魅族。注意三星的假系统版本。
在选择机子时，要兼顾屏幕尺寸和分辨率。覆盖到主流的屏幕尺寸和分辨率，并组合一下，现在主流是1920大屏，但一定要找几款小屏手机覆盖。注意三星的
适配时不能光选性能好的机子，一定要适配几款中低端机。华为和中兴的国产机，可选择适配一下。
2）手机浏览器适配
需要覆盖：自带浏览器（默认的浏览器内核）为主，有足够时间时再覆盖chrome,UC浏览器（最新版）和QQ浏览器（最新版）。
3）容易出现适配问题的机型：
三星i9100G，对于按钮样式，输入框的区域要重点关注。
android 5.X 谷歌原生的nenux系列。
大屏高分辨率手机要适配一款，如三星galaxy note4
对于支持webp的机子要测试。如三星galaxy note2,或三星s3
4）工具
1.市面上各种云测平台，一般都可以单独测试H5适配。
2.可借助浏览器的开发者模式。
三.性能测试
1) 需要关注的性能指标：
页面加载时间/页面大小/页面请求数/ DomReady时间/图片等资源文件大小/请求错误数
2) 各种云测平台
3) 其他性能测试工具：dyna trace，yslow，page speed，firebug等等
4）免费公共测试web：
http://www.webpagetest.org/ 免费测试。

       测试结果参考：http://www.webpagetest.org/result/170511_3E_6HT/   可以切换查看各种细节      注意：该报告中都会指出没有cache问题，一边我们的H5 会嵌入在native，也就是Hybrid, 都会在集团的框架内，所以cache大多数都由客户端来管理。比我我们度假的H5活动页面，会由美团客户单统一管理cache。

四.安全测试
1)、从代码层级分析html5新特性带来的安全漏洞。常见的：
通过formaction属性进行XSS
通过autofocus属性执行本身的focus事件
多个autofocus竞争焦点来触发blur事件
通过的poster属性执行Javascript
通过autofocus触发的onscroll执行Javascript
具体原理和其他漏洞可见http://html5sec.org/#html5
2)、从手机用户角度列举手机网页存在的一些安全问题（非测试角度）,大致有以下：
恶意url。包括html链接、短链接、短信中的url、扫二维码产生的url
通过XSS窃取数据库内容。各种XSS可参见http://html5sec.org/#html5
自BeEF的攻击（BeEF有点类似fiddler，具体可见
https://github.com/beefproject/beef）。包括cookie窃取、披露设备地理位置、打骚扰电话、不需要的下载
访问不安全的web服务。
窃听移动网站流量。
五. H5上线后回归
H5涉及到的各种资源文件，在测试环境（包括预发环境），一般都是内域，正式上线，RD童鞋有把资源文件（或者说url中的链接忘了修改）漏发的风险，所以上线后一定要用外网环境再快速回归下。最简单的就是用自己的4G网络回归跟踪线上。
六.H5测试与PC端测试不同的点
1、通过H5网页（非手机的返回功能）的返回功能可以返回，不会出现无法返回的情况。
2、横屏竖屏相互切换，能自适应，并且布局不会乱掉；
3、为能在不同分辨率的手机上能更好的展示，建议采用响应式设计（如：offerlist页面在大屏时显示3行，小屏时显示2行）
4、在手机上从list点击进入detail页面，要在原窗口打开，这样可以通过页头的返回按钮返回，而不需要通过手机的返回键返回，这样交互上更友好。
5、关注页面请求，是否会有多余的请求，或者请求后有多余的数据返回，尽量精简，否则会浪费流量。
6、图片适配测试，根据不同屏幕和分辨率做适配，以及适配后的清晰度，高端机取双倍尺寸的图
7、H5的页面在PC端也是能访问的，chrome对H5支持最好，功能的测试可以在PC端chrome下先测试，也可以在手机上直接测试，这个看个人习惯。（ie系列包括ie8,及以下都支持的不好）
8、手指滑动是否流畅，手指点击时焦点是否定位正确，不同机型会不一样。焦点点击是否灵敏。
9、对于类似公司名称、offer名称长度的问题，在手机上最好能根据屏幕大小自适应而不是截断，因为手机上是不会有tips可以看的。截断导致大屏幕下也只能显示几个字，交互不好
10、手机测试要特别关注交互是否友好，与PC机的事件模型不一样，可能会导致一些体验的问题，比如：弹出层的点击，是否会穿透，影响到弹出层下面的页面。
11、对于一些浮层做的页面，例如地图、产品分类等浮层，注意拖动后是否可以看到它下面的页面，拖动后边缘是否有留白
12、手机端的浏览器测试的时候也要清除一下缓存，因为图片和文件会被缓存下来，所以首次访问和二次访问体验不一样。例如UC浏览器的清楚缓存在设置-》系统设置-》基本设置–》清除记录中。