关于网页端测试的一点点体会

阿凡达2018-07-06 11:40
从实习到入职,转眼已经在网页端测试了将近2年的时间。
偶尔跟一些客户端的同学沟通和学习的时候,他们很好奇网页端测试是怎么进行测试的,需要注意哪些问题,这里稍微总结下,希望对自己和其他小伙伴都有一定程度的提升。
网页端的测试:
目前网页端的测试,主要是指针对 Web、H5端的测试。
功能测试:
比对交互稿、需求稿,设计测试用例,进行需求和交互评审、排期、测试计划制定、测试任务分配、测试用例编写、测试用例评审、测试执行、线上问题跟踪等,完成功能测试。功能测试是保证项目正常运行的第一要求。
兼容性测试:
兼容性测试可以从浏览器兼容性、屏幕兼容性、系统兼容性 三个方面去考虑。
1、浏览器兼容性(包含设备):
在正常使用中,用户会使用千差万别的浏览器,包括不同机型的不同浏览器型号的浏览器,可谓是各种排列组合。不同的浏览器内核会造成不同的兼容性问题,有的兼容性问题会影响主功能的进行,所以网页端的兼容性测试是非常重要的一环。
Web浏览器兼容:Chrome、Safari、360浏览器、QQ浏览器、IE8、IE9、IE10、IE11、Edge等
H5浏览器兼容:qq浏览器(android、iOS)、uc浏览器、safari(iOS8、IOS10)、百度浏览器、手机百度、搜狗搜索、小米浏览器、魅族浏览器等
2、屏幕兼容性:
Web 端:大屏幕(20寸)—— 小屏幕(13寸)
H5 端:iphone5——iPhoneX,iPad mini——iPad4、3寸android——5寸android机
3、系统兼容:
iOS8-iOS11 ,android 4.2-android 8.0。有的时候新出的系统和老系统会有兼容性的问题。
如何判断 一个Bug是来自前端开发还是后端开发的?
1、页面数据不对。用fiddler、Charles等辅助工具查看接口返回值,如果返回值错误,造成的前端显示的数据不正确,则是后端的问题,反之,就是前端的显示问题。
2、页面显示相关的兼容性问题,由css造成的属性不支持的问题,都属于前端问题。
3、前后端结合,例如:分享增加1次抽奖机会。针对前后端结合的问题,要具体问题具体分析,
常见网页端测试工具:
1、Chrome开发者工具
常用于模拟手机端页面、查看接口返回值、修改元素显示的数据、模拟网速、清除或篡改Cookies等。
2、Fiddler或Charles
数据抓包工具,常用于拦截、篡改请求,查看接口返回。
常见问题类型分析:
1、功能性缺陷
由于逻辑失误、文案错误等导致的跟功能性直接相关的缺陷。
2、 CSS属性 不支持。
常见bug:页面的部分元素无视觉效果,或样式错乱的明显可见。举个例子,flex布局在android4.3的机型上就不支持,这时需要开发监控在android4.3系统的时候,换另外一种实现方式。
***相比较而言,H5端的兼容性问题相对少一些,主要是Web端的IE浏览器兼容性问题较多。
3、js报错
从Chrome开发者工具的Console可以直接看到的报错

4、元素布局适配不同屏幕大小,造成的影响。
常见bug:某个机型上的按钮点击后无效果,原因很可能是页面的其他元素占屏的宽高 跟随屏幕大小变动,覆盖了想要点击的元素。
5、并发
常见bug:提交表单或发送请求的时候,快速点击按钮,造成并发现象。
这里第一个要查看请求是否有发送两次,前端是否有做快速点击的防护。第二个查看后端面对并发处理,是否正确。
网页端 测试同学目前的技术提升方向:
1、前端WEB UI自动化
selenium +webdriver+TestNG或selenium +webdriver+Unittest等,属于常见的组合,用于UI自动化工程的搭建。
2、性能测试
远程连接+抓包分析,工具诸如:fiddler,Charles,网页端性能测试在线测试工具:Page Speed、Chrome开发者工具等。相比于客户端测试,网页端主要关注的是响应时间和页面元素的渲染时间。
3、接口测试
测试工具postman等或者利用(Java的 httpClent,Python的 requests)编写测试脚本。
4、单元测试、压力测试、安全性测试等接触的比较少,就不做解释了。
除了一些代码、工程方面的方向的提升外,善于总结测试过程中的问题,改进测试流程,提升开发提测质量,能够更好的推动产品质量,也是一种提升方向。

本文来自网易实践者社区,经作者王紫琦授权发布。