如何定位前端UI显示错误

如何定位前端UI显示错误

目录

1、前言

2、模拟验证

1、前言

在做Web端功能测试时，尤其是前端UI页面检查的时候，有些字面显示或统计数字显示等，是无法在正常情况下显示出来的，只能等到满足一定的条件下，才会显示出来，这个时候光检查当前显示的样式感觉有些被动，测试不全面，其实可以借助工具来进行模拟数据进行验证。

2、模拟验证

如图所示是一个业务排行榜。已知统计了4个渠道，4个渠道的百分比重加起来是100%。

根据此页面，要验证一下，当只有一个渠道百分比为100%时，页面样式显示的情况。

那么要用什么工具进行模拟验证呢？

其实就是测试用的浏览器，打开开发者工具，进行元素定位修改即可。

这里作者使用Chrome浏览器进行模拟。

首先打开开发者工具，并切换到Elements下。

点击定位元素的箭头。

定位到渠道A的百分比56%数字上。

之后将数字修改为100%即可。

此时的页面，渠道A的百分比100%换行显示了。可以看出显示边界有问题，就可以给前端提BUG了。

类似这种的显示模拟，都可以直接对元素参数进行修改，来验证页面显示的效果是否正确。