如何提高前端的自测能力
一个小菜鸟的感悟与总结
名词解释
// 最常见的三种测试类型。单元测试主要由开发人员来做，功能测试与集成测试由测试人员来做。单元测试：指对软件中的最小可测试单元进行检查和验证；
功能测试：对产品的各功能进行验证，根据功能测试用例，逐项测试，检查产品是否达到用户要求的功能；
集成测试：也叫组装测试或联合测试。在单元测试的基础上，将所有模块按照设计要求（如根据结构图〕组装成为子系统或系统，进行集成测试；
黑盒测试：也称功能测试，把程序看作一个不能打开的黑盒子，在完全不考虑程序内部结构和内部特性的情况下，在程序接口进行测试，它只检查程序功能是否按照需求规格说明书的规定正常使用，程序是否能适当地接收输入数据而产生正确的输出信息。
白盒测试：也称结构测试或逻辑驱动测试，它是知道产品内部工作过程，可通过测试来检测产品内部动作是否按照规格说明书的规定正常进行，按照程序内部的结构测试程序，检验程序中的每条通路是否都有能按预定要求正确工作。
灰盒测试：介于黑盒白盒二者之间，灰盒测试关注输出对于输入的正确性，同时也关注内部表现，但这种关注不象白盒那样详细、完整，只是通过一些表征性的现象、事件、标志来判断内部的运行状态。有时候输出是正确的，但内部其实已经错误了，这种情况非常多。
前端自测三个方面
1、界面交互是否符合要求、逻辑
2、接口请求是否正确
3、数据展示是否准确
推荐工具
- 公用记录型：JIRA（推荐）、wiki（没有测试人员时可以简单记在wiki上）
- 自用记录型：mac自带备忘录、有道云笔记、Excel、XMind
- 接口测试工具：swagger、postman
- 代码内部测试工具：eslint、karma 等等
平时积累的技巧
问（很重要）
// 公司测试小哥说这点是最重要。- 问清楚项目需求，对需求理解透彻；
- 向经验丰富的开发、测试人员讨教经验；
- 询问用户的使用体验及意见；
列
- 需求点要清楚得罗列出来，产品或者后端没有罗列就自己罗列。
- 每做完一个需求就做个标记，每提一个bug也要列进去。
- 优点是整个开发过程会很清晰，日后排期、更改需求也有参照，有据可循。
- 缺点就是费时。
例如下图，需求多时，花点时间理清思路，用markdown等工具列出来：
又例如下图（优化与修复），有较多bug或优化点时，用wiki做一个表格，方便产品验收：
写
- 代码里多写备注，readme文件不能偷懒，不留坑也方便转手；
- commit 多打字，提交历史会很清晰；
- 发布系统里不随便填写信息，需求列表会很清楚；
查
- 每次提交代码前利用工具检查修改过的内容。（全局搜下有没有未去掉的debugger，搜“<<<<<”看有没有冲突代码）;
- 发布前有时间就顺手检查下提交历史;
学
- 多学习其他优秀系统的交互与设计，对比思考自己做的那些系统的不足；
- 平时多学习交互规范、用户体验设计类的书籍，让自己更加专业；
论坛网站：51testing软件测试论坛
学习文档：软件工程中的测试技术(第一部分).pdf、软件工程中的测试技术(第二部分).pdf
测试相关的学习资料不是很多，主要还是靠平时实践的积累，理论的话看上面的《软件工程中的测试技术》就差不多了。
几个常用组件的checklist
表单
- 各种数据类型的输入情况: 全汉字输入、全英文输入、全字符输入、全数字输入、混搭输入、大小写处理、半/全角输入;
- 数字需要关注边界值: 最大/小值、正/负数、小数点保留位;
- 不同的输入文本长度: 为空、文本溢出、文本未溢出;
- 输入框校验规则: 为空校验、数据类型校验、正则检测、多个数据之间大小校验;
- 保障数据准确性: 输入输出结果是否一致、数据是否进行处理;
- 保证隐藏部分的正常显示: 选择下拉框的文本显示溢出情况、日期时间选择框是否超出屏幕、选择下拉框数据量过大的情况;
- 按钮操作性检查: 字段完整性检查、快键建检查、回车键检查、重复提交检查;
- 安全性: 恶意代码注入;
- 屏幕大小不同情况下的自适应: 浏览器置于桌面、浏览器全屏、浏览器投放至大显;
文本
- 各种数据类型的显示情况: 全汉字、全英文、全字符、全数字、混搭、大小写识别;
- 不同文本长度: 为空、短文本、超长文本、数字位数保留;
- 保障数据准确性: 显示结果是否正确、是否进行格式/映射处理、映射为空时的情况;
- 脱敏情况:身份证号、手机等数据是否脱敏完全;
- 屏幕大小不同情况下的自适应:浏览器置于桌面、浏览器全屏、浏览器投放至大显;
表格
- 表格展示情况: 列表为空、列数过多、数据量过大、loading状态、是否错位;
- 单元格内不同文本长度: 为空、文本溢出、文本未溢出;
- 单元格内各种数据类型的显示情况: 全汉字、全英文、全字符、全数字、混搭;
- 保障数据准确性:
- 单元格显示结果是否正确、是否进行格式/映射处理、映射为空时的情况;
- 整个表格数据分页是否准确、选中时结果是否一致、筛选排序结果是否正确;
- 屏幕大小不同情况下的自适应: 浏览器置于桌面、浏览器全屏、浏览器投放至大显;
附件上传
- 附件显示情况: 不同尺寸文件预览的显示、不同文件格式预览的显示、文件预览失败/不存在时的显示、文件预览加载过慢的情况;
- 附件准确性: 是否错位展示;
- 安全性: 上传时脚本后缀改为图片等格式（文件内容校验）;
- 屏幕大小不同情况下的自适应: 浏览器置于桌面、浏览器全屏、浏览器投放至大显;