可能是目前最全面的前端提测/自测标准

产品、测试总是抱怨你的开发质量太差，怎么办？

前端开发的质量直接影响用户体验。无论是一个简单的静态页面，还是复杂的动态应用，都需要经过严格的测试流程才能保证上线后的稳定和流畅。

这里整理了一份前端自测标准，涵盖了目前团队90%以上的测试场景，方便大家取阅。

不积跬步,无以至千里。

一、UI 设计、文案检查

文字样式

• 确保所有页面和组件的文字大小、字体、颜色、行高、字间距与设计稿一致。
• 检查所有标题、副标题、正文、按钮文字等的样式是否一致。

颜色

• 所有颜色必须符合设计规范，包括背景颜色、文字颜色、按钮颜色等。
• 检查不同状态下（如hover、active、disabled）的颜色是否正确。

布局

• 确保页面布局与设计稿一致，包括间距、对齐、宽高比例等。
• 检查所有页面和组件的响应式布局是否正确，在不同屏幕尺寸下是否显示正常。

图标和图片

• 确保所有图标和图片使用的是最新的资源，且大小、位置与设计稿一致。
• 检查图片的加载速度和质量，避免模糊或失真。

组件一致性

• 所有相同类型的组件（如按钮、输入框、卡片等）样式和行为一致。
• 检查组件的交互效果，如按钮点击、输入框聚焦等是否符合设计规范。

分辨率显示

• 改变浏览器大小或分辨率显示是否正常，最低分辨率支持到1366*768，特定要求除外。
• 改变浏览器大小或分辨率，横向滚动是否有空白；

国际化

• 必须切换其他语言查看是否有漏翻译场景；
• 切换语言后是否样式错乱

二、功能和交互测试

基本功能检查

• 确保所有开发的功能模块均正常运行，包括数据输入、按钮点击、表单提交等。
• 检查页面跳转、数据加载、交互动画等是否正常。

冒烟测试

• 对核心功能进行冒烟测试，确保没有严重的功能性错误。
• 核心功能包括：登录/注册、数据提交/获取、主要业务流程等。

边界条件测试

• 检查表单输入的边界条件，如最大/最小输入长度、特殊字符处理等。
• 测试各种极端情况，如空数据、数据溢出等，确保页面表现正常。

三、文案一致性检查

文案内容

• 确保所有页面和组件的文案与需求文档一致，且没有拼写错误或语法错误。
• 检查多语言支持，确保不同语言的文案均正确显示。

占位符文本

• 确保所有占位符文本（如输入框提示、加载提示等）均为最终版文案，不存在临时文本。

四、性能与兼容性检查

页面性能

• 检查页面加载速度，确保没有阻塞资源影响加载性能。
• 优化资源加载，是否有重复资源，减少不必要的请求，使用缓存等手段提高性能。

浏览器兼容性

• 在主流浏览器进行测试（部分页面需要IE浏览器测试），确保页面显示和功能正常。
• 检查移动端和桌面端的兼容性，确保响应式布局和交互效果正常。

五、代码质量检查

代码规范

• 确保代码符合团队的编码规范，包括命名规则、注释规范、格式化规则等。
• 使用Lint工具进行代码静态检查，修复所有发现的问题。

版本控制

• 确保所有代码变更均已提交到版本控制系统，且分支管理清晰。
• 检查提交记录，确保每次提交都有清晰的描述，便于追溯。

六、其他注意事项

依赖检查

• 确保所有第三方依赖均为最新版本，且没有已知的安全漏洞。
• 检查依赖库的许可证，确保没有违反开源协议。

错误日志

• 检查浏览器控制台是否有错误或警告日志，修复所有发现的问题。
• 确保错误处理机制健全，能够捕获并处理常见的错误情况。

迁移的项目

• 迁移完成后，必须冒烟测试一遍。
• 迁移有逻辑改动，同步测试、产品。