从实习到入职，转眼已经在网页端测试了将近 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、单元测试、压力测试、安全性测试等接触的比较少，就不做解释了。
除了一些代码、工程方面的方向的提升外，善于总结测试过程中的问题，改进测试流程，督促开发质量，能够更好的推动产品质量，也是一种提升方向。