H5页面测试总结
前言
在最近几个项目中,小编接触了较多关于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页面测试总结的更多相关文章
- [转]h5页面测试总结
转自http://www.blogjava.net/qileilove/archive/2014/07/24/416154.html?utm_source=tuicool H5页面测试总结 其实经过几 ...
- 关于H5页面的测试总结与分析
一.时下最流行的H5到底是什么 ?有什么优势和劣势? (1)H5 即HTML5,其实就是:移动端Web页面. (2)优势: H5可以跨平台使用,开发成本相对较低 H5可随时上线就更新版本,适合快速迭代 ...
- 【原】让H5页面适配移动设备全家 - 前端篇 - PPT
7月份在部门内给设计中心的同事们带来<让H5页面适配移动设备全家 - 设计师篇 - PPT>的分享,在视觉和交互稿上提出页面适配的建议及提升页面体验的好处,促进前端和设计双方更好的合作,同 ...
- 【原】让H5页面适配移动设备全家 - 设计师篇 - PPT
上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前 ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
- 那些过目不忘的H5页面
原文链接:http://isux.tencent.com/great-mobile-h5-pages.html 从引爆朋友圈的H5小游戏<围住神经猫>,到颠覆传统广告的大众点评H5专题页& ...
- 微信H5页面内实现一键关注公众号
H5页面内实现关注公众号的微信JSSDK没有相关接口开放,因此就得动点脑筋来实现该功能了.下面的方法就是通过一种非常蹊跷的方式实现的. 首先,需要在公众号内发表一篇原创文章,注意是原创文章,然后由另一 ...
- IOS的H5页面滑动不流畅的问题:
IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK
随机推荐
- 文件锁-fcntl flock lockf
这三个函数的作用都是给文件加锁,那它们有什么区别呢? 首先flock和fcntl是系统调用,而lockf是库函数.lockf实际上是fcntl的封装,所以lockf和fcntl的底层实现是一样的,对文 ...
- fiddler笔记:TimeLine时间轴选项卡
1.TimeLine选项卡介绍 TimeLine选项卡支持使用"瀑布"模型查看1~250个选中的Session.主要用于帮助性能分析和理解请求之间的关联.选项卡的主体内容是数据流视 ...
- PowerShell 反弹渗透技巧
Windows PowerShell 是一种命令行外壳程序和脚本环境,使命令行用户和脚本编写者可以利用 .NET Framework的强大功能,并且与现有的WSH保持向后兼容,因此它的脚本程序不仅能访 ...
- Ansible 自动化工具入门
Ansible 配置 Ansible 简单管理 下面的小实验,我们将采用以下的IP地址规划,请自行配置好. [实验环境] [状态] [主机列表] [python版本] 控制机 192.168.1.10 ...
- 数值分析-Legendre正交多项式 实现函数逼近
数值分析-Legendre正交多项式 实现函数逼近 2016年12月18日 21:27:54 冰三点水 阅读数 4057 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请 ...
- css文本超出隐藏 显示三个点
文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...
- angular-file-upload.min.js.map文件下载
https://github.com/nervgh/angular-file-upload 下载地址 在文件 菜单栏有对应文件
- nhandled rejection Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache npm ERR! cb() never called!
安装全局包时报错,之前已经遇到过,结果第二次又忘记解决方法,果然还是要记下来,好记性不如烂笔头哇 $ npm i electron -gUnhandled rejection Error: EPERM ...
- Flask debug 模式 PIN 码生成机制安全性研究笔记
Flask debug 模式 PIN 码生成机制安全性研究笔记 0x00 前言 前几天我整理了一个笔记:Flask开启debug模式等于给黑客留了后门,就Flask在生产网络中开启debug模式可能产 ...
- 前端基础(二):CSS
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...