Web测试中定位bug方法

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 在web测试过程中,经常会遇到页面中内容或数据显示错误,甚至不显示,第一反应就是BUG,进一步了解这个BUG的问题出在那里,是测试人员需要掌握的,可以简单的使用浏览器自带开发者工具、数据库工具配合去排查。


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

bug定位常用工具

Firefox——firebug、web developer、live http headers、http fox

IE插件——httpwatch

第三方工具——fiddler

慢速网模拟工具——firefox throttle

前台错误

    前台的bug通常是功能、界面和兼容性等有关,涉及到jstl,jsp,js,css,html方面比较多。bug主要有两块,第一就是JS写的有问题,这个你可以按F12 打开控制台,在console中查看报错信息,一般浏览器都会显示报错的jS ,对于出错的js可以在Sources下查看对应报错的资源文件,基本上都会找到错误原因的变量未定义,参数未定义等,JS错误都很好解决的。

 

第二个就是页面中的bug了,现在做web项目基本上没有做静态页面的都是动态了,所以你页面中要么使用了小脚本要么使用了EL表达式来存值。页面报错的话 在控制台是可以看到你错误行号和附近代码的,你自己去找就行了。

 

图片不显示,谷歌浏览器右键点击图片,点击【检查】,(火狐浏览器右键点击【使用firebug查看元素】)在打开的控制台上找出图片的属性,输入到浏览器的地址内,如果能打开图片,那么不显示图片的问题就是后台的问题;如果浏览器内不能打开图片,那么就是前端的问题。

 

开发者工具的使用(chrom浏览器)

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

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

(3)再选择响应的链接,切换到Preview页签,可以看到响应的结果数据;切换到Headers页签可以看到请求的地址,请求的方式,结果等信息

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

de424c985908b14704348c24493989a5.png-wh_


aea634eca2fab5203ec2584fc5d17a1f.png-wh_


88588cb57527e19f429bb9801c83cebf.jpg-wh_


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

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

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

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

后台错误

根据后台日志文件查找错误
    
后台涉及到servlet,jms,ejb,还有很多框架,struts,hibernate,spring,ibatis等。bug比较难改,但是好找。主要就是看控制台报错,然后定位错误行号。如果配置文件没有问题,那么一般的报错就是空指针,或者是数组下标越界。看附近变量,看方法的参数基本上都可以定位错误了

 

重启的一般情况:
(1)热部署 (新增部分功能,或者修改部分bug) (2)发布新版本 (整个系统)(3)内存溢出,此时重启服务器即可

由于项目中有线程程序,./shutdown脚本关闭tomcat程序,不能把启动的线程全部关闭,造成服务器启动线程未关闭的错误,所以
Linux系统中重启Tomcat的一般步骤:(一般是先关闭进程,然后进行重启 ,如果 /要删除某个文件:rm 文件名,或者不为空的文件夹:rm -rf 文件夹名)
cd usr/local/        //测试服务器名称/bin
ps -exf            //看测试服务器下运行的项目的主进程(最前面的数字为PID进程号)
kill -9 PID         //强制关闭某一项目的主进程
./startup.sh         // ./**.sh 即执行重启shell脚本文件 ,此时在测试服务器的bin下面,直接执行即可,其余的加上 chmod a+x shell脚本文件,也可用./执行
(小知识:
ps aux和ps -ef命令区别
ps aux 是用BSD的格式来显示 java这个进程
显示的项目有:USER,PID,%CPU,%MEM,VSZ,RSS,TTY,STAT,START,TIME,COMMAND
ps -ef 是用标准的格式显示java这个进程
显示的项目有:UID,PID,PPID,C,STIME,TTY,TIME,CMD)


如何查看日志
一台服务器可以部署多个应用
cd usr/local/测试服务器名称/logs   //查看先进入到服务器的logs目录下
tail -f catalina.out          //监视catalina.out 文件的尾部内容(默认10行)
日志中常见的问题
获取日志文件中常遇到的问题:
(1)编码问题:tomcat是新的,需要改编码修改tomcat的server.xml文件<Connector port="8080"URIEncoding="UTF-8"/>
特别是windows下的项目重新部署到linux系统下,
(2)空指针:程序问题,一般没有考虑到为空情况,或者主外键约束的数据为空,或者删除关联数据,导致为空
(3)长度过长,超过最大长度,测试环境修改数据库字段长度后生产环境未修改,导致报错!!
(4)非法数据
(5)内存溢出:重启

 

一般的问题原因总结
程序:为空判断,增删改查,不同公众号调用的接口也不一样
数据初始化:数据库表结构和数据初始化,权限配置,

 

故障无法重现时:
(1)看日志,根据日志定位原因,则在测试环境中按照日志提示构造条件相同的测试案例测试,尝试在测试环境中将问题重现。问开发
(2)测试环境和配置与实际的工程环境和配置有哪些差异等等。同时主动与开发负责人、工程实施人员以及有经验的项目经理讨论,分析可能导致的原因。

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

 

辅助工具:linux和SQL
linux
查看日志
SQL用来筛选数据或直接进行数据修改状态,多用于集成测试过程中前后流程相连接

 

jsp分不清前后台的,因为这里涉及到一个运行时刻的问题,它们的运行时刻是不同。用户发出请求后,服务器解析用户请求,转至对应的jsp,这个时候可以说是整个jsp都是后台程序。而Jsp做出响应后,把响应的内容返回给浏览器,这个时候浏览器就只看见html,css,javascript,这个时候所有的程序又都是前台程序。

火狐浏览器的web控制台

打开方式如下:菜单上点击【工具】

bc25a74bac41de4c9a4d9881c993d418.jpg-wh_

Web控制台页面显示

b9392591cd30dbf84cd0d4baed4d4a2a.jpg-wh_


谷歌浏览器开发者工具

按F12打开,页面显示如下:

eb2c5f257c033e69c47bd93ea4f59a16.jpg-wh_


Element标签:该标签使用来查看页面的HTML标签元素的,能够也就是查看源码,我们可以看到布局,可以看到用到的样式,还有用到的链接等等。

console标签:这个就是一个web控制台,可以查看网页运行后提示的消息,错误或者警告以及输出内容等

sources标签:这个是显示资源文件的,可以查看运行的脚本,调试一般都是在Sources调试的

30fcfc31e43937366e181b3ae5af5684.jpg-wh_

1.该选择框使用来选择资源的,当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。
2.这个地方使用来调试js代码的地方,这个非常重要,看到行号上面有蓝色的标签,这个标签就是断电,当我们需要调试程序的时候打一个断电,然后通过3这个工具栏进行调试,那么调试过程就不详细解释,也就是打一个断电然后刷新页面程序会调到你打断点的地方,然后通过4来查看程序中变量的值什么的。
3.中的标签,第一个是停止状态的按钮就是表示程序是否停止(在debug时),后面的是程序继续跳过方法,跳过下一个语句,调到上一个语句。

Network标签:这个就是抓包常用的工具,可以看到网页加载的脚本和资源的时间,还可以看到某些不能加载成功的资源

43423f8710661569e993ebc2f1e9aecc.jpg-wh_

那么这个页面就是用于抓包的页面,我们需要分析页面的请求,比如模拟登陆什么的都需要去分析程序是怎么在后台执行的,接下来就,我们可以看到Headers(请求消息头) Preview(预览) Response(响应)Timing(请求时间)Cookie这些东西

最上面还有一个工具栏,有一个红色的圆点静止符号的按钮,那么这两个按钮,当为红色按钮的时候表示当前的请求不被清空(但是这里的请求是不跳转页面的请求,当跳转到新的页面,那么也会请求也会被清空),后面这个按钮就是清空请求的。

下面还有一行工具栏,这个工具栏主要是用来选择和过滤请求消息的。

再下面可以看到时间线,这个就是记录一个请求开始到结束的时间。

注意:当你需要请求到另一个页面的时候都不清空你的请求的时候需要勾选上Preserve log,同时让红色按钮显示红色


相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
1月前
|
数据采集 监控 机器人
浅谈网页端IM技术及相关测试方法实践(包括WebSocket性能测试)
最开始转转的客服系统体系如IM、工单以及机器人等都是使用第三方的产品。但第三方产品对于转转的业务,以及客服的效率等都产生了诸多限制,所以我们决定自研替换第三方系统。下面主要分享一下网页端IM技术及相关测试方法,我们先从了解IM系统和WebSocket开始。
54 4
|
2月前
|
安全 测试技术 网络安全
如何在Python Web开发中进行安全测试?
如何在Python Web开发中进行安全测试?
|
2月前
|
安全 关系型数据库 测试技术
学习Python Web开发的安全测试需要具备哪些知识?
学习Python Web开发的安全测试需要具备哪些知识?
41 4
|
3月前
|
测试技术 API 项目管理
API测试方法
【10月更文挑战第18天】API测试方法
75 1
|
3月前
|
Web App开发 前端开发 JavaScript
探索Python科学计算的边界:利用Selenium进行Web应用性能测试与优化
【10月更文挑战第6天】随着互联网技术的发展,Web应用程序已经成为人们日常生活和工作中不可或缺的一部分。这些应用不仅需要提供丰富的功能,还必须具备良好的性能表现以保证用户体验。性能测试是确保Web应用能够快速响应用户请求并处理大量并发访问的关键步骤之一。本文将探讨如何使用Python结合Selenium来进行Web应用的性能测试,并通过实际代码示例展示如何识别瓶颈及优化应用。
190 5
|
3月前
|
测试技术 UED
软件测试中的“灰盒”方法:一种平衡透明度与效率的策略
在软件开发的复杂世界中,确保产品质量和用户体验至关重要。本文将探讨一种被称为“灰盒测试”的方法,它结合了白盒和黑盒测试的优点,旨在提高测试效率同时保持一定程度的透明度。我们将通过具体案例分析,展示灰盒测试如何在实际工作中发挥作用,并讨论其对现代软件开发流程的影响。
|
1月前
|
Web App开发 IDE JavaScript
Selenium IDE:Web自动化测试的得力助手
Selenium IDE:Web自动化测试的利器。作为开源工具,Selenium IDE支持录制与回放用户操作,适用于Chrome、Firefox等多浏览器,简化了测试流程,提升了效率,降低了自动化测试的门槛。它还支持导出多种编程语言的脚本,便于测试集成与复用。
112 31
Selenium IDE:Web自动化测试的得力助手
|
1月前
|
Web App开发 IDE 测试技术
Selenium:强大的 Web 自动化测试工具
Selenium 是一款强大的 Web 自动化测试工具,包括 Selenium IDE、WebDriver 和 Grid 三大组件,支持多种编程语言和跨平台操作。它能有效提高测试效率,解决跨浏览器兼容性问题,进行性能测试和数据驱动测试,尽管存在学习曲线较陡、不稳定等缺点,但其优势明显,是自动化测试领域的首选工具。
204 17
Selenium:强大的 Web 自动化测试工具
|
2月前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法。本文介绍 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,同时提供 Python 实现示例,强调其在确保项目性能和用户体验方面的关键作用。
50 6
|
2月前
|
JavaScript 安全 编译器
TypeScript 与 Jest 测试框架的结合使用,从 TypeScript 的测试需求出发,介绍了 Jest 的特点及其与 TypeScript 结合的优势,详细讲解了基本测试步骤、常见测试场景及异步操作测试方法
本文深入探讨了 TypeScript 与 Jest 测试框架的结合使用,从 TypeScript 的测试需求出发,介绍了 Jest 的特点及其与 TypeScript 结合的优势,详细讲解了基本测试步骤、常见测试场景及异步操作测试方法,并通过实际案例展示了其在项目中的应用效果,旨在提升代码质量和开发效率。
63 6

热门文章

最新文章