软件测试之H5页面测试总结（参考）

参考：软件测试之H5页面测试总结https://mp.weixin.qq.com/s/D0_uPMbP4FeIoD_rVpV4Mg

前言

大家反馈资源失效的问题，小编已经收到了，资源还是给和谐，小编也是很无力呀，只能反复的补链接，大家看到失效的说一声，小编一般都是同一时间补的，谢谢大家的支持，进入今天的主题，在最近几个项目中，小编接触了较多关于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）浮层页面
对于一些浮层做的页面，例如地图、产品分类等浮层，注意拖动后是否可以看到它下面的页面，拖动后边缘是否有留白；
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中的链接忘了修改）漏发的风险，所以上线后一定要用外网环境再快速回归下；
如何保证二次发布后有效更新；

以上是对项目中遇到的H5页面的测试关注点的总结，基本都可以应用到移动端APP常见的H5页面测试上，除此之外，如果有其他未考虑到的地方，欢迎大家留言补充~

软件测试之H5页面测试总结（参考）相关推荐

制作html5页面的软件,制作h5页面的软件
原标题:制作h5页面的软件制作h5页面的软件有很多,今天我们以一款非常容易上手的软件来给大家分享制作的过程. 为了展现更多的长页面设置过程,本教程中的完成效果与步骤中采用图片并不一致.您在制作自己的 ...
APP软件与H5的差别
关于app,相信大家都十分了解,它就是我们手机里平时安裝的软件系统,在操作app软件之前,我们必须要去应用商店下载安装才能开始实际操作.然而,H5和APP软件有非常大的差别,它不用去软件商店下载安装, ...
微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
android 加载h5页面部分机型滑动卡顿回弹_网易爆款H5 的交互方法参考
在早些年,H5其实更像是手机上的PPT,只支持点击.滑动这些基础手势操作.以内容展示为主,交互形式为辅. 但到了今天,H5的玩法已经有了质的突破.不仅交互形式超多,形式与内容也能紧密结合,产生1+1大 ...
H5页面制作平台源码微场景制作软件含搭建部署教程
分享一个H5页面制作平台源码,微场景制作软件,快速生成H5页面,含几百套模板和详细搭建教程,开发语言是PHP+MySQL,H5页面适合在微信朋友圈传播,传播能力较强. h5源码下载地址:春哥技术博客获 ...
移动端H5页面编辑器开发实战--原理结构篇
一.前言在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...
html5互动,制作H5页面有哪些趣味互动功能？
以前大家刚刚接触到H5页面,可能会有一种移动版的PPT的展示感受,但现在随着H5制作软件的成熟,用户在制作H5页面时,能够用上的玩法也变得越来越多,而且趣味性也有了很大的增强.具体制作H5页面能有哪些 ...
使用css3d-engine.js编写简单的 360全景h5页面
什么是这里所说的360全景h5页面?查看下面的案例进行了解: 开发项目:http://game.flyh5.cn/resources/game/wechat/zjh/fangtuo/index.htm ...
H5页面验收流程及性能验收标准
1,接入方需要保证H5页面兼容性.功能正常以及满足H5约束规范 2,有支付功能的必须要有订单业务以及订单入口,存在有效订单 3,提前X个工作日提交验收,需要抄送相关设计.产品.H5性能验收负责人进行验 ...

软件测试之H5页面测试总结（参考）

软件测试之H5页面测试总结（参考）相关推荐

最新文章

热门文章