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

1.开发者工具的使用

(1)打开开发者工具,在浏览器菜单栏选择工具-开发者工具,快捷键是F12

(2)打开之后切换到Network页签,操作就可以看到请求响应

(3)在选择响应的链接,切换到Preview页签,可以看到响应的结果数据

(4)结果中可以看到数据字段、值

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

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

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

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

1.抓包分析

web测试过程中,怎么判断前端Bug还是后端Bug?可以通过抓包工具来进行抓包分析。

大多数的浏览器都有自带的抓包插件,如FireFox的FireBug插件,Chrome、360急速模式、搜狗高速模式自带的DevelopTools插件,F12开启抓包后,在NetWork中可以看到当前页面发送的每一个http请求。通常情况下,我们可以通过请求接口、传参和响应三部分来判断Bug,另外,也可以在浏览器的控制台进行代码调试定位。

(1)请求接口URL是否正确

如果请求接口URL不正确,为前端Bug;

(2)http请求中的参数是否正确

如果http请求中的参数不正确,为前端Bug;

(3)如果接口URL和参数都正确,查看响应内容是否正确

如果这种情况下响应内容不正确,则为后端Bug。

(4)如果JS基础比较好的话,也可以在浏览器的控制台中输入JS代码进行调试

此外,除了浏览器中自带的抓包插件外,还可以使用其他的抓包软件,如Fiddler、Charles、HttpWatch、Wireshark等。

2.后端的Bug,如何准确的定位问题在哪里,如何精准的描述Bug?

(1)查看报错日志

查看报错日志,通过日志分析,需要有一定的经验,并且有一定的代码基础,才能更好地定位问题。

(2)查看数据库的数据

了解所测功能的数据表结构,测试过程中,查看数据库的数据,确认数据的正确性。

(3)查看缓存(如Memcache、apc、redis等缓存)是否正确

Web测试中定位bug的方法的更多相关文章

  1. 【转】Web测试中定位bug方法

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

  2. Web测试中定位bug方法

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

  3. 【测试方法】Web测试中bug定位基本方法

    知识总结:Web测试中bug定位基本方法 涉及知识点:测试方法 在web测试过程中,经常会遇到页面中内容或数据显示错误,甚至不显示,第一反应就是BUG,没错,确实是BUG.进一步了解这个BUG的问题出 ...

  4. Web测试中常见分享问题

         Web测试中,由于开发通常指注重完成H5页面的逻辑功能,对各种系统.浏览器等考虑不周,同时Android端各类机型碎片化,容易产生兼容性问题,这其中以分享类型为最. 本文简单分析总结一些测试 ...

  5. [Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法

    在flex的web应用中,我们往往必须有嵌入html的需求,这时候你会发现IFrame很有用! flex而且可以和html中的JavaScript进行交互,flex可以通过iframe调用到html中 ...

  6. web测试中的测试点和测试方法总结

    测试是一种思维,包括情感思维和智力思维,情感思维主要体现在一句俗语:思想决定行动上(要怀疑一切),智力思维主要体现在测试用例的设计上.具有了这样的思想,就会找出更多的bug.   一.输入框 1.字符 ...

  7. [转]WinForm和WebForm下读取app.config web.config 中邮件配置的方法

    本文转自:http://blog.csdn.net/jinbinhan/article/details/1598386 1. 在WinForm下读取 App.config中的邮件配置语句如下: Con ...

  8. 免费生成二维码接口,可直接嵌入到web项目中,附带嵌入方法,任意颜色二维码,任意大小二维码!

    在线体验连接:http://www.zhaimaojun.top/qrcode/ 你是否在项目中寻找方便而且免费的可以直接嵌入到项目中的二维码生成工具呢?你找到了这里,说明你已经找到了!不要犹豫直接拿 ...

  9. Spring在web应用中获得Bean的方法

    一:使用ApplicationContext获得Bean 首先新建一个类,该类必须实现ApplicationContextAware接口,改接口有一个方法,public void setApplica ...

随机推荐

  1. codeforces 1136E 线段树

    codeforces 1136E: 题意:给你一个长度为n的序列a和长度为n-1的序列k,序列a在任何时候都满足如下性质,a[i+1]>=ai+ki,如果更新后a[i+1]<ai+ki了, ...

  2. oracle中update语句修改多个字段

    如需要修改下列数据:表名为student 一般会这样写: update student set sname = '李四', sage = 20, sbirthday = to_date('2010-0 ...

  3. goasp-onvif实现nvr server问题点滴

    参考了:https://blog.csdn.net/saloon_yuan/article/details/24901597,本文以原贴为基础做了一些修改,非常感谢原作者.   1:开发框架搭建    ...

  4. monaco-editor使用

    monaco-editor是一款非常好用的web代码编辑器,那么如何把他加到自己的项目中呢. 1.下载插件 npm install monaco-editor@0.8.3 2.初始化编辑器值 < ...

  5. 学习Java第五周

    通过这一段时间的学习发现Java和C++虽然都是面向对象的编程语言,有相似之处也有不同之处,相似的地方总会感觉易于接受,不同之处或者新接触的有些知识不是很好理解和掌握. 前一段时间学的内部类和接口便是 ...

  6. JLINK、ULINK和STlink仿真器详解

    JLink仿真器 德国SEGGER公司推出基于JTAG的仿真器.简单地说,是给一个JTAG协议转换盒,即一个小型USB到JTAG的转换盒,其连接到计算机用的是USB接口,而到目标板内部用的还是jtag ...

  7. JSPs

    简介 Tomcat 8.0 使用 Jasper 2 JSP 引擎去实现 JavaServer Pages 2.3 规范. Jasper 2 经过了重新设计,极大改善了上一版 Jasper 的性能.除了 ...

  8. Swagger Editor 本地搭建

    看了很多文章,怎么本地安装都比较乱,一番折腾,最后终于成功本地搭建Swagger Editor,记录如下(Windows 7): 进入命令行: (1)cd E:\Learning\AWS (2)git ...

  9. Visio数据视觉化处理

    形状数据的查看的两种方式 定义形状数据:右键单击数据窗口 打勾的代表可以显示 其他没有打勾的就必须要在开发模式才会显示出来 开发模式就是打开开发工具面板 注意其中类型的设置 类型与格式是一一对应的 不 ...

  10. while Ture怎么退出全部

    while True: #这是一个死循环 如果想要quit出去只能一层一层的退出 比如如果在第三层输入quit会回到第二层 那么有什么方法能够在第三层就退出全部? print("level1 ...