H5页面测试app测试

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中的链接忘了修改)漏发的风险,所以上线后一定要用外网环境再快速回归下;

原文地址:https://www.cnblogs.com/caojuansh/p/11811272.html

时间: 2024-10-15 02:10:10

H5页面测试app测试的相关文章

为了方便h5页面在app上调试看到打印的日志 重写window.console

(function(){ var print={ lock:true, log:function(param){ if(this.lock){ var element=document.createElement("div"); element.style.background='green' element.style.fontSize='20px' switch (typeof param){ case "string" :element.innerHTML=p

黑盒测试之系统测试与APP测试异同

一.侧重点不同 系统测试: 1.系统内置app功能稳定可用,不出现闪退等恶劣现象 2.系统稳定,不出现黑屏.死机.卡顿现象,使用流畅 3.响应时间.功耗满足要求 4.开机启动时间 5.系统自带设置项功能正常可用,测试时要注意设置项与内置app等功能不冲突 6.可正常开关机,测试时要考虑异常断电,关机重启,锁屏重启等现象 7.系统需要做性能?测试,之前经常用安兔兔等软件做性能测试 8.简单的压力测试(以点击次数为准) 9.兼容性测试,主要是从当前主流市场下载不同app,在所用系统做简单功能遍历,看

如何判断一个APP页面是原生的还是H5页面

来源:http://www.25xt.com/appdesign/11851.html Hybrid APP指的是半原生半Web的混合类App.需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web . 原生是Native APP,H5就是Web App 在Hybrid 当中,如何快速的判断一个APP页面是原生的还是H5页面呢? 1.看断网的情况 把手机的网络断掉.然后点开页面.然后可以正常显示的东西就是原生写的. 显示404或则错误页面的是htm

前端如何将H5页面打包成本地app?

大家都知道H5页面怎么在手机浏览器里测试,但是如何能打包成APP测试呢?因为本人的手机是IOS系统,如果用Xcode打包需要开发证书,貌似99美元一年.意外发现一个叫Hbuild的软件,简单好用,下面做个简单的使用分享: 首先到网上下载一个Hbuild,下载地址->戳(windows) 一.安装成功后打开选择暂不登陆,进入主界面如图: 二.把自己打好的包导入到hbuild 三.选择对应选项及文件夹 四.电脑连上手机,点击菜单栏"运行"--"到手机" 五.轻松搞

软件测试 APP测试丶

一:APP概述 li { list-style: none; margin: 0 } p { margin: 0 } span.l { color: red; font-weight: bold } a.mapnode:link { text-decoration: none; color: black } a.mapnode:visited { text-decoration: none; color: black } a.mapnode:active { text-decoration: n

APP页面如何区分是原生的还是H5页面

1.看断网的情况 把手机的网络断掉.然后点开页面.然后可以正常显示的东西就是原生写的. 显示404或则错误页面的是html页面. 2.看布局边界(仅针对安卓手机适用) 可以打开 开发者选项中的显示布局边界,页面元素很多的情况下布局是一整块的是h5的,布局密密麻麻的是原生控件.页面有布局的是原生的否则为h5页面. 3.看复制文章的提示,需要你通过对比才能得出结果. 比如是文章资讯页面可以长按页面试试,如果出现文字选择.粘贴功能的是H5页面,否则是native原生的页面. 有些原生APP开放了复制粘

手机APP测试几个要点

移动互联网App测试点包括: 1.安全测试 1)软件权限 -扣费风险:包括发送短信.拨打电话.连接网络等 -隐私泄露风险:包括访问[url=]手机[/url]信息.访问联系人信息等 -新增风险项 2)开发者官方权限列表信息比对分析 2.安装.运行.卸载测试 验证App是否能正确安装.运行.卸载,以及操作过程和操作前后对系统资源的使用情况,主要包括: 1)检测软件是否能正确安装.运行.卸载: 2)安装.卸载.更新错误报告: 3)其他辅助信息: -位置和文件夹是否合理: -组件是否正确注册或删除:

app测试归纳

测试一个APP,主要包括以下几点: 一. 测试资源: 1.产品功能需求文档   2. 产品原型图    3.产品效果图  4.行为统计分析定义文档  5.测试设备(iOS3.1.3,Android4.0......)  其他 二. 日报及产品上线报告: 1.测试人员每天需要对所测试项目发送测试日报 2. 日报内容包括: ----对当前测试版本质量进行分级 ----对较严重的问题进行举例,提示开发人员优先修改 ----对版本的整体情况进行评估 3.产品上线前,测试人员发送产品上线报告 4.产品上线

web测试与app测试的区别

看过了千里大腿的blog,再加上最近也有一些同学问我web与app测试的区别.所以在这里也献丑,写一篇随笔.希望对大家有所帮助. 笔者做了快三年的测试了.大部分时间都在做app的测试,web测试也做了半年左右.其实我觉得这两者并没有什么大的区别. 仅仅从功能测试的层面上来讲的话,在流程和功能测试上是没有区别的.那么区别在哪里呢? 我个人觉得就是由于载体不一样,所以系统测试和一些细节可能会不一样. 那么我们就要先来了解,web和app的区别. web项目,一般都是b/s架构,基于浏览器的,而app