如何进行前端提测前的自检？附自检清单供参考

前言

本文从自己日常开发的经验中总结了一些提测前的自检case，帮助大家减少低质bug数量，提升测试效率。

样式类自检

1. 处理溢出元素

   前端开发页面都要依据UI图进行样式的还原以及宽屏适配，一定要注意元素溢出之后的效果。如果出现文字截断、图片变形等问题，需要及时调整元素的宽高和位置。

2. 对齐方式检查

   元素的对齐方式需要严格按照UI图进行还原，包括文字的对齐、图片的对齐、按钮的对齐等。如果出现元素对齐不一致的情况，需要及时调整元素的样式。

3. 兼容性自检

   前端页面需要在不同的浏览器、不同的设备、不同的系统上进行兼容性自检。确保页面在所有环境下都能正常显示，不会出现样式错乱、元素缺失等问题。

功能类自检

1. 格式校验

   对用户输入的格式进行校验，确保符合要求。例如，电话号码格式校验、邮箱格式校验、身份证号码格式校验等。

2. 参数检查

   对接口的参数进行检查，确保参数的类型和格式都符合要求。如果参数不符合要求，需要及时报错，并给出错误提示。

3. 边角用例

   除了常规用例之外，还需要考虑一些边角用例，例如，输入为空的情况、输入过长的情况、输入特殊字符的情况等。这些边角用例往往是容易被忽略的，但却是最容易出现问题的。

性能类自检

1. 是否卡顿

   页面在加载的时候是否会出现卡顿的情况。如果出现卡顿，需要检查页面中的资源是否过多，是否使用了过多的动画效果，是否使用了不合理的布局。

2. 请求过多

   页面在加载的时候是否会产生过多的请求。如果请求过多，会影响页面的加载速度，甚至会导致页面崩溃。需要检查页面中是否使用了不必要的资源，是否使用了不合理的请求方式。

3. 带宽占用

   页面在加载的时候是否会占用过多的带宽。如果带宽占用过多，会影响其他页面的加载速度，甚至会导致网络瘫痪。需要检查页面中是否使用了过大的图片，是否使用了过多的视频资源。

安全类自检

1. XSS攻击

   XSS攻击是指攻击者通过在网页中插入恶意代码，从而控制用户浏览器。需要检查页面中的输入是否经过转义，是否使用了安全的编码方式。

2. SQL注入

   SQL注入是指攻击者通过在输入框中输入恶意SQL语句，从而窃取数据库中的数据。需要检查页面中的输入是否经过转义，是否使用了安全的查询方式。

3. CSRF攻击

   CSRF攻击是指攻击者通过伪造用户的请求，从而让用户在不知情的情况下执行恶意操作。需要检查页面中的表单是否使用了CSRF token，是否使用了安全的请求方式。

兼容性自检

1. 不同浏览器

   页面需要在不同的浏览器上进行兼容性自检，确保页面在所有浏览器上都能正常显示，不会出现样式错乱、元素缺失等问题。

2. 不同设备

   页面需要在不同的设备上进行兼容性自检，确保页面在所有设备上都能正常显示，不会出现样式错乱、元素缺失等问题。

3. 不同系统

   页面需要在不同的系统上进行兼容性自检，确保页面在所有系统上都能正常显示，不会出现样式错乱、元素缺失等问题。