可能有些朋友不明白啥是H5,但其实生活中我们经常会碰到。

比如,你经常收到的朋友虐狗第一式—结婚请贴。

你的朋友圈,可能会经常看到宝妈们虐狗第二式—晒可爱宝宝的相册。

你有可能也收到过这样,非常直观,充满激情和诱惑的招聘信息。

等等等等等等...

看到这里你也许恍然大悟,哦,原这就是H5!

没错,我们平时说的H5测试就是HTML5

其实就是:移动端WEB页面。

01

那么它跟安卓APP与IOS APP有什么样的区别呢?

◆  我们以往的APP是使用原生系统内核的,相当于直接在系统上操作,是我们传统意义上的软件,更加稳定。

◆  H5的APP先得调用系统的浏览器内核,相当于是在网页中进行操作,较原生APP稳定性稍差,似乎还没有百万级用户量的H5 APP。

◆  H5最大的优点是可以跨平台,开发容易。APP的话需要用ANDROID的语言和IOS的语言各自写,H5只要开发一套 。

简单的说:H5是基于web,native基于客户端。

 

02

那么H5测试应该从哪些方面考虑?

首先和业务逻辑相关,除基本的功能测试之外。

H5页面的测试,需要关注以下几点:

 

1登录

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

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

B、若客户端未登录,进入H5,点击对应按钮OR链接,如果需要登录,须拉起native登录。

C、若取消登录,是否可再次拉起登录,或者停留在的页面是否有对应的登录提示。

2翻页

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

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

ps:这个需要注意在快速操作场景中,请求页数是不是依次递增,快速操作

 

(如第一页尚未loading出来的时候仍然继续上拉操作)时是否发出去对应的请求了。

3刷新与返回

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

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

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

4数据的请求与返回

A、提交了数据,数据是否正确的整理到后台管理系统:结婚请帖来参加婚礼的用户,信息和号码以及参与人数,是否正确的提交后台。

B、发送了请求,是否正确返回你要求的数据。比如我们常见的结婚请帖,是否有收到回执?

03

1H5适配

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

这个要特别关注下:

 

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

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

C、ios5、ios6、ios7。

D、浏览器上也要能够进行完美展示。

04

和安全相关就要注意这几点:

1明确投放渠道都有哪些

如独客、主客、wap,是否对未投放渠道做了限制,直接通过url请求是否拦截等

是否需要接入支付宝实名认证涉及到金钱相关,如天猫积分,红包等,为了防刷,一般都需要判断是否支付宝实名认证。

以前我在的公司,有一次为了做推广~发起了一个数钱的活动,每次都是一毛一毛的数,时间是15秒。

出现如下bug:

A、利用脚本数钱,15秒数出了100多~~-最后出于推广成本的考虑,就把时间限制为5秒、

B、转发一次就可以奖励多一次机会数钱,结果没有做好限制,朋友的朋友推广,还是可以奖励次数。

05

和体验相关应该注意一下几点:

1资源相关

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

B、资源是否压缩、是否通过CDN加载。---CDN是什么?---就近地区访问,服务速度会更快。

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

D、对于类似公司名称、offer名称长度的问题,在手机上最好能根据屏幕大小自适应而不是截断,因为手机

上是不会有tips可以看的。截断导致大屏幕下也只能显示几个字,交互不好

2流量

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

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

3页面展现时间

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

4页面提示

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

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

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

5手机操作相关

A、锁屏之后展示页面。

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

C、手指滑动是否流畅,手指点击时焦点是否定位正确,不同机型会不一样。焦点地位后点击是否灵敏。

6弱网络体验

06

1埋点数据检查

与前端同学一起确认埋点情况。

什么是埋点?

接下来你可能要问,H5测试的工具是什么?很简单。

A、你手上的手机---直接扫描二维码打开链接,进行测试。

B、谷歌浏览器---调试成手机模式来进行测试。

下载谷歌浏览器,点击浏览器右上角“三”图标,在下拉选项中选择“更多工具”-“开发者工具”,或者直接按F2;

转载自:

原创: 柠檬班美华华   柠檬班软件测试公众号

H5测试(转载)的更多相关文章

  1. APP,H5测试要点

    APP测试重点 一,运行测试 运行过程中,是否有加载提示: 运行速度是否流畅: 各个模块之间的切换是否正常: 二,更新测试:打开旧版app时,是否有更新提示,且在不同的手机版本上都能更新成功:打开新版 ...

  2. H5测试

    H5是什么? H5的全称是HTML5,其实就是:移动端WEB页面. H5与原生 APP的区别: APP是使用原生系统内核的,相当于直接在系统上操作,是我们传统意义上的软件,更加稳定. H5的APP先得 ...

  3. 一张图玩转H5测试

    背景 随着各种H5页面的普及和运用,并深深的影响着我们各个业务的发展,前两年也对H5测试的有着不少积累,但都是根据项目的要求,这里测试下,那里测试下,今年上半年专门成立了H5测试研究虚拟小组,专门研究 ...

  4. H5测试区别与PC端测试关注点

    除了基本的业务逻辑功能测试之后,H5页面的测试,需要关注以下几点: 1.  通过H5网页(非手机的返回功能)的返回功能可以返回,不会出现无法返回的情况. 2.  横屏竖屏相互切换,能自适应,并且布局不 ...

  5. 谷歌Cartographer学习(1)-快速安装测试(转载)

    转载自谷歌Cartographer学习(1)-快速安装测试 代码放到个人github上,https://github.com/hitcm/ 如下,需要安装3个软件包,ceres solver.cart ...

  6. h5 测试关注点

    原文链接:http://www.blogjava.net/qileilove/archive/2014/07/24/416154.html?utm_source=tuicool&utm_med ...

  7. H5测试与PC端测试不同的点

    1.通过H5网页(非手机的返回功能)的返回功能可以返回,不会出现无法返回的情况. 2.横屏竖屏相互切换,能自适应,并且布局不会乱掉: 3.为能在不同分辨率的手机上能更好的展示,建议采用响应式设计(如: ...

  8. 微信小程序和微信H5测试中易出Bug的点和注意事项

    一.微信小程序 易出Bug的点: 小程序的分享转发功能 背景:小程序项目开发基本完毕也都已经测过几轮,功能上基本没有什么问题,但是上线后却被客户发现通过分享转发小程序给别人,别人无法正常打开的情况 原 ...

  9. native与H5优缺点及H5测试

    一.native(原生)与H5优缺点介绍 native(原生)优点 1.运行速度快 2.可以应用到底层的API 3.便捷性与易用性 4.打开会比较节省流量 native(原生)缺点 1.不同操作系统需 ...

随机推荐

  1. jquery实用技巧之输入框提示语句

    我们在编写网页的时候不可避免的会遇到输入框,那么怎么设计输入框才能更加优雅呢?不同的人会有不同的答案,下面分享一个比较不错的设计. 效果图 细节 这个效果主要是通过JQuery来实现,我的思路如下: ...

  2. 第四周 day4 python学习笔记

    关于装饰器的更多信息可以参考http://egon09.blog.51cto.com/9161406/1836763 1.装饰器Decorator 装饰器:本质上是函数,(装饰其他函数),就是为其他函 ...

  3. 原生js实现类名(class)的增、删

    先判断是否有这个类名: function hasClass( elements,cName ){   return !!elements.className.match( new RegExp( &q ...

  4. Java Web技术经验总结

    接口的权限认证,使用拦截器(HandlerInterceptorAdapter),参考:第五章 处理器拦截器详解——跟着开涛学SpringMVC.注意:推荐能使用servlet规范中的过滤器Filte ...

  5. linux 配置 tftp

    环境:ubuntu 目的:搭建嵌入式板子网络环境 1)下载tftpd-hpa tftp-hpa 前者是服务器,后者是客户端 $sudo apt-get install tftpd-hpa tftp-h ...

  6. 使用npoi插件将excel文件导出

    大致流程:前端使用URL地址的方式跳转到action后返回file类型数据 js: window.location.href = '/Home/index?Id=' + id 后台代码: /// &l ...

  7. IBM websphere MQ远程队列的简单配置

    原理: 1.远程队列分发送方和接收方 2.接收方配置: 接收方配置要先拿到对方的发送通道配置,接收方的队列名称必须和远程发送方的队列名称一致,告诉远程发送方,你的地址,队列管理器名称等信息,在通道中建 ...

  8. Django CreateView 简单使用

    django.views.generic中的CreateView类,是基于View的子类.CreateView可以简单快速的创建表对象. 下面记录小作代码. # polls/views.py from ...

  9. Django 查询集的过滤内置条件

    条件选取querySet的时候,filter表示=,exclude表示!=.querySet.distinct() 去重复__exact 精确等于 like 'aaa' __iexact 精确等于 忽 ...

  10. 13、SpringBoot-CRUD员工修改操作/删除

      对于修改连接的uri 在list.html中 <a class="btn btn-sm btn-primary" th:href="@{/update/} + ...