首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >H5页面测试总结|干货

H5页面测试总结|干货

作者头像
软测小生
发布2019-10-26 20:39:05
2.8K0
发布2019-10-26 20:39:05
举报
文章被收录于专栏:软测小生软测小生

前言

在最近几个项目中,小编接触了较多关于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页面测试上,除此之外,如果有其他未考虑到的地方,欢迎大家留言补充~

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-10-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 软测小生 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • H5页面介绍
  • H5页面测试
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档