前端代码测试规范培训
2022-10-13 10:11:06 0 举报AI智能生成
前端代码测试规范培训
作者其他创作
大纲/内容
页面缩放显示是否正常
表格的行高具有一致性。
表格单行文本折行，多行文本折行问题：根据实际业务同比例设置相应表格宽度或者溢出部分隐藏掉，鼠标放上去显示全部内容。
价格左，库存居中，其他居左（具体看需求）
文字颜色和文字背景色，需要定出主文字颜色，同系统避免出现太多的颜色，太花哨。
网站统一日期时间和数字格式。当支持本地化或者国际化时，需考虑不同locale下格式的规范
页面的返回：所有需要返回上一页的时候使用history.back();不使用history.go(-1); 需要返回前n页（n>1）时使用history.go(-n)；所有返回都使用连接的方式而不是button。
提交前数据的判断：<br>保证提交前的数据都会通过JS进行数据类型以及长度的判断，需要通过方法focus()聚焦页面第一个错误字段。
当数据超出一屏时，需要提供滚动条。
模块化表现要全部统一的。*（UI考虑）
异常文字采用红色突出显示
链接文字以蓝色表示（UI考虑）
弹出窗口居中显示
错误提示信息的处理：所有错误信息全部使用中文提示错误信息，标点使用中文半角符号，格式如下："错误："+提示信息+"！"
成功提示信息的处理：所有成功信息全部使用中文提示成功信息，标点使用中文半角符号，格式如下："成功："+提示信息+"！"
文字的标点符号全角/半角需要在整个应用内保持一致
提示处理（要考虑国际化的展示，这里以中文为例）
a. 搜索框文本框尽量保持全系统宽度（UI考虑）
b. 搜索组件中使用的文本框必须为单行文本框
c. 文本框的长度不得少于130个像素 高度不得低于18个像素
输入框/选择框，按钮在同一行
文本框如果不允许输入，内部底色为灰色，且输入焦点无法落入控件内
不建议弹窗口，session/cookie传值可能会发生问题
输入焦点始终在最上层窗口（window）。
当数据显示时间超过2秒时，需要有加载动画或者提示信息。加载动画在整个应用内需要统一
当页面有多个数据块（表格，功能区等），针对该数据块需要有title，概括数据块作用。
对某些功能有浮动提示的，如果该元素位于界面左边或左上位置，当鼠标移动到该位置时，提示内容应该在右方或右下方显示，如果在右边或右下位置，提示内容则显示在左或左上的位置，提示内容不能和功能名称（caption或text）相同，必须是对其简单明确的描述。（UI考虑气泡展示）
表单的必填项使用红色*来表示
图片显示控件，界面固定大小，位置（不要直接使用图片大小显示）。
图片因为网络问题，无法正常加载情况下，显示alt标签。
对于树形控件，需要提供展开和缩进功能。
对于开始/截止日期选择框，需提供默认值，可选截止日期需要大于等于开始日期。当开始日期选择大于截止日期，相应的截止日期需要相应变化（一般变更为开始日期）。
全选控件和各个选择项选择控件间联动需要提供三种状态，全部选中，部分选中和全部未选中状态。
系统版本申明
帮助信息，同一个web产品中搜索的位置和表现形式尽量保持一致
readonly控件：所有不可更改的信息都要使用readonly属性
label需要左对齐；
文本输入框左对齐；
输入框内文字左对齐；控件行列间留适当空白。同类型控件长度一致。
页面多行，且功能为label和文本输入控件构成：
标准规范
session设置过期时间标准为10分钟或者半小时
session过期，操作任何页面自动重定向到login页
session时效性
Chrome/Safari/Firefox/IE10下显示是否正常
大屏小屏分辨率页面展示是否正常
支持的浏览器
做成可视化配置，以后开发可以直接甩给产品去线上做配置（优化）
邮件组有账号无效，过虑，其他正常发送
邮件功能
异步处理，要求同一用户不能重复的下载，待异步请求处理结束放开操作。
下载的标题头和页面上的标题头一致，标题头也需要支持多语言，根据最后的一次查询结果导出（如果点击查询后，又换了查询条件，但未点击检索，则下载的是第一次点了查询按钮的检索结果）
文件下载的内容: 支持多语言
注意币种
有价格要带币种即下载内容追加币种（货币）一列，支持format，保留2位小数
已失效或者已删除的商品，不能参与下载
下载效率：目前基本都是异步处理
点击下载提交成功时，弹出提示信息，告知用户需要去下载履历中导出下载文件内容
如果展示以CODE为单位，下载需要以SKU为单位，加code数量限制，不得超过1W，提示文案产品定
下载履历中，当前用户只能看到自己提交的下载请求，分页固定每页5条
下载履历中，翻页功能，分页计算，刷新功能，操作时间倒序
导出功能
正常翻页
分页数据计算正确
一览页点检索按钮时，pageNo要强制指定成1
当前页不可点击。当前页最后一页时，后一页跳转和最后一页链接为禁用状态；当前页为第一页时，前一页跳转和第一页链接为禁用状态。<br>鼠标放上去呈手状显示。
翻页控件
共通检查
每一个检索条件是否都有效，条件组合是否都有效
一览检索页，所有条件检索有效，且交叉条件检索有效
排序字段是否和设计一致（金额，日期，数量），每个排序是否有效
点击菜单后，检索条件，默认排序，页码，每页条数是否初始化
详情页返回后，检索条件，排序，页码，每页条数是否保持
列宽，检索条件项，固定显示项（包括箭头）显示，间距是否合理
出现横向滚动条后，固定列和滑动列是否正常
列数据最大值情况下页面显示是否正常
如有筛选列，是否正常过滤
显示条件是否生效
DB和SOLR有时间差，后期优化
如有页面操作，操作后页面上是否正确反映
如有批量操作是否正常，操作后页面上是否正确反映
按钮操作popup消息文言是否正确（中英文）
列表页
中英文切换显示内容是否正常
父页参数带入子页
每个输入项或者显示项只读状态，显示是否正确
每个操作按钮动作是否正常
每个必填字段消息警报是否正常
每个输入字段格式校验消息警报是否正常
每个按钮的颜色，宽度是否统一，显示条件是否生效
详情页
编辑页
页面系
供应商-销售商数据流转是否正确
数据流转状态更新/变化是否正确
统计类数据是否正确
其他系统数据交换是否正确
删除失效操作数据是否同步至下游系统
流程系
常规Web界面检查
computer
phone
ipad
watch
TV
another
设备平台
iOS
Andriod
Windows
mac
系统平台
常见平台规范
一致性
可用性
易用性
审美性
发展性
扩展性
交互规范
企业形象
用户喜好
VI
视觉主导颜色
信息区分颜色
提示辅助颜色
着色
方圆
大小
形状
状态
精细
颜色
一致
图标
显示
控件
层级
字体
位置
距离
留白
布局
视觉规范
UI设计规范
页面操作响应时间建议不超过3s
在2秒之内给客户响应被用户认为是“非常有吸引力”的用户体验。
在5秒之内给客户响应被用户认为是“比较不错”的用户体验。
在10秒之内给客户响应被用户认为是“糟糕”的用户体验。
如果超过10秒还没有得到响应，那么大多数用户会认为这次请求是失败的。
web网站响应时间的评判标准
一定压力指标下，无压力下一般小于2s
性能标准
文字
日期
对于货币数字表示，一般采用小数点后2位表示
日币韩币没有小数位
货币
翻译
其他
本地化/国际化规范
POST方式
HTTPS
数据传递加密
安全
前端代码测试规范培训
0 条评论
回复 删除
下一页
