Web端测试以及发展方向

入行测试一段时间了，说下Web端测试注意的地方和个人发展方向。今天分享一些心得，一部分是我面试碰到一个面试官分享我的资料，希望对大家有用。

网页端的测试：
目前网页端的测试，主要是指针对 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 9.0。有的时候新出的系统和老系统会有兼容性的问题。

如何判断 一个Bug是来自前端开发还是后端开发的？
1、页面数据不对。用fiddler、Charles等辅助工具查看接口返回值，如果返回值错误，造成的前端显示的数据不正确，则是后端的问题，反之，就是前端的显示问题。
2、页面显示兼容性问题，由css造成的兼容性问题，属于前端问题。
3、前后端结合，根据自己的经验去判断。针对前后端结合的问题，要具体问题具体分析。

4、在看接口报错时学会看HTTP响应值，404、500、200、400、502等，看响应是否有数据。如果有数据前端没有渲染，即前端问题，反之。

常见网页端测试工具：
1、Chrome开发者工具
常用于模拟手机端页面、查看接口返回值、修改元素显示的数据、模拟网速、清除或篡改Cookies等。
2、Fiddler或Charles
数据抓包工具，常用于拦截、篡改请求，查看接口返回。一些登录请求页面抓不到接口，需要用抓包工具。

常见问题类型分析：
1、功能性缺陷
由于逻辑失误、文案错误等导致的跟功能性直接相关的缺陷。
2、 CSS属性 不支持。
常见bug：页面的部分元素无视觉效果，或样式错乱的明显可见。
相比较而言H5端的兼容性问题相对少一些，主要是Web端的IE兼容性问题较多。
3、js报错
从Chrome开发者工具的Console可以直接看到的报错
4、元素布局适配不同屏幕大小，造成的影响。
常见bug：某个机型上的按钮点击后无效果，原因很可能是页面的其他元素占屏的宽高 跟随屏幕大小变动，覆盖了想要点击的元素。
5、并发
常见bug：提交表单或发送请求的时候，快速点击按钮，造成并发现象。
这里第一个要查看请求是否有发送两次，前端是否有做快速点击的防护。第二个查看后端面对并发处理，是否正确。

 

控件类测试：（面试大杀器，以下拉框为例，后续更新...）

下拉框一般多个一起出现，实现筛选功能。需要注意筛选后是否立即生效，以及组合筛选的情况结果是否符合预期。常见测试点如下：

1、 默认显示是否正确，比如有的显示全部，有的默认选中某一项，有的显示“请选择”。

2、 切换item，下拉框显示项内容和排序是否正确，不同浏览器，下拉框显示是否有变形等。

3、 下拉框中选项超出设定值的，是否有滑动条，上下滑动，还是左右滑动等。

4、 下拉框弹出时，鼠标点击控件外区域/选项/下拉框，下拉框能否收回。

5、 当下拉框选项很多时，是否有被底层覆盖的情况。

6、 下拉框数据被存储后，其他地方显示时，传递的数据正确性检查。比如下拉框选项按数字传递，而其他页面显示时应该显示对应的文字。

7、 组合筛选的情况，有级联操作的，只有选择了前一个数据后，才能进行下一个的选择。比如省市之间，只有选择了省份，才能继续选择市，否则市不可选。

8、 组合下拉框实现的筛选功能正确性检查。

 

网页端 测试同学目前的技术提升方向：
1、前端WEB UI自动化
selenium +webdriver+Java/selenium + webdriver +python，属于不用的语言，java学习成本比较大点，不过java的maven项目配置pom.xml很方便，不需要下载各种包，直接引入就行;Python语法简单，不过我还没学会，哈哈。
2、性能测试
远程连接+抓包分析，工具诸如：fiddler，Charles，网页端性能测试在线测试工具：Page Speed、Chrome开发者工具等。相比于客户端测试，网页端主要关注的是响应时间和页面元素的渲染时间。
3、接口测试
测试工具postman、jmeter等或者利用（Java的 httpClent，Python的 requests）编写自动化测试脚本。
4、单元测试、压力测试、安全性测试等接触的比较少，就不做解释了。

 

寄语：
1.测试还是要学代码的，不能浑浑噩噩的过日子。

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

3.感觉软件行业沟通交流还是最重要，开发也好，测试也罢，产品也行，沟通占首位吧。