• 0
  • 0
分享
  • 如何定位分析前端BUG?教你一个快捷的方法!——软件测试圈
  • 曼倩诙谐 2024-05-16 11:25:43 字数 1122 阅读 733 收藏 0

  1、前言

  相信很多小伙伴在测试功能时都会在UI的显示这块下功夫,但是有些时候正常的文字和数据都是很难捕捉到异常情况,这些异常一般只有等到特定条件满足时才会显示出来。比如我之前有做过一个项目,它的首页面是一个展示甲方公司资产的页面,上面有各种的数据,大部分都是整数类的,且支持小数形式。有一次我就突发奇想,如果给它们罗列到小数点后面5位会咋样。于是我特意构造了小数点后面7位的资产数据,结果不做不知道,一做吓一跳,整个页面的布局彻底紊乱了,当时前端开发还是基于谷歌浏览器,谷歌显示尚且如此,其它浏览器如IE就更不可想象了。我当即就将该Bug标为紧急让开发去改!其实我们在做UI测试时一定要对异常多进行验证。这里我教大家一个快捷且偷懒的方法构造简单的异常。

  2、构造异常验证

  如图是国家数据里的各省的年生产总值,本来是想用公司的项目给大家做演示,但是为了公司项目保密,只好用公开的网站做演示,这里我们只能假定异常了。

1-1.png

  那我想在此页面上将江苏省的2020年生产总值进行小数点后数据的拓展,看看它会如何显示出来。

1-2.png

  首先我们可以在F12下选到“元素”一栏。

1-3.png

  然后切换到选择元素的按钮。

1-4.png

  接下来点击江苏省2020年生产总值数据,可以看到右边的脚本数据也被选中,这个时候可以在该数据的基础上改动。

1-5.png

  这个时候有趣的一幕出现了,精确到小数点后几位,2020年一列的数据完全跑到2019年一列下面去了,如果客户对数据的精度只要求到小数点后面一两位那么还好,如果客户对数据精度要求高,那这个就是个明显的bug了。

  当然除了数据排版外,我们也可以对文字部分进行验证,同样用该页面做例子。1-6.png

  可以发现当地区的文字输入字体超过9个汉字后,后面的文字是不展示出来的,同理如果客户对该部分的字数只需要9字以内还行,如果会有较长的地区名字出现,比如这边如果是写某个市、旗或者县等,就可能出现名字很长的情况,这个时候就要考虑较长名字的输入是否支持了。

  还有些页面可能涉及到多图表,比如折线图、柱状图、饼图等,这种也可以用此法构造数据异常,尽量让图表里面涉及到的数据和信息出现超出边界的情况,然后再根据项目需求判定是否提交Bug。

  总之,类似这种的显示模拟,都可以直接对元素参数进行修改,来验证页面显示的效果是否正确,是否对显示边界进行调整。以我多年的经验来看,一般前端人员都会在这边出现疏漏,只要你用这种办法,基本上很多页面都能提出此类Bug。还有一点很重要,在提此类Bug前,需要确定后端数据类型是什么样的,确保前后端一致哦!


作者:有房车的直男    

来源:http://www.51testing.com/html/58/n-7800758.html

  • 【留下美好印记】
    赞赏支持
登录 后发表评论
+ 关注

热门文章

    最新讲堂

      • 推荐阅读
      • 换一换
          •   【案例】  在我们日常生活中,ATM机是个大家都非常熟悉的事物。银行为例提高工作效率,方便客户随时办理基础的储蓄和提现业务,于是,ATM机就诞生了。我们都知道,所谓用户取款业务,就是指为用户提供插卡、校验和取款操作的全过程。那么,围绕用户取款业务,我们应该如何为之设计测试步骤呢?  【解析】  在这一场景下,我们首先需要做的,就是构造基本流和备选流。详情如下:  (1)基本流  对于ATM机来说,它的基本流的初始状态是:荧幕出现欢迎页面,表示系统已经准备就绪,可以开始自主操作。接下来,它的业务处理流程基本如下:  ① 插卡:用户将银行卡插入ATM机的卡槽;  ② 卡校验:系统读取被插卡的账...
            0 0 6562
            分享
          • 摘要本文对自动化测试概念发展演变过程进行了简要概述,结合业界流行工具Selenium以实例进行描述,以期达到理论结合实际效果,同时也便于读者理解和应用。【关键词】Selenium WEB测试 自动化测试随着大数据时代到来客户需求变化导致软件开发模型多样化,巨大的数据量和重复性的输入输出工作给手工测试带来了极大的困扰,特别在产品版本升级的回归测试,耗费大量人力物力。在此背景下,自动化测试理念和实践应运而生。并形成了先进基础理论和框架和众多工具,极大提高了测试效率。自动脚本不仅可用于单元测试,还可用于集成测试,进而进行整体功能测试。1 自动化测试概念1.1 定义自动化测试是测试过程中仅需由测试者开...
            11 11 1371
            分享
          • 简单的写写 id,class,name,text定位吧,xpath上片文章详细解答了在学习html页面的同学都知道,html里的标签属性有id、class、name、text等等吧?接下来我们就简单的讲讲如何定位id、class等#首先先导入包 from selenium import webdriver #其次打开浏览器,访问百度 driver = webdriver.Chrome() driver.get("http://www.baidu.com")打开百度,我们按F12,点击百度一下,看看它有个ID属性,那在代码里,...
            0 0 648
            分享
          •   “测试”一词最初是指“用于测定贵金属的小容器”。这意味着测试是一种确定黄金或白银质量的方法。它也用于精炼有价值的合金,如锡。  后来,该术语在其他领域被采用,如今,在教育,医学或软件开发等环境中经常会发现它。然而,它的本质并没有改变:测试被用来提炼最终价值。  我们在软件开发中使用测试来确保代码按预期工作。测试可以是手动的,也可以是自动的。手动测试类似于汽车制造商撞车,以验证它们在道路上是否安全。它可以工作,但经常这样做太昂贵了,所以它通常在生产周期结束时完成。这种方法的问题在于,在此阶段发现的问题可能会将产品的发布延迟数月。  自动化软件测试具有完全不同的成本结构。有一个初始反转和定期维...
            0 0 1052
            分享
          • 什么是单元测试在计算机编程中,单元测试是一种软件测试方法,通过该方法可以测试源代码的各个单元以确定它们是否适合使用。 单元是最小的可测试软件组件, 它通常执行单个内聚功能。单元测试就是是指对这个最小可测试组件——即单元进行检查和验证。单元体量小,因此比大块代码更容易设计、执行、记录和分析测试结果。 通过单元测试发现的缺陷很容易定位,并且相对容易修复。单元测试的目标是将程序分离成各自独立的部分,并测试各个部分是否正常工作。它将可测试软件的最小部分与代码的其余部分隔离开来,并确定其行为是否与预期的完全一致。单元测试能在使用过程中发现很多缺陷,在这种过程中证明自身价值。它实现了测试过程的自动化,减少...
            11 11 1597
            分享
      • 51testing软件测试圈微信