来源：http://www.51testing.com/

　前言

　　在最近几个项目中，小编接触了较多关于H5页面的测试，H5页面的测试除了业务逻辑功能测试外，其他部分的测试方法基本是可以通用的，在此对H5页面的一些通用测试方法进行总结分享给大家。

H5页面介绍

　　1. H5页面

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

　　H5应用在很多地方，如APP的活动专题页面、新闻页面、微信公众号文章页面等都属于H5页面，在PC或者手机浏览器都可以直接访问H5页面。

　　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主要包括文字、图片以及页面布局等方面测试；

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

　　图片：1）静态：大小、风格；2）动态：大小、风格、准确性动态图、转场动画，loading动画，点击动画等；3）刷新页面图片是否正常展示；4）图片适配：根据不同屏幕和分辨率进行适配；

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

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

　　2.3 页面操作

　　1）刷新与返回

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

　　用户主动点击刷新按钮是否仍然处于当前页面；

　　点击返回与back键，回退页面是否是期望页面（安卓物理按键返回；iOS左滑返回，考虑左滑一半松手，自动回到H5页面是否正常加载的情况）；

　　2）翻页

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

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

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

　　3）弹窗出现/关闭

　　手机测试要特别关注交互是否友好，可能会导致一些体验的问题，比如：弹出层的点击，是否会穿透，影响到弹出层下面的页面；

　　4）浮层页面

对于一些浮层做的页面，例如地图、产品分类等浮层，注意