前端自测归纳

交互测试

1. 列表排序

2. 表单必填校验提示

3. 部分点击操作需要有提示
   如删除，批量删除，发布等场景中的click事件

   this.$confirm(
   	是否确认删除？, 确认提示, 
   	{confirmButtonText: 确定,cancelButtonText: 取消,
   	type: 'warning'}).
   then(() => {
   	// 逻辑处理
   }).catch(() => {
   	// 异常处理
   });
   

4. 图标是否与设计保持一致
   检查所有图标是否与设计保持一致(如删除按钮，确认按钮图标等)

5. 输入框，选择框多种类型限制
   多种输入框类型有格式限制并有对应校验规则，可选条件：失去焦点及内容改变

6. 金额显示字段有千分符

7. 上传功能的文件大小，类型限制

8. 图片加载失败
   图片加载失败或无数据时，是否有默认图片

9. 敏感信息脱敏
   手机号等敏感信息脱敏处理

10. 多语言检查
    按钮，弹框，提示等是否有缺少

功能测试

• 防抖处理
  针对点击的操作做防抖处理

  • 定义一个标识，默认为false，点击的时候先判断是不是为true，如果是true，则不进行任何处理。否则把该标识变成true，逻辑执行完（不管是成功还是失败）以后再变成false

    例：

    :loading

    :disabled

• Tab切换
  部分Tab的来回切换不应导致数据的重新加载

极限测试

1. 字段超长是否换行或显示…

   el-table-column 中添加属性 show-overflow-tooltip

   <el-table-column 
   	prop="name" 
   	:label="$_t('','企业名称')" 
   	show-overflow-tooltip
   	sortable 
   	width="200px">
   </el-table-column>
   

   添加css

   // 单行
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   // 多行
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
   

2. 元素检查
   缩放页面大小，检查元素的大小，宽度，颜色，边距等显示是否准确

兼容测试

使用多种不同浏览器进行检测

1. 元素检查
   检查样式，功能是否准确
2. 文件的导出或下载
   导出文件是否为空，文件名内容是否有乱码