h5页面的基本测试点

author author     2022-10-01     730

关键词:

优势:
  1. H5可以跨平台使用,开发成本相对较低
  2. H5可随时上线就更新版本,适合快速迭代
  3. H5可以轻量的触达用户,提供更便捷的服务
          在微信入口或者浏览器上,用户只需点开链接就可以获取我们锁提供的服务 
 
劣势:
  1. H5->app的转化强依赖于浏览器
  2. H5目前基本无法将数据存储在本地,依赖实时性数据,网络状态不好的时候卡到哭。
  3. 性能相对较低,影响用户体验
 
如何判断是否是H5页面:
  1. 基本上只要对那个view长按,然后看是不是有反应,比如手机震动(Android)、或者出现文字选择粘贴(Android/iOS),那么就是WebView!

如何测试H5:
  1. 基本功能测试:(浏览器、微信内置浏览器)
  2. 登陆

    目前H5与native各个客户端都做了互通,所以大家在测试的时候要注意两点:

    A、若客户端已登录,那么进入H5后仍然是登录状态。

    B、若客户端未登录,进入H5,点击对应按钮OR链接,如果需要登录,须拉起native登录。若取消登录,是否可再次拉起登录,或者停留在的页面是否有对应的登录提示。

    ps:本次测试过程中就发现,第一次点击链接,可以拉起登录,第二次却不能。

    1.2 翻页

    遇到翻页加载的页面,需要注意内容为1页或者多页的情况。

    A、数据分页加载时,注意后续页面请求数据的正确。

    ps:这个需要注意在快速操作场景中,请求页数是不是依次递增,快速操作(如第一页尚未loading出来的时候仍然继续上拉操作)时是否发出去对应的请求了。

     

    3. 刷新与返回

    A、下拉刷新是否仍然处于当前页面。

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

    C、点击返回与back键,回退页面是否是期望页面

    ps:本次测试过程中就发现,mtop接口请求成功,但是data内无数据时,返回到的就是个空白页面,无法正常发送请求。

     

    4、H5适配相关

    H5的适配其实比客户端的相对来说,要少一些,手机品牌之间的差异不大,所以不用太多关注,最容易出现问题的是android2.3系统,这个要特别关注下:

    A、大屏(如720*1280,重点关注页面背景是否完全撑开页面,刷新是否有抖动)、小屏手机(如320*480,重点关注下弹框样式和文案折行)

    B、android2.3、android4.X随机找一个即可。

    C、ios5、ios6、ios7。

     

    5、体验相关

    5.1 资源相关

    A、页面中有图片的话,淘宝那边建议图片一般不大于50kb,本着一个原则,尽量缩小图片。

    B、资源是否压缩、是否通过CDN加载。

    C、如何保证二次发布后有效更新。

    5.2 流量

    A、对于一些不会变化的图片,如游戏动画效果相关图片,不需要每次都请求的东西,做本地缓存。

    B、数据较多时是否做了分页加载。

    5.3 页面展现时间

    A、关注页面首屏加载时间。

    5.4 页面提示

    A、弱网络下,数据加载较慢,是否有对应的loading提示。

    B、接口获取异常时,提示是否友好。

    C、刷新页面或者加载新内容时页面是否有抖动。

    5.5 手机操作相关

    A、锁屏之后展示页面。

    B、回退到后台之后,重新呼出在前台展示。



app内部h5测试点总结

...本功能测试外,需要关注的一些测试点: a.登录   a.1H5页面嵌入到客户端使用,若客户端已经登录,进入H5页面应该是登录状态   a.2H5页面嵌入到客户端内使用,若客户端未登录,如果访问的页面需要登录,是否能跳转到客... 查看详情

h5测试关注点

1:逻辑相关除了基本的功能测试以外,H5页面的测试需要关注以下几点:1.1登录目前H5与native各个客户端都做了互通,所以大家测试时要关注两点A:若客户端已登录,那么进入H5后仍是登录状态B:若客户端未登录,进入H5,点击... 查看详情

h5测试关注点

...ferral 1、业务逻辑相关  除基本的功能测试之外,H5页面的测试,需要关注以下几点:  1.1登陆  目前H5与native各个客户端都做了互通,所以大家在测试的时候要注意 查看详情

h5页面压测是啥

参考技术A测试网页的运行。h5页面压测是保障网页运行的测试方式,目的就是测试网页的正常运行。h5页面用于H5语言编写的界面,原本是一种制作万维网页面的标准计算机语言。 查看详情

用户行为分析模型实践——h5通用分析模型

...提供可借鉴的用户行为数据采集方案;且完整呈现了针对页面分析,留存分析的数仓模型规划方案,在数仓模型设计过程中遇见的痛点难点问题也相应的给出了解决思路及案例代码;在数据展示模块,提供了分析指标数据展示的... 查看详情

如何制作关于测试的h5页面

...得分显示不同元素的触发1.第一页是一个输入用户姓名的页面,我们新建一个页面,添加高级组件-高级表单里的“输入框组件”,再添加一个全局变量和开始测试的图片按钮,将全局变量命名为“姓名变量”,调整类型为“文本... 查看详情

h5测试

...容包括:业务逻辑、适配、刷新、流量、网络、流畅性、页面的加载时间、体检、翻页与返回、数据的请求、手机操作(锁屏、前后台切换、页面滑动)          工具:谷歌浏览器中,开发者... 查看详情

如何判断一个app页面是原生的还是h5页面

...火的APP开发模式是HybridAPP开发(即混合模式,半原生半H5页面)。把手机的网络断掉。然后点开页面。然后可以正常显示的东西就是原生写的。显示404或者错误页面的是html页面。可以打开开发者选项中的显示布局边界,页面元素... 查看详情

h5页面的测试方式

...链接测试 链接是Web应用系统的一个主要特征,它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段。链接测试可分为三个方面。首先,测试所有链接是否按指示的那样确实链接到了该链接的页面;其次,测试... 查看详情

详细解剖大型h5单页面应用的核心技术点

   阐述下项目Xut.js 开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件)。这也并非一个开源项目,不能商业使用,... 查看详情

jmeter微信h5页面的压力测试之xml

老样子,周末在加班中度过;最近工作比较忙,也没时间整理一些学习工作中累计的东西,今天被开发放鸽子,好好的周末啊,又没了,怨念ing。。。。。。之前介绍了关于jmeter的基础以及录制脚本的两种方法,今天就以我最近... 查看详情

浅淡iosapp加载h5页面

参考技术A由于目前的工作中,原生app大量嵌入h5页面,很多的功能需要h5来实现,但是由于h5需要从网络加载,在弱网状态或者请求资源大的时候必然出现白屏,再网上搜索后发现并没有一个通用的解决方案,其中VasSonic(手Q的解... 查看详情

androidwebview基本使用总结

...Webview组件的两种方式Webview设置Webview如何加载显示网页H5页面链接跳转和返回问题总结给WebView添加一个事件监听对象。点击链接由自己处理点击系统“Back”键,退出整个H5页面问题。Android与H5页面如何互调:Android如何调... 查看详情

androidwebview基本使用总结

...Webview组件的两种方式Webview设置Webview如何加载显示网页H5页面链接跳转和返回问题总结给WebView添加一个事件监听对象。点击链接由自己处理点击系统“Back”键,退出整个H5页面问题。Android与H5页面如何互调:Android如何调... 查看详情

如何辨别app是原生开发的还是h5开发的或是混合开发

参考技术A1、看断网的情况把手机的网络断掉。然后点开页面。然后可以正常显示的东西就是原生写的。显示404或则错误页面的是html页面。2、看布局边界可以打开开发者选项中的显示布局边界,页面元素很多的情况下布局是一... 查看详情

测试环境h5页面浏览器兼容性测试

一、搭建测试用本地静态服务器参考链接二、MultiBrowser等浏览器兼容性测试工具等 查看详情

测试环境h5页面浏览器兼容性测试

一、搭建测试用本地静态服务器参考链接二、MultiBrowser等浏览器兼容性测试工具等 查看详情

bug:页面交互操作引发的问题

最近在测试一些h5页面,突然悟到一些测试点 需求点:用户可以在页面领取礼物,领取的礼物在页面底部展示,用户点击礼物可调起分享弹窗,礼物超过一屏可左右滑动,bug的表现形式:仅当礼物超过一屏时(一行),点击... 查看详情