如何进行bug的定位？

Web前端常用的分析定位思路：

当你遇到一个与预期输出不符的情况时：

1.是否是浏览器设置问题？

2.是否是浏览器cache的问题？

3.在其他浏览器上是否可复现？

4.用其他数据是否可以复现？

5.是否是cookie相关的问题？

6.是否正确发出了请求？

7.是否得到了正确的应答？

8.是否是网络原因？

9.是否是跨域问题？

10.是否是程序版本问题？

后台系统测试常用的定位分析思路：

当你遇到一个与预期输出不符的情况时：

1.自定向下排查（从系统入口模块开始）

a.是内部逻辑问题还是下游数据问题？

b.是否是某些配置下发生的问题？日志中是否发现线索？(系统配置或环境配置)

 例子：配置环境不一致导致！！
测试环境ok，生产环境新增时保存失败，查看后台日志报长度溢出，数据库内容字段要求和生产环境不一致！！

c.系统资源情况中是否发现线索？(是否发生内存泄漏等，CPU占用)

d.是否是边界值，并发等问题？

2.下游模块是否连接正常？

3.数据是否正确发送给下游模块？

4.下游模块是否正确返回了数据？

5.是否是不同模块共同作用的结果？

6.是否是不同模块间接口的定义不一致？

7.是否和服务器软件及设置有关？

8.是否能复现，其他同事电脑能不能复现

如何进行前端bug定位 

前端bug主要分为3个类别：HTML,CSS,Javascript三类问题

主要关注点：页面布局，用户功能，易用性，兼容性

给个最大的区别方式方法：

1. 出现样式的问题基本都是CSS的bug
2. 出现文本的问题基本都是html的bug
3. 出现交互类的问题基本都是Javascript的bug

现在以淘宝的前端人员工作为例进行相关bug定位的剖析

判断前后台问题的区分方法：

FF, 打开错误控制台

1. 区分前后台交互：查看网络请求

a) Html中如果有链接，有相应的情况下，基本可以定位到是属于前端的问题

b) 如果为空，或者有出现error错误信息，我们就可以定位到属于后台开发的问题

后台关注点：逻辑流，数据流，策略，接口

 TMS对应的VM模板，出现的一些截断控制，转换功能都属于前端的问题

一、HTML

最常见的HTML的问题—就是标签的问题了，最常见的排查和解决办法就是查看页面源代码，然后通过检查标签的工具，现在暂时提供idea.exe进行检查，有其他更好的工具再进行推荐。

常见问题类别：

1. 标签闭合—表象，页面中出现大范围的混乱，就是少了标签的情况，导致标签未闭合
2. 标签浮出—例如鼠标移动到文本位置，浮出全名的这种浮出形式都属于标签浮出的问题
3. 标签在不同的浏览器的一种解析方式的不同导致的前端bug例如如下结构

该部分可以看做为一个大的框即是标签<a> 内嵌标题的标签<p>，里面再有这些个内容<ing>,那么在不同的浏览器中，可能ie和FF的解析会产生不同，假设IE解析 为<a><p><ing></ing></a></p>的一种形式，但在FF 下可能解析为

<a><ing></ing></a>

<p></p>

的两行的形式从而导致前端在复古鞋/板鞋这块ing里面的格式产生混乱

结构可看为：

1. 页面定点的问题：最明显的前端功能，在于点击某个链接将页面位置定位到对应的位置

a) 我们可以通过右键，查看元素的工具进行定位到毛点所定位到的位置，如果出现问题这种问题很直观，并且能通过这种方法直接定位到问题

1. 页面的跳转，也属于html的问题，大家在出现点击未跳转或者跳转方式不正确的问题，直接可以定位到跳转属性的问题，找到对应的跳转对应的块提供给开发人员即可

二、CSS，产生样式问题。例如：排版，布局，颜色，背景等

css的bug主要分为：兼容型bug 、业务性bug 和 内容型bug

1. 兼容型bug

a) 表现：仅在少数几个浏览器上出现

b) 原因：浏览器的解析不一致

c) 解决：根据实际情况进行前端代码的通用性

d) 类别：

1. 脚本兼容型问题：在出现对应交互的问题就基本可以定位到脚本兼容型bug，例如DIV的显示和层结构。实际可以参考聚划算的几个商品鼠标移动到小图的时候，对应大图展示的功能。
2. 页面样式兼容型问题：直接表象在样式上，都是基于框架的页面展示错误，很容易定位
3. 业务性bug

a) 表现：在所有浏览器下都有该问题

b) 原因：对业务不熟悉

c) 解决：根据需求进行修改达到业务要求

该类型的定位，主要在和实现的要求不一致，最直接表现在页面的友好型，用户的可用性的bug，可以定位为该类型

1. 内容型bug

a) 表现： 前端自测正确，但在填入内容后，出现的错误，内容消失等

b) 原因： 扩展性未考虑周全

c) 解决： 进行overflow test

输入内容的长度限制等功能可定位为内容型bug

三、Javascript

最直接的判断方法，刷新页面，出现滞后显示的一些模块基本都为脚本的输出块。该部分的一些问题可以参照兼容型bug中类别的脚本兼容型bug。

1. 有产生交互类的问题，大多数都可以定位到是属于javascript产生的问题，该部分大多不会报错
2. 有错误提示类的。页面左下方有出现javascript的错误提示；有弹出错误信息提示的bug；浏览器返回的一些错误弹出框都属于javascript的bug

 

在web测试过程中，经常会遇到页面中内容或数据显示错误，甚至不显示，第一反应就是BUG，没错，确实是BUG。进一步了解这个BUG的问题出在那里，是测试人员需要掌握的，可以简单的使用浏览器自带开发者工具、数据库工具配合去排查。

1.开发者工具的使用

（1）打开开发者工具，在浏览器菜单栏选择工具-开发者工具，快捷键是F12

（2）打开之后切换到Network页签，操作就可以看到请求响应

（3）在选择响应的链接，切换到Preview页签，可以看到响应的结果数据

（4）结果中可以看到数据字段、值

2.可以根据响应的值判断一些bug所在

（1）响应中没有数据，则是后端数据没有返回，前端展示为空，则为后端问题。例如：列表中新增一个数据，没有显示，通过请求中可以看到数据total为0，则是后端数据没有返回。

 

（2）响应中有数据，但是前端显示错误了，可以根据字段值判断是否前端显示中取错了字段显示，可以判断是前端问题。例如：B端显示内容错误了，把登录用户名显示了登录帐号，则可以在响应中看数据是否返回正确，返回正确而显示错误，则有可能是前端绑定字段错误。

（3）响应中有数据，但是跟自己操作的结果不一致，可以根据数据库查询，如果数据库中也没有记录，可能是代码有问题，没有记录你的操作。例如：注册了一个帐号，但是登录时提示帐号或密码错误，这就可以在数据库表中查看是否有注册的数据。