本文章转载于搜狗测试
在我们的生活中,复选框似乎随处可见,餐馆菜单的佳肴名称旁边有,登陆网站账号时“自动登录”旁边有,宣传册上的“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)”。
复选框的其他形式:
在某些情况,复选框可能以按钮的形式显示:按钮被按下后不会弹回,而是保持按下的状态,来表示选中;要再按一次才会恢复到凸起状态,表示取消选中。这时候其基本检查点与上面的介绍中是相通的。