复选框?没那么简单

2015-06-16   出处: 搜狗测试

在我们的生活中,复选框似乎随处可见,餐馆菜单的佳肴名称旁边有,登陆网站账号时“自动登录”旁边有,宣传册上的“3个禁止和7个允许”旁边有,操作系统的设置选项旁边有,商务人士的待办事项旁边有,甚至小区里某一个电梯的寻狗启示上也有……总之,复选框是一个我们太熟悉的东西。我们每天都在选择和取消选择之间生活着。


就是这样一个熟悉的东西,作为一名测试人员,我们了解的真的够吗?从一个简单而又根本的问题出发,复选框的定义是什么?

维基百科的定义是这样的:复选框,又叫多选钮,是图形用户界面上的一种控件。它容许用户在一组选项中任意选择合适的选项。复选框的外观一般是一个空白的方洞。而在它的旁边则通常有一个文字的标签。它的用途除了描述之外,还可用于选择该选项:当用户按下标签,所应的选择钮就会被选上。已选上的选择钮一般会在方洞内加上一个选中的符号,如黑色方块(■)、勾号(√)或叉号(×)。



上图便是典型的复选框的样式(图片来自于对Mac OS X 设置中触摸板选项的截图)。观察其中高亮的一条,我们可以总结出一个复选框包含的基本内容有两方面:一个可被选择和取消选择的方框,一条(或多条)用以描述该复选框功能的标签。同时,各个复选框之间还有可能存在选择关联,比如勾选一个省份的所有城市时会有一个全选的复选框,当取消掉其中一个城市的选择时,“全选”框会变为部分选择(下图所示)。


复选框的测试也从这两方面出发。


1) 选择框:


a. 单个复选框可被选择;

b. 单个复选框可被取消选择;

c. 并存的全部复选框可被选择;

d. 并存的全部复选框可被取消选择;

e. 并存的全部复选框可被部分选择;

f. 并存的全部复选框可被部分取消选择;

g. 存在全选关系的复选框的全部选择;

h. 存在全选关系的复选框的部分选择;

i. 存在全选关系的复选框的全部反选;

j. 选择框的形状样式与设计稿一致;

k. 选择框的勾选样式(方块、对勾、叉号)与设计稿一致;

l. 选择框的部分勾选样式(浅色方块、对勾、叉号)与设计稿一致;

m. 选择框在页面上显示时的尺寸与设计稿一致;

n. 选择框与周围控件的边距与设计稿一致;

o. 选择框的线条宽度与设计稿一致;

p. 选择框的对齐方式与设计稿一致;


2) 标签


a. 标签文案内容与设计稿一致;

b. 标签文案内容与复选框功能描述一致;

c. 标签文字大小与设计稿一致;

d. 标签文字的长度屏幕范围内显示完整;

e. 标签文字超出屏幕范围的处理;

f. 标签文字的颜色;

g. 标签文字与页面内控件的距离;

h. 标签文字的对齐方式(水平,垂直);


此外,每一个复选框都对应有相应的生效逻辑,除了外观和操作上还要注意:

a. 复选框被选择时,功能的生效性;

b. 复选框被取消选择时,功能的生效性;

c. 复选框全部/部分选择时,功能的生效性;

d. 复选框全部/部分反选时,功能的生效性。


有时候为了加强可亲性和操作便捷,复选框可以对应上一个快捷键,使用户可使用键盘上的按键来选择所对应的复选框。一般来说,标签上的快捷键会用下划线标示,例如“Activate”代表A为快捷键。而当快捷键没有在标签内出现,便会用括号表示,例如“激活(A)”。


复选框的其他形式:


在某些情况,复选框可能以按钮的形式显示:按钮被按下后不会弹回,而是保持按下的状态,来表示选中;要再按一次才会恢复到凸起状态,表示取消选中。这时候其基本检查点与上面的介绍中是相通的。




声明:本文为本站编辑转载,文章版权归原作者所有。文章内容为作者个人观点,本站只提供转载参考(依行业惯例严格标明出处和作译者),目的在于传递更多专业信息,普惠测试相关从业者,开源分享,推动行业交流和进步。 如涉及作品内容、版权和其它问题,请原作者及时与本站联系(QQ:1017718740),我们将第一时间进行处理。本站拥有对此声明的最终解释权!欢迎大家通过新浪微博(@测试窝)或微信公众号(测试窝)关注我们,与我们的编辑和其他窝友交流。
364° /3641 人阅读/0 条评论 发表评论

登录 后发表评论
最新文章