对外产品的网页端测试总结

从实习到入职，转眼已经在网页端测试了将近2年的时间。

偶尔跟一些客户端的同学沟通和学习的时候，他们很好奇网页端测试是怎么进行测试的，需要注意哪些问题，这里稍微总结下，希望对自己和其他小伙伴都有一定程度的提升。

网页端的测试：

目前网页端的测试，主要是指针对 Web、H5端的测试。

功能测试：

比对交互稿、需求稿，设计测试用例，进行用例评审、BugBash等，完成功能测试。功能测试是保证项目正常运行的第一要求。

兼容性测试：

兼容性测试可以从浏览器兼容性、屏幕兼容性、系统兼容性 三个方面去考虑。

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兼容性问题较多。

2、js报错

从Chrome开发者工具的Console可以直接看到的报错

3、元素布局适配不同屏幕大小，造成的影响。

常见bug：某个机型上的按钮点击后无效果，原因很可能是页面的其他元素占屏的宽高 跟随屏幕大小变动，覆盖了想要点击的元素。

4、并发

常见bug：提交表单或发送请求的时候，快速点击按钮，造成并发现象。

这里第一个要查看请求是否有发送两次，前端是否有做快速点击的防护。第二个查看后端面对并发处理，是否正确。

网页端 测试同学目前的技术提升方向：

1、前端WEB UI自动化

selenium +webdriver+TestNG或selenium +webdriver+Unittest等，属于常见的组合，用于UI自动化工程的搭建。

2、性能测试

远程连接+抓包分析，工具诸如：fiddler，Charles，网页端性能测试在线测试工具：Page Speed、Chrome开发者工具等。相比于客户端测试，网页端主要关注的是响应时间和页面元素的渲染时间。

3、接口测试

测试工具postman等或者利用（Java的 httpClent，Python的 requests）编写测试脚本。

4、单元测试、压力测试、安全性测试等接触的比较少，就不做解释了。

除了一些代码、工程方面的方向的提升外，善于总结测试过程中的问题，改进测试流程，督促开发质量，能够更好的推动产品质量，也是一种提升方向。