zoukankan      html  css  js  c++  java
  • H5页面测试要点

    H5是HTML5的简称,以下的内容是介绍H5页面的知识:HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。H5表现在很多地方上,我们平时看到最多的就是手机微信上时不时弹出的腾讯新闻,这些新闻点击进入观看就是H5页面的一个范畴。

    好了,哪下面就主要说说如何去做H5页面的测试呢?

    1、业务逻辑相关的测试:

    除基本的功能测试之外,H5页面的测试,需要关注以下几点: 

    1)登陆测试: 

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

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

    (2)若客户端未登录,进入H5,点击对应按钮OR链接,如果需要登录,须拉起native登录。若取消登录,是否可再次拉起登录,或者停留在的页面是否有对应的登录提示。 (注:本次测试过程中就发现,第一次点击链接,可以拉起登录,第二次却不能) 

    2)翻页测试:

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

    (1)数据分页加载时,注意后续页面请求数据的正确。 

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

    3)刷新与返回的测试:

    (1)下拉刷新是否仍然处于当前页面 

    (2)用户主动点击刷新按钮是否仍然处于当前页面 

    (3)点击返回与back键,回退页面是否是期望页面 

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

    4) mtop接口返回处理:

    发现这个出现问题的地方有很多,但是只要有意识的去处理,就很容易避免,主要是有以下几种情况: 

    (1)请求成功,且返回有数据,测试mtop接口返回数据的各种场景。 

    (2)请求成功,但data内容为空。 

    (3)请求接口异常,出现ERR_SID_INVALID::SESSION过期,拉起登录。 

    (4)请求接口发生除C中提到的异常之外的异常,通常可归结为一类进行处理。 

    2、与H5适配相关的测试: 

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

    1)分辨率高(如720*1280,重点关注页面背景是否完全撑开页面,刷新是否有抖动)、分辨率低(如320*480,重点关注下弹框样式和文案折行) 

    2)android4.2版本以上的设备随便测试一两台即可

    3)苹果近几年常用的系统版本手机

    3、安全相关的测试:

    1)明确投放渠道都有哪些 :

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

    2)评估是否需要接入集团安全,如mtee黑白名单等

    3)是否需要接入支付宝实名认证:

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

    4)是否接入windvane,所有请求通过native发出

    4、操作页面体验相关的测试:

    1)资源相关:

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

    (2)资源是否压缩、是否通过CDN加载 

    (3)如何保证二次发布后有效更新 

    2)流量消耗: 

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

    (2)数据较多时是否做了分页加载。 

    3)页面展现时间:

    (1)关注页面首屏加载时间。 

    4)页面提示: 

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

    (2)接口获取异常时,提示是否友好。 

    (3)刷新页面或者加载新内容时页面是否有抖动。 

    5)手机操作相关:

    (1)锁屏之后展示页面。 

    (2)回退到后台之后,重新呼出在前台展示。 

    (3)弱网络体验 

  • 相关阅读:
    King's Quest
    JavaScript“并非”一切皆对象
    javascript中的style只能取到在HTML中定义的css属性
    jquery中的$(this)和this
    WEB安全字体(Web Safe Fonts)-网页设计用什么字体兼容性好?
    css各种水平垂直居中
    css绘制各种形状
    css3椭圆运动
    通过时间戳控制类
    js中的面向对象程序设计
  • 原文地址:https://www.cnblogs.com/Zhang-engineer/p/9232180.html
Copyright © 2011-2022 走看看