产品、测试总是抱怨你的开发质量太差，怎么办？
前端开发的质量直接影响用户体验。无论是一个简单的静态页面，还是复杂的动态应用，都需要经过严格的测试流程才能保证上线后的稳定和流畅。
这里整理了一份前端自测标准，涵盖了目前团队90%以上的测试场景，方便大家取阅。
不积跬步,无以至千里。
一、UI 设计、文案检查
文字样式
- 确保所有页面和组件的文字大小、字体、颜色、行高、字间距与设计稿一致。
- 检查所有标题、副标题、正文、按钮文字等的样式是否一致。
颜色
- 所有颜色必须符合设计规范，包括背景颜色、文字颜色、按钮颜色等。
- 检查不同状态下（如hover、active、disabled）的颜色是否正确。
布局
- 确保页面布局与设计稿一致，包括间距、对齐、宽高比例等。
- 检查所有页面和组件的响应式布局是否正确，在不同屏幕尺寸下是否显示正常。
图标和图片
- 确保所有图标和图片使用的是最新的资源，且大小、位置与设计稿一致。
- 检查图片的加载速度和质量，避免模糊或失真。
组件一致性
- 所有相同类型的组件（如按钮、输入框、卡片等）样式和行为一致。
- 检查组件的交互效果，如按钮点击、输入框聚焦等是否符合设计规范。
分辨率显示
- 改变浏览器大小或分辨率显示是否正常，最低分辨率支持到1366*768，特定要求除外。
- 改变浏览器大小或分辨率，横向滚动是否有空白；
国际化
- 必须切换其他语言查看是否有漏翻译场景；
- 切换语言后是否样式错乱
二、功能和交互测试
基本功能检查
- 确保所有开发的功能模块均正常运行，包括数据输入、按钮点击、表单提交等。
- 检查页面跳转、数据加载、交互动画等是否正常。
冒烟测试
- 对核心功能进行冒烟测试，确保没有严重的功能性错误。
- 核心功能包括：登录/注册、数据提交/获取、主要业务流程等。
边界条件测试
- 检查表单输入的边界条件，如最大/最小输入长度、特殊字符处理等。
- 测试各种极端情况，如空数据、数据溢出等，确保页面表现正常。
三、文案一致性检查
文案内容
- 确保所有页面和组件的文案与需求文档一致，且没有拼写错误或语法错误。
- 检查多语言支持，确保不同语言的文案均正确显示。
占位符文本
- 确保所有占位符文本（如输入框提示、加载提示等）均为最终版文案，不存在临时文本。
四、性能与兼容性检查
页面性能
- 检查页面加载速度，确保没有阻塞资源影响加载性能。
- 优化资源加载，是否有重复资源，减少不必要的请求，使用缓存等手段提高性能。
浏览器兼容性
- 在主流浏览器进行测试（部分页面需要IE浏览器测试），确保页面显示和功能正常。
- 检查移动端和桌面端的兼容性，确保响应式布局和交互效果正常。
五、代码质量检查
代码规范
- 确保代码符合团队的编码规范，包括命名规则、注释规范、格式化规则等。
- 使用Lint工具进行代码静态检查，修复所有发现的问题。
版本控制
- 确保所有代码变更均已提交到版本控制系统，且分支管理清晰。
- 检查提交记录，确保每次提交都有清晰的描述，便于追溯。
六、其他注意事项
依赖检查
- 确保所有第三方依赖均为最新版本，且没有已知的安全漏洞。
- 检查依赖库的许可证，确保没有违反开源协议。
错误日志
- 检查浏览器控制台是否有错误或警告日志，修复所有发现的问题。
- 确保错误处理机制健全，能够捕获并处理常见的错误情况。
迁移的项目
- 迁移完成后，必须冒烟测试一遍。
- 迁移有逻辑改动，同步测试、产品。
)
