复选框？没那么简单

本文章转载于搜狗测试

在我们的生活中，复选框似乎随处可见，餐馆菜单的佳肴名称旁边有，登陆网站账号时“自动登录”旁边有，宣传册上的“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)”。

复选框的其他形式：

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