一、H5介绍
H5即 HTML5，是 Web 端开发语言版本，手机 APP 页面大部分用 H5 实现，包括 PC Web 站点也会用到它进行开发实现。 Web 的通用测试点和方法基本都可以适用于它。
H5：移动端Web页面。
应用场景：APP活动专题页面、APP分享链接、新闻页面、微信公众号等文章页面
技术实现：广义上包括HTML(网页内容与结构)、CSS(网页样式)和JavaScript(网页互动)技术组合实现
（例如上图就是一个简单的H5页面,此图为网上收集而来）
H5页面和普通页面的区别
HTML5的web页面和传统的网页界面比起来，最大的区别则是HTML5页面能适配不同尺寸的移动设备正常大小查看，支持市场上不同浏览器的兼容匹配。
普通的网页制作切片采用table布局，HTML5页面制作则采用的是DIV、CSS布局方式。
HTML5另外有更多的新功能，包括全新的解析规则、一系列过时或冗余的属性被淘汰、离线编辑、拖放功能、新增SQL数据库通用标准、多用途互联网邮件扩展(MIME)和协议处理程序注册。
HTML5技术的出现，让网站变得更加灵动提供了可能性。HTML5网站好处是用户可随意在单页面中插入各种视频、音乐、图片等多媒体元素，网站的加载速度丝毫不受影响。此外，HTML5网站对搜索引擎友好，极大地方便网站收录。
二、H5测试前期准备
1. 了解项目相关人员
-
H5制作至上线，涉及包括有：运营、产品、前后端开发、测试等
2. 熟悉需求
-
尽快尽早介入项目，需求文档在评审确定后充分研读需求，在未开放完成前发现需求存在逻辑问题，减少减轻开发成本，其中对相关逻辑确认无误、初步掌握时，再对设计稿进行熟悉。
三、流程概览
| 流程 |
| 1、了解项目人员 -> 2、熟悉需求 -> 3、编写测试用例 -> 4、执行测试 -> 5、回归测试 -> 6、产品验收 |
四、测试内容
H5测试内容包括：功能测试、适配兼容测试、前端性能测试、服务端性能测试、安全测试
1. 功能测试
1、页面请求数据是否正确：是否数据正常，是否有流量浪费重复请求等，造成响应速度变慢等
2、 session失效机制：session默认有效期失效时，功能业务是否正常
3、cookie机制：关注有和没有cookie后的表现是否正常，获取数据失败后重试机制
4、返回测试：Web页面返回与自带返回功能是否正常实现功能，再次进入后页面数据是否有刷新
5、页面刷新：刷新后请求链接是否正常
6、图片适配：图片有无超出边线，不同分辨率中不同图片显示
7、转场动画：两个功能之间转场动画
8、接口异常：接口异常的提示信息（例如接口响应慢时）
9、登录校验：若客户端登录了，进入H5时应该也为登录状态。若客户端未登录，进入H5需登录
登录校验失败与成功场景，跳转正常，通过链接进入主页面是否有校验。
10、输入框校验：黑洞词汇，特殊字符处理，空值异常值等
11、弱网降级处理：图片是否在弱网环境下可以进行加载，网络状态差时是否有正确提示
12、网络状态：移动数据状态和WLAN状态功能是否正常
13、显示状况：横屏与竖屏显示状态是否正常
14、点击定位：手指点击页面是否准确无误
15、二级窗口：若存在上层下层展示弹窗，拖动滑动时是否有遮挡穿透
16、文件导入：文件上传测试是否有限制大小、数量、格式等
17、文件导出：导出数据是否正常
18、页面翻页：快速操作场景（是否发出对应请求）
19、弹窗：弹窗是否可以正常弹出与关闭
20、状态清除：在一个状态无法登录时，页面是否有保存无法登录账号的状态信息（可能会造成新登录账号无法填写表单信息，保存了上一个已经填写了表单的状态）
21、手机操作：息屏与挂后台H5显示状态是否正常
22、需求功能测试：是否有实现需求功能（具体根据需求测试）
2. UI测试
1、文字布局：文字布局是否正常、长宽比不一致时，文字换行/不换行显示是否正常
2、图片布局：静态图片查看大小、风格；动态图片查看准确性、点击状态等
3、页面整体：整体是否美观无误
4、设计需求：观看页面是否与设计需求蓝图一致（具体根据需求来看）
3. 适配测试
1、机型匹配：（高端机、中端机、低端机）各机型显示状况
2、系统匹配：（ios、Android）各系统小版本与最新版本的显示状况
3、品牌匹配：（Apple、三星、华为、小米、红米、OPPO、VIVO）各品牌机型显示
4. 性能测试
1、页面加载时长：页面主页加载时间、调用接口数据返回时间、图片加载显示时间等
2、请求数量：内存消耗，流量消耗，并发数量是否对服务器造成影响
3、请求错误数
4、页面大小
5、安全测试
1、是否对于URL请求有拦截
2、是否对敏感信息进行加密传输
3、是否有其他盗取用户信息的途径
4、是否有其他盗取用户资金财产的途径
6、接口测试
1、请求返回结果是否是预期结果
2、接口请求阐述边界值校验
3、接口入参错误处理（例：格式错误等）
7、网络测试
1、网络环境：WLAN、4G、5G、3G等
2、网络异常：弱网、断网
3、网络切换
8、浏览器兼容测试
1、浏览器平台：QQ浏览器、360浏览器、Google浏览器、Edge浏览器等
2、终端匹配：Window端、ios端、Android端
3、兼容不匹配：不匹配时应弹出对应提示(例如手机H5页面不能在电脑端进行展示)
（部分图片材料为网上收集整合，若有版权侵权行为，联系即删）