1、前言
相信很多小伙伴在测试功能时都会在UI的显示这块下功夫,但是有些时候正常的文字和数据都是很难捕捉到异常情况,这些异常一般只有等到特定条件满足时才会显示出来。比如我之前有做过一个项目,它的首页面是一个展示甲方公司资产的页面,上面有各种的数据,大部分都是整数类的,且支持小数形式。有一次我就突发奇想,如果给它们罗列到小数点后面5位会咋样。于是我特意构造了小数点后面7位的资产数据,结果不做不知道,一做吓一跳,整个页面的布局彻底紊乱了,当时前端开发还是基于谷歌浏览器,谷歌显示尚且如此,其它浏览器如IE就更不可想象了。我当即就将该Bug标为紧急让开发去改!其实我们在做UI测试时一定要对异常多进行验证。这里我教大家一个快捷且偷懒的方法构造简单的异常。
2、构造异常验证
如图是国家数据里的各省的年生产总值,本来是想用公司的项目给大家做演示,但是为了公司项目保密,只好用公开的网站做演示,这里我们只能假定异常了。
那我想在此页面上将江苏省的2020年生产总值进行小数点后数据的拓展,看看它会如何显示出来。
首先我们可以在F12下选到“元素”一栏。
然后切换到选择元素的按钮。
接下来点击江苏省2020年生产总值数据,可以看到右边的脚本数据也被选中,这个时候可以在该数据的基础上改动。
这个时候有趣的一幕出现了,精确到小数点后几位,2020年一列的数据完全跑到2019年一列下面去了,如果客户对数据的精度只要求到小数点后面一两位那么还好,如果客户对数据精度要求高,那这个就是个明显的bug了。
当然除了数据排版外,我们也可以对文字部分进行验证,同样用该页面做例子。
可以发现当地区的文字输入字体超过9个汉字后,后面的文字是不展示出来的,同理如果客户对该部分的字数只需要9字以内还行,如果会有较长的地区名字出现,比如这边如果是写某个市、旗或者县等,就可能出现名字很长的情况,这个时候就要考虑较长名字的输入是否支持了。
还有些页面可能涉及到多图表,比如折线图、柱状图、饼图等,这种也可以用此法构造数据异常,尽量让图表里面涉及到的数据和信息出现超出边界的情况,然后再根据项目需求判定是否提交Bug。
总之,类似这种的显示模拟,都可以直接对元素参数进行修改,来验证页面显示的效果是否正确,是否对显示边界进行调整。以我多年的经验来看,一般前端人员都会在这边出现疏漏,只要你用这种办法,基本上很多页面都能提出此类Bug。还有一点很重要,在提此类Bug前,需要确定后端数据类型是什么样的,确保前后端一致哦!
作者:有房车的直男