如何发现前端UI的显示问题？

lsekfe

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

2、构造异常验证

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

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

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

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

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

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

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

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

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

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

岳妙慧